HTML + CSS + 像素大厨还原boss直聘UI设计稿

闰土老哥
210 阅读8分钟

最终效果图127.0.0.1_5500_html_boss.html.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css" />
  </head>
  <body>
    <!-- 顶部开始 -->
    <div class="top">
      <div class="container top-nav">
        <!-- logo图片 -->
        <img src="../img/直聘logo.png" alt="logo" />
        <!-- logo旁边的文字 -->
        <ul>
          <li><a href="#" class="active">首页</a></li>
          <li><a href="#">求职</a></li>
          <li><a href="#">扫码登录</a></li>
          <li><a href="#">道具兑换</a></li>
        </ul>
        <!-- 顶部右边的图标 -->
        <div class="iphone"><a href="#">iPhone</a></div>
        <div class="iphone-logo"></div>
        <div class="line"></div>
        <div class="android"><a href="#">Android</a></div>
        <div class="android-logo"></div>
      </div>
    </div>
    <!-- 顶部结束 -->
    <!-- banner区域开始 -->
    <div class="banner">
      <p class="title">BOSS直聘新闻和数据实时跟踪</p>
      <div class="button">媒体合作</div>
    </div>
    <!-- banner区域结束 -->
    <!-- 主体内容区域开始 -->
    <div class="body">
      <!-- 版心区域开始 -->
      <!-- 版心区域三部分的第一部分 -->
      <!-- 版心区域三部分的第一部分开始 -->
      <div class="container container-top">
        <!-- 版心区域三部分的第一部分左边开始 -->
        <div class="item">
          <div class="item-top">
            <div class="fl green-line"></div>
            <div class="fl top-title">数据报告</div>
            <div class="fr top-button"><a href="#">more</a></div>
          </div>
          <div class="img-area"></div>
          <div class="title-area">
            据说为了吸引年轻人，苹果正在开发 一款类似Snapchat
          </div>
          <a href="#" class="detail-area">查看详情</a>
        </div>
        <!-- 右边还有一条线 -->
        <div class="hight-line"></div>
        <!-- 版心区域三部分的第一部分左边结束 -->

        <!-- 版心区域三部分的第一部分中间开始 -->
        <div class="item">
          <div class="item-top">
            <div class="fl green-line"></div>
            <div class="fl top-title">数据报告</div>
            <div class="fr top-button active"><a href="#">more</a></div>
          </div>
          <div class="img-area"></div>
          <div class="title-area">
            据说为了吸引年轻人，苹果正在开发 一款类似Snapchat
          </div>
          <a href="#" class="detail-area">查看详情</a>
        </div>
        <!-- 右边还有一条线 -->
        <div class="hight-line"></div>
        <!-- 版心区域三部分的第一部分中间结束 -->
        <!-- 版心区域三部分的第一部分右边开始 -->
        <div class="item">
          <div class="item-top">
            <div class="fl green-line"></div>
            <div class="fl top-title">数据报告</div>
            <div class="fr top-button"><a href="#">more</a></div>
          </div>
          <div class="img-area"></div>
          <div class="title-area">
            据说为了吸引年轻人，苹果正在开发 一款类似Snapchat
          </div>
          <a href="#" class="detail-area">查看详情</a>
        </div>
        <!-- 版心区域三部分的第一部分右边结束 -->
      </div>

      <!-- 版心区域三部分的第二部分开始 -->
      <div class="container container-middle">
        <!-- 版心区域三部分的第二部分的上部分开始 -->
        <div class="item">
          <!-- 第一个itme的左边图片部分 -->
          <div class="left">
            <img src="../img/container-middle部分上图.png" alt="" />
            <img src="../img/新闻报道小图标.png" class="tag" alt="" />
          </div>

          <!-- 第一个item的右边文字部分 -->
          <div class="right">
            <div class="title">除了身临其境的体验，VR购物还有哪些玩法</div>
            <div class="content">
              你没有强大的物流系统，进销存系统没有的话，价格上面你根本没优势.屈臣氏现在大部分是国货，进口商品也是代理的，占整个品类的15%左右发个品类的15%左右发个品类的15%左右发展直销，也意味套完善的机制，比如CRM，sop等可复制的吗？...
            </div>
            <div class="read-all"><a href="#">查看全文</a></div>
            <div class="item-footer">
              <div class="item-left fl"><a href="#">尝濛</a> · 2小时前</div>
              <div class="tag fl">
                <img class="tag" src="../img/交通出行小图标.png" alt="" />
              </div>
              <div class="item-item-right fl">交通出行 大公司</div>
            </div>
          </div>
        </div>
        <!-- 版心区域三部分的第二部分的上部分结束 -->

        <!-- 版心区域中间部分的上部分下面那条线 -->
        <div class="hr line1"></div>
        <div class="item">
          <!-- 第一个itme的左边图片部分 -->
          <div class="left">
            <img src="../img/container-middle部分上图.png" alt="" />
            <img src="../img/新闻报道小图标.png" class="tag" alt="" />
          </div>

          <!-- 第一个item的右边文字部分 -->
          <div class="right">
            <div class="title">除了身临其境的体验，VR购物还有哪些玩法</div>
            <div class="content">
              你没有强大的物流系统，进销存系统没有的话，价格上面你根本没优势.屈臣氏现在大部分是国货，进口商品也是代理的，占整个品类的15%左右发个品类的15%左右发个品类的15%左右发展直销，也意味套完善的机制，比如CRM，sop等可复制的吗？...
            </div>
            <div class="read-all"><a href="#">查看全文</a></div>
            <div class="item-footer">
              <div class="item-left fl"><a href="#">尝濛</a> · 2小时前</div>
              <div class="tag fl">
                <img class="tag" src="../img/交通出行小图标.png" alt="" />
              </div>
              <div class="item-item-right fl">交通出行 大公司</div>
            </div>
          </div>
        </div>

        <div class="hr line2"></div>
        <div class="item">
          <!-- 第一个itme的左边图片部分 -->
          <div class="left">
            <img src="../img/container-middle部分上图.png" alt="" />
            <img src="../img/新闻报道小图标.png" class="tag" alt="" />
          </div>

          <!-- 第一个item的右边文字部分 -->
          <div class="right">
            <div class="title">除了身临其境的体验，VR购物还有哪些玩法</div>
            <div class="content">
              你没有强大的物流系统，进销存系统没有的话，价格上面你根本没优势.屈臣氏现在大部分是国货，进口商品也是代理的，占整个品类的15%左右发个品类的15%左右发个品类的15%左右发展直销，也意味套完善的机制，比如CRM，sop等可复制的吗？...
            </div>
            <div class="read-all"><a href="#">查看全文</a></div>
            <div class="item-footer">
              <div class="item-left fl"><a href="#">尝濛</a> · 2小时前</div>
              <div class="tag fl">
                <img class="tag" src="../img/交通出行小图标.png" alt="" />
              </div>
              <div class="item-item-right fl">交通出行 大公司</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 版心区域三部分的第二部分结束-->

      <!-- 版心区域三部分的第三部分开始 -->
      <div class="container container-bottom">
        <div class="top">
          <div class="fl green-line"></div>
          <div class="fl title">新闻动态</div>
        </div>
        <!-- 版心区域下面这一部分开始 -->
        <div class="bottom">
          <!-- 版心区域下面这一部分的左边部分 -->
          <div class="left fl">
            <!-- 版心区域下面这一部分的左边部分的第一个开始 -->
            <div class="news">
              <img class="fl" src="../img/下左边第一张.png" alt="" />
              <div class="fl title">
                推动电子商务的第一选择，助力三网融合的首选伙伴！
              </div>
              <div class="fl content">
                今天的O2O，实际是互联网经济和传济水乳交经济和传济水乳交经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来...
              </div>
            </div>
            <!-- 版心区域下面这一部分的左边部分的第一个结束 -->
            <!-- 版心区域下面这一部分的左边部分的第一个开始 -->
            <!-- 版心区域下面这一部分的左边部分的第一个开始 -->
            <div class="news">
              <img class="fl" src="../img/下左边第一张.png" alt="" />
              <div class="fl title">
                推动电子商务的第一选择，助力三网融合的首选伙伴！
              </div>
              <div class="fl content">
                今天的O2O，实际是互联网经济和传济水乳交经济和传济水乳交经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来...
              </div>
            </div>
            <!-- 版心区域下面这一部分的左边部分的第一个结束 -->
            <!-- 版心区域下面这一部分的左边部分的第一个开始 -->
            <div class="news">
              <img class="fl" src="../img/下左边第一张.png" alt="" />
              <div class="fl title">
                推动电子商务的第一选择，助力三网融合的首选伙伴！
              </div>
              <div class="fl content">
                今天的O2O，实际是互联网经济和传济水乳交经济和传济水乳交经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来...
              </div>
            </div>
            <!-- 版心区域下面这一部分的左边部分的第一个结束 -->
          </div>
          <!-- 版心区域最下面一部分的右边部分 -->
          <div class="right fl">
            <img src="../img/下边房子-1.png" alt="" />
            <div class="img-desc">每日电商独家资讯，企业家电商决策内参</div>
          </div>
        </div>
      </div>
      <!-- 版心区域三部分的第三部分开始 -->
      <!-- 版心区域结束 -->
    </div>
    <!-- 主体内容区域结束 -->
    <!-- 底部区域开始 -->
    <div class="footer">
      <div class="title">
        <a href="#">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Boss网页版</a
        >&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">文章</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">关于我们</a>
      </div>
      <div class="content">
        Copyright © 2016 kanzhun.com京ICP备14013441号-1 京公网安备11010502027210
        <br />

        kanzhun.com.保留所有版权. 使用这些服务遵守用户协议
      </div>
    </div>
    <!-- 底部区域结束 -->
  </body>
