2025年BOSS新闻页面静态页面

大家好，我是讯享网，很高兴认识大家。

BOSS新闻页面静态页面
网页图片

讯享网

首页index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<>, initial-scale=1.0"> <title>BOSS</title> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/boss.css"> </head> <body> <!-- index begin --> <div class="index-box w_100"> <!-- header begin --> <div class="header-box w_100"> <div class="header w_1172 cle"> <div class="logo-box fl"> <a href="#"> <img src="./images/logo.png" alt=""> </a> </div> <div class="nav fl"> <ul class="cle"> <li><a href="#">首页</a></li> <li><a href="#">求职</a></li> <li><a href="#">扫码登录</a></li> <li><a href="#">道具兑换</a></li> </ul> </div> <div class="phone-ico fr"> <ul class="cle"> <li> <a href="#"> <img src="./images/Android .png" alt=""><span>Android</span> </a> </li> <li> <span class="span-shu">|</span> </li> <li> <a href="#"> <img src="./images/iphone.png" alt=""><span>iPhone</span> </a> </li> </ul> </div> </div> </div> <!-- header end --> <!-- banner begin --> <div class="banner w_100"> <div class="banner-con w_1172"> <h1>BOSS直聘新闻和数据实时跟踪</h1> <a href="#">媒体合作</a> </div> </div> <!-- banner end --> <!-- news top begin --> <div class="nwes-top-box"> <div class="news-top-con cle w_1172"> <div class="news-t-list fl"> <div class="newsList-top"> <h4>数据报告</h4> <a href="#">more</a> </div> <div class="news-img"> <a href="#"> <img src="./images/new_03.png" alt=""> </a> </div> <p class="p-tit"> <a href="#">据说为了吸引年轻人，苹果正在开发 一款类似Snapchat</a> </p> <p class="p-more"> <a href="#">查看详情</a> </p> </div> <div class="news-t-list fl"> <div class="newsList-top"> <h4>干活分享</h4> <a href="#">more</a> </div> <div class="news-img"> <a href="#"> <img src="./images/new_01.png" alt=""> </a> </div> <p class="p-tit"> <a href="#">专属技术顾问手把手教学，一天上线一个微信</a> </p> <p class="p-more"> <a href="#">查看详情</a> </p> </div> <div class="news-t-list news-tlist-borderNone fl"> <div class="newsList-top"> <h4>新闻报道</h4> <a href="#">more</a> </div> <div class="news-img"> <a href="#"> <img src="./images/new_02.png" alt=""> </a> </div> <p class="p-tit"> <a href="#">据说为了吸引年轻人，苹果正在开发 一款类似Snapchat的视频</a> </p> <p class="p-more"> <a href="#">查看详情</a> </p> </div> </div> </div> <!-- news top end --> <!-- news middle begin --> <div class="news-bottom-box w_1172"> <div class="news-bottom-con"> <ul> <li> <div class="news-img-box fl"> <a href="#" class="img-url"> <img src="./images/new_01.png" alt=""> </a> <a class="column-box" href="#">干活分享</a> </div> <div class="news-con-box fl"> <p class="news-tit"> <a href="#"> 除了身临其境的体验，VR购物还有哪些玩法 </a> </p> <p class="news-art"> 你没有强大的物流系统，进销存系统没有的话，价格上面你根本没优势.屈臣氏现在大部分是国货，进口商品也是代理的，占整个品类的15%左右发个品类的15%左右发个品类的15%左右发展直销，也意味套完善的机制，比如CRM,s0p等可复制的吗？. </p> <a href="#" class="news-art-more">查看全文</a> <p class="news-time-tag"> <span class="stare-box"><a href="#">高鹏格</a></span><span class="dian-box">·</span><span class="time-box">2小时前</span><span class="tags-box"><a href="#">交通出行</a><a href="#">大公司</a></span> </p> </div> </li> <li> <div class="news-img-box fl"> <a href="#" class="img-url"> <img src="./images/new_03.png" alt=""> </a> <a class="column-box" href="#">干活分享</a> </div> <div class="news-con-box fl"> <p class="news-tit"> <a href="#"> 除了身临其境的体验，VR购物还有哪些玩法 </a> </p> <p class="news-art"> 你没有强大的物流系统，进销存系统没有的话，价格上面你根本没优势.屈臣氏现在大部分是国货，进口商品也是代理的，占整个品类的15%左右发个品类的15%左右发个品类的15%左右发展直销，也意味套完善的机制，比如CRM,s0p等可复制的吗？. </p> <a href="#" class="news-art-more">查看全文</a> <p class="news-time-tag"> <span class="stare-box"><a href="#">高鹏格</a></span><span class="dian-box">·</span><span class="time-box">2小时前</span><span class="tags-box"><a href="#">交通出行</a><a href="#">大公司</a></span> </p> </div> </li> <li> <div class="news-img-box fl"> <a href="#" class="img-url"> <img src="./images/new_02.png" alt=""> </a> <a class="column-box" href="#">干活分享</a> </div> <div class="news-con-box fl"> <p class="news-tit"> <a href="#"> 除了身临其境的体验，VR购物还有哪些玩法 </a> </p> <p class="news-art"> 你没有强大的物流系统，进销存系统没有的话，价格上面你根本没优势.屈臣氏现在大部分是国货，进口商品也是代理的，占整个品类的15%左右发个品类的15%左右发个品类的15%左右发展直销，也意味套完善的机制，比如CRM,s0p等可复制的吗？. </p> <a href="#" class="news-art-more">查看全文</a> <p class="news-time-tag"> <span class="stare-box"><a href="#">高鹏格</a></span><span class="dian-box">·</span><span class="time-box">2小时前</span><span class="tags-box"><a href="#">交通出行</a><a href="#">大公司</a></span> </p> </div> </li> </ul> </div> </div> <!-- news middle end --> <!-- news bottom begin --> <div class="new-bottom-box"> <div class="new-bottom-con w_1172"> <div class="ewsBtm-top"> <h4>新闻动态</h4> </div> <div class="newsBtm-box cle"> <div class="newsBtm-left fl"> <ul> <li> <a href="#"> <img src="./images/news_01.jpg" alt=""> <p class="newsBtm-tit">推动电子商务的第一选择，助力三网融合的首选伙伴！</p> <p class="newsBtm-art"> 今天的O2O，实际是互联网经济和传济水**经济和传济水**经济和传济水**融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来风网经济和传济水**融来 </p> </a> </li> <li> <a href="#"> <img src="./images/news_02.jpg" alt=""> <p class="newsBtm-tit">推动电子商务的第一选择，助力三网融合的首选伙伴！</p> <p class="newsBtm-art"> 今天的O2O，实际是互联网经济和传济水**经济和传济水**经济和传济水**融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来风网经济和传济水**融来 </p> </a> </li> <li> <a href="#"> <img src="./images/news_03.jpg" alt=""> <p class="newsBtm-tit">推动电子商务的第一选择，助力三网融合的首选伙伴！</p> <p class="newsBtm-art"> 今天的O2O，实际是互联网经济和传济水**经济和传济水**经济和传济水**融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来风网经济和传济水**融来 </p> </a> </li> </ul> </div> <div class="newsBtm-right fr"> <div class="nwesBtm-img-box"> <img src="./images/news_04.jpg" title="" alt=""> <div class="btm-tit"> <p>每日电商独家资讯，企业家电商决策内参</p> </div> </div> </div> </div> </div> </div> <!-- news bottom end --> <div class="footer w_100"> <div class="footer-con w_1172"> <div class="footer-nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">Boss网页版</a></li> <li><a href="#">文章</a></li> <li><a href="#">关于我们</a></li> </ul> </div> <div class="copy-box"> <p>Copyright &copy; 2016 kanzhun.com京ICP备号-1京公网安备210</p> <p>kanzhun.com.保留所有版权.使用这些服务遵守用户协议</p> </div> </div> </div> </div> <!-- index end --> </body> </html>

