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 © 2016 kanzhun.com京ICP备14013441号-1京公网安备11010502027210</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: #242424;
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: #797979;
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: #999999;
}
.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;
}
新手小白学习一周完成的，首个静态页面，有需要的拿走，第一次做分享，还希望有大佬给指正修改！
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