</html>



/* 清除内外边距，保证所有浏览器观看的效果一样 */
* {
  margin: 0;
  padding: 0;
}

/* a标签的默认样式和颜色 */
a {
  color: #333;
  /* 清除a标签的下划线 */
  text-decoration: none;
  cursor: pointer;
}
/* a标签被激活或者鼠标移入的时候 */
a:hover,
a.active {
  color: #53cac3;
}

/* 顶部区域开始 */
.top {
  width: 100%;
  height: 100px;
  /* background-color: rgb(94, 93, 93); */
}
.top-nav img {
  float: left;
  margin-top: 23px;
}

.top-nav ul {
  /* 顶部那几个字的大小 */
  font-size: 16px;
  /* 顶部外边距，把ul挤下来，形成居中的效果 */
  margin-top: 42px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #333333;
  float: left;
  /* 干掉无序列表前面的小圆点 */
  list-style: none;
}
/* 无序列表里面的文字排成一行 */
.top-nav ul li {
  margin-left: 38px;
  float: left;
}
/* 右侧文字和图标全部右浮动排成一行 */
.top-nav .android,
.top-nav .android-logo,
.top-nav .line,
.top-nav .iphone,
.top-nav .iphone-logo {
  float: right;
}
/* 右侧文字的设置 */
.top-nav .android,
.top-nav .iphone {
  font-family: FZLTXHK--GBK1-0;
  font-size: 14px;
  color: #000000;
  height: 12px;
  margin-top: 45px;
  margin-left: 13px;
}
/* 使用精灵图右侧图标的设置 */
.top-nav .android-logo {
  margin-top: 42px;
  width: 17px;
  height: 21px;
  background: url("../img/css_sprites.png") -10px -10px;
}
.top-nav .iphone-logo {
  margin-top: 42px;
  width: 16px;
  height: 20px;
  background: url("../img/css_sprites.png") -47px -10px;
}
.top-nav .line {
  /* margin外边距设置：上右下左 */
  margin: 46px 19px 0 21px;
  width: 1px;
  height: 18px;
  background: url("../img/css_sprites.png") -83px -10px;
}