讯享网

重置样式reset.css

讯享网html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,li,input,textarea,option,button,fieldset,legend,hr{ 
    margin:0; padding:0; } li{ 
    list-style:none; } a { 
    text-decoration: none; } img { 
    display:block; border:none; } input ,textarea ,fieldset{ 
    outline: none; border:none; } h1,h2,h3,h4,h5,h6{ 
    font-weight: normal; font-size:100%; } b,strong { 
    font-weight: normal; } em,i { 
    font-style:normal; } table { 
    border-collapse: collapse; border-spacing: 0; } textarea { 
    /* 取消可拖拽效果 */ resize: none; } .cle::after{ 
    content:''; display:block; clear:both; height:0; overflow:hidden; visibility: hidden; } .clearFix{ 
    zoom:1; } .fl{ 
    float:left; } .fr{ 
    float:right; } body { 
    font:12px '微软雅黑'; /* min-width:1000px; */ } .borderNone { 
    border:none !important; }

首页样式style.css

.w_100{ 
    width: 100%; min-width: 1170px; } .w_1172{ 
    width: 1172px; margin: 0 auto; } body{ 
    background: #f3f3f3; } /* head */ .header-box{ 
    border-top: 1px solid #f1f2f2; border-bottom: 1px solid #f1f2f2; padding: 23px 0 21px 0; } .nav{ 
    padding-left: 22px; } .nav ul li{ 
    height: 54px; float: left; line-height: 52px; } .nav ul li a{ 
    display: block; padding: 0 19px; color: #000; } .nav ul li a:hover{ 
    color: #53cac3; } .phone-ico ul li{ 
    float: left; overflow: hidden; } .phone-ico ul li a{ 
    overflow: hidden; display: block; } .phone-ico ul li a img, .phone-ico ul li a span{ 
    float: left; } .phone-ico ul li a span, .phone-ico ul li .span-shu{ 
    color: #; font-size: 14px; padding-left: 14px; height: 21px; line-height: 21px; } .phone-ico ul li .span-shu{ 
    padding: 0 20px; } .banner{ 
    height: 398px; background: url(../images/banner.png) no-repeat bottom/cover; } .banner-con{ 
    padding-top: 106px; } .banner-con h1{ 
    font-size: 38px; font-family: PingFangSC; font-weight: 500; color: #fff; text-align: center; letter-spacing: 3px; font-size: 36px; } .banner-con a{ 
    display: block; margin: 0 auto; text-align: center; width: 187px; height: 44px; line-height: 44px; color: #fff; background: #53cac3; border-radius: 22px; font-size: 20px; margin-top: 51px; } .news-top-con{ 
    margin-top: -68px; background: #fff; padding-bottom: 47px; padding-top: 42px; } .news-t-list{ 
    width: 286px; padding: 0 52px; border-right: 1px solid #ededed; } .news-tlist-borderNone{ 
    border-right: 0; } .news-img{ 
    width: 100%; height: 180px; overflow: hidden; margin-top: 19px; } .news-img img{ 
    width: 100%; min-height: 180px; transition: 0.5s; } .news-img img:hover{ 
    transform: scale(1.1); } .newsList-top{ 
    height: 20px; overflow: hidden; } .newsList-top h4{ 
    height: 16px; line-height: 16px; font-size: 16px; border-left: 3px solid #53cac3; padding-left: 9px; float: left; margin-top: 2px; } .newsList-top a{ 
    float: right; width: 47px; height: 18px; line-height: 18px; text-align: center; font-size: 12px; border: 1px solid #bebebe; color: #; border-radius: 18px; } .newsList-top a:hover{ 
    border: 1px solid #53cac3; color: #53cac3; } .news-t-list .p-tit{ 
    font-size: 20px; line-height: 32px; margin-top: 30px; } .news-t-list .p-tit a{ 
    color: #000; } .news-t-list .p-tit a:hover{ 
    color: #53cac3; } .news-t-list .p-more{ 
    margin-top: 15px; } .news-t-list .p-more a{ 
    height: 14px; font-size: 14px; color: #; } .news-t-list .p-more a:hover{ 
    color: #53cac3; } .news-bottom-con{ 
    background: #fff; margin-top: 16px; padding: 54px 46px 0; } .news-bottom-con ul li{ 
    padding: 12px 0 37px 24px; border-bottom: 1px solid #ededed; overflow: hidden; } .news-bottom-con ul li:last-child{ 
    border-bottom: none; } .news-bottom-con .news-img-box{ 
    width: 286px; height: 179px; position: relative; margin-right: 28px; } .news-bottom-con .news-img-box img{ 
    width: 100%; min-height: 179px; transition: .5s; } .news-bottom-con .news-img-box .column-box{ 
    display: block; position: absolute; background: url(../images/list_bg.png) no-repeat; left: -4px; top: 12px; width: 57px; height: 24px; line-height: 20px; padding-left: 4px; font-size: 12px; color: #fff; } .news-bottom-con .news-img-box .img-url{ 
    display: block; width: 286px; height: 179px; overflow: hidden; } .news-bottom-con .news-img-box img:hover{ 
    transform: scale(1.1); } .news-bottom-con .news-con-box{ 
    width: 742px; } .news-con-box .news-tit{ 
    font-size: 20px; } .news-con-box .news-tit a{ 
    color: #000; } .news-con-box .news-tit a:hover{ 
    color: #53cac3; } .news-con-box .news-art{ 
    line-height: 24px; color: #8a8a8a; font-size: 14px; margin-top: 20px; height: 72px; } .news-con-box .news-art-more{ 
    line-height: 24px; color: #8a8a8a; font-size: 14px; } .news-con-box .news-art-more:hover{ 
    display: block; color: #53cac3; height: 24px; } .news-con-box .news-time-tag{ 
    font-size: 14px; color: #a0a0a0; margin-top: 18px; } .news-con-box .news-time-tag .stare-box a{ 
    color: #53cac3; } .news-con-box .news-time-tag .dian-box{ 
    padding: 0 10px; } .news-con-box .news-time-tag .tags-box{ 
    margin-left: 46px; padding-left: 11px; background: url(../images/tags.png) no-repeat 0px 5px; } .news-con-box .news-time-tag .tags-box a{ 
    padding-left: 10px; color: #a0a0a0; } .news-con-box .news-time-tag .tags-box a:hover{ 
    color: #53cac3; } .new-bottom-con{ 
    background: #fff; padding-bottom: 40px; } .new-bottom-box{ 
    margin-top: 16px; } .ewsBtm-top{ 
    padding: 26px 0px 14px; } .ewsBtm-top h4{ 
    line-height: 18px; font-size: 18px; border-left: 3px solid #53cac3; margin: 0 47px; padding-left: 6px; } .newsBtm-box{ 
    padding: 0 47px; } .newsBtm-left{ 
    width: 646px; } .newsBtm-left li{ 
    border-bottom: 1px dashed #ccc; padding: 15px 0; } .newsBtm-left li a{ 
    display: block; overflow: hidden; } .newsBtm-left li img{ 
    float: left; margin-right: 17px; } .newsBtm-left li .newsBtm-tit{ 
    color: #333; font-size: 14px; line-height: 30px; padding-top: 2px; font-weight: 400; } .newsBtm-left li a:hover .newsBtm-tit{ 
    color: #53cac3; } .newsBtm-left li .newsBtm-art{ 
    font-size: 12px; color: #999; line-height: 20px; } .newsBtm-right{ 
    width: 371px; height: 316px; padding-top: 17px; } .nwesBtm-img-box{ 
    position: relative; } .nwesBtm-img-box .btm-tit{ 
    position: absolute; background: #53cac3; width: 371px; height: 41px; line-height: 41px; left: 0; bottom: 0; color: #fff; } .nwesBtm-img-box .btm-tit p{ 
    padding-left: 16px; } .footer{ 
    background: #000; padding: 60px 0 59px; } .footer-nav ul{ 
    text-align: center; } .footer-nav ul li{ 
    display: inline-block; } .footer-nav ul li a{ 
    display: block; height: 30px; line-height: 30px; color: #7f7f7f; padding: 0 13px; font-size: 16px; } .footer-con .copy-box{ 
    margin-top: 27px; } .footer-con .copy-box p{ 
    font-size: 14px; line-height: 30px; text-align: center; color: #7f7f7f; }

新手小白学习一周完成的，首个静态页面，有需要的拿走，第一次做分享，还希望有大佬给指正修改！

2025年BOSS新闻页面静态页面

相关推荐