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>BOSStitle>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/boss.css">
head>
<body>
<div class="index-box w_100">
<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>Androidspan>
a>
li>
<li>
<span class="span-shu">|span>
li>
<li>
<a href="#">
<img src="./images/iphone.png" alt=""><span>iPhonespan>
a>
li>
ul>
div>
div>
div>
<div class="banner w_100">
<div class="banner-con w_1172">
<h1>BOSS直聘新闻和数据实时跟踪h1>
<a href="#">媒体合作a>
div>
div>
<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="#">morea>
div>
<div class="news-img">
<a href="#">
<img src="./images/new_03.png" alt="">
a>
div>
<p class="p-tit">
<a href="#">据说为了吸引年轻人，苹果正在开发 一款类似Snapchata>
p>
<p class="p-more">
<a href="#">查看详情a>
p>
div>
<div class="news-t-list fl">
<div class="newsList-top">
<h4>干活分享h4>
<a href="#">morea>
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="#">morea>
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>
<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>
<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>
<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京公网安备11010502027210p>
<p>kanzhun.com.保留所有版权.使用这些服务遵守用户协议p>
div>
div>
div>
div>
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;
}
新手小白学习一周完成的，首个静态页面，有需要的拿走，第一次做分享，还希望有大佬给指正修改！