/* 版心原子类 */
.container {
  width: 1170px;
  /* 居中 */
  margin: 0 auto;
}
/* 浮动原子类 */
.fr {
  float: right;
}
.fl {
  float: left;
}

/* banner区域开始 */
.banner {
  width: 100%;
  height: 398px;
  background-color: olive;

  background-image: url(../img/banner.png);
  background-size: 100% 110%;
  background-position: bottom;
  border: 1px solid transparent;
}

.banner p.title {
  font-family: PingFangSC-Medium;
  font-size: 38px;
  line-height: 1;
  /* 水平居中 */
  text-align: center;
  color: #ffffff;
  margin-top: 106px;
}

.banner div.button {
  width: 187px;
  height: 44px;
  border-radius: 22px;
  text-align: center;
  background-color: #53cac3;
  font-size: 21px;
  color: #ffffff;
  /*line-height = height 垂直居中 */
  line-height: 44px;
  margin: 51px auto 0 auto;
  font-family: PingFangSC-Light;
}

/* 主体内容区开始 */
.body {
  width: 100%;
  background-color: #f3f3f3;
  padding-bottom: 1px;
  /* border: 1px solid #000; */
}
/* 三个版心内容区域开始 */
.body .container-top {
  height: 436px;
  background-color: #ffffff;
  /* 给个外边距，中间有条缝 */
  margin-bottom: 16px;
  position: relative;
  top: -68px;
}

/* <!-- 版心区域三部分的第一部分左边开始 --> */
.body .container-top .item {
  width: 388px;
  height: 436px;
  float: left;
  /* background-color: olivedrab; */
  padding: 41px 52px 52px 52px;
  box-sizing: border-box;
  /* border-right: 1px solid #535353; */
}

.item .item-top {
  width: 284px;
  height: 20px;
  /* background-color: orangered; */
}

/* 数据报告旁边那条短线 */
.item-top .green-line {
  width: 3px;
  height: 15px;
  /* background-color: #53cac3; */
  margin-right: 9px;
  margin-top: 4px;
}

.item-top .top-title {
  font-family: PingFangSC-Light;
  font-size: 17px;
  color: #333333;
}

.item-top .top-button {
  width: 49px;
  height: 20px;
  font-size: 14px;
  border: 1px solid #666;
  line-height: 20px;
  letter-spacing: 0px;
  color: #666;
  border-radius: 15px/20px;
  text-align: center;
}
.item-top .top-button a {
  width: 49px;
  height: 20px;
  display: inline-block;
}
.item-top .top-button.active a,
.item-top .top-button a:hover {
  color: #fff;
}
.item-top .top-button.active,
.item-top .top-button:hover {
  border: 1px solid #53cac3;
  background-color: #53cac3;
  color: #fff;
}

.item .img-area {
  width: 284px;
  height: 156px;
  /* background-color: orangered; */
  margin-top: 42px;
  background-image: url(../img/img-area.png);
}

.item .title-area {
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0px;
  color: #000000;
  margin-top: 38px;
  /* border: 1px solid #000; */
}
.item .detail-area {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  /* color: #999999; */
  margin-top: 19px;
}
.item .detail-area:hover {
  color: #53cac3;
}

.item .top-button:hover {
  background-color: #53cac3;
  color: #fff;
}

div.hight-line {
  float: left;
  width: 1px;
  height: 344px;
  background-color: #535353;
  opacity: 0.1;
  margin-top: 44px;
}
/* <!-- 版心区域三部分的第一部分左边结束 --> */

/* <!-- 版心区域三部分的第二部分开始 --> */

.body .container-middle {
  height: 726px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 13px;
  padding: 66px 46px 44px 46px;
  box-sizing: border-box;
  position: relative;
  top: -68px;
}

.container-middle .item {
  height: 156px;
  /* background-color: orange; */
}
.container-middle .item .left {
  float: left;
  position: relative;
}

.container-middle .item .left img.tag {
  position: absolute;
  left: -5px;
  top: 12px;
}

.container-middle .item .right {
  width: 764px;
  float: left;
  /* background-color: orchid; */
  height: 156px;
  margin-left: 30px;
}

.container-middle .item .right .title {
  margin-left: 30px;
  font-family: PingFangSC-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0px;
  color: #000000;
}

.container-middle .item .right .content {
  width: 734px;
  margin-top: 24px;
  font-family: SimSun;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 22px;
  letter-spacing: 0px;
  color: #666666;
}

.container-middle .item .right .read-all {
  font-family: SimSun;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 22px;
  letter-spacing: 0px;
  color: #666666;
}
.container-middle .item .right .item-footer {
  margin-top: 10px;
  font: size 14px;
  font-weight: normal;
  letter-spacing: 0;
  color: #999;
}
.container-middle .item .right .item-footer .item-left {
  margin-right: 46px;
}
.container-middle .item .right .item-footer .item-left a {
  color: #53cac3;
}

.container-middle .item .right .item-footer .tag {
  position: relative;
  top: 1px;
  margin-right: 10px;
  width: 9px;
  height: 12px;
}

/* 中间那条线 */
.container-middle .hr {
  width: 1078px;
  height: 1px;
  background-color: #535353;
  opacity: 0.1;
}

.container-middle .hr.line1 {
  margin-top: 35px;
  margin-bottom: 12px;
}
.container-middle .hr.line2 {
  margin: 37px 0;
}

/* 版心区域的最下面一个部分 */
.body .container-bottom {
  position: relative;
  top: -68px;
  border: 1px solid transparent;
  height: 433px;
  background-color: #ffffff;
  margin-bottom: 30px;
}
.body .container-bottom .top {
  /* border: 1px solid #000; */
  margin-top: 26px;
  margin-left: 53px;
  height: 10px;
}

.body .container-bottom .bottom {
  height: 316px;
  /* border: 1px solid #000; */
  margin-top: 31px;
  margin-left: 47px;
}
.body .container-bottom .bottom .left {
  width: 645px;
  height: 316px;
  /* background-color: olivedrab; */
}
.body .container-bottom .bottom .left .news {
  border-bottom: 1px dashed #ccc;
  width: 645px;
  height: 110px;
  background-color: #fff;
  padding: 17px 0;
  box-sizing: border-box;
}

.body .container-bottom .bottom .left .news:nth-child(1) {
  border-bottom: 1px dashed #ccc;
  width: 645px;
  height: 93px;
  /* margin: 17px 0 16px 0; */
}
.body .container-bottom .bottom .left .news .title {
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #53cac3;
  margin-left: 16px;
  margin-top: 9px;
}

.body .container-bottom .bottom .left .content {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0px;
  color: #999999;
  width: 482px;
  margin-top: 11px;
  margin-left: 16px;
}

.body .container-bottom .bottom .left .news:nth-child(2) {
  border-bottom: 1px dashed #ccc;
  width: 645px;
  height: 93px;
}

.body .container-bottom .bottom .right {
  width: 371px;
  height: 316px;
  margin-left: 59px;
  background-color: white;
  position: relative;
}
.body .container-bottom .bottom .right .img-desc {
  background-color: #53cac3;
  width: 371px;
  height: 41px;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #fefefe;
  position: absolute;
  bottom: 0;
  text-align: center;
  line-height: 41px;
}

/* 开始写底部区域 */
.footer {
  border: 1px solid transparent;
  width: 100%;
  height: 233px;
  background-color: #000;
}
.footer .title {
  text-align: center;
  font-family: FZLTXHJW--GB1-0;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 50px;
  letter-spacing: 0px;
  color: #ffffff;
  margin-top: 66px;
  line-height: 1;
}
.footer .title a {
  color: #f3f3f3;
}
.footer .title a:hover {
  color: #53cac3;
}

.footer .content {
  margin-top: 41px;
  font-family: STHeitiSC-Light;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
  line-height: 2;
}
avatar
文章
阅读
粉丝