HTML + CSS还原ui，前端高度还原设计稿

闰土老哥
479 阅读5分钟 
<!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-nav">
      <div class="container">
        <img src="../img/博文尚美logo.png" class="logo" alt="" />
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">PROTFOLIO</a></li>
          <li><a href="#">SERVICE</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    </div>
    <!-- 顶部导航结束 -->
    <!-- banner区开始 -->
    <div class="banner">
      <ul>
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- banner区结束 -->

    <!-- 服务范围区开始 -->
    <div class="service">
      <div class="container">
        <img src="../img/左横线和椭圆图标.png" alt="" />
        <div class="text">服务范围</div>
        <img src="../img/椭圆和右横线图标.png" alt="" />
        <p>OUR SERVICES</p>

        <div class="logos">
          <div class="logo-item">
            <img src="../img/1.WEB DESIGN.png" alt="" />
            <h4>1.WEB DESIGN</h4>
            <p>企业品牌网站设计/手机网站制作 动画网站创意设计</p>
          </div>
          <div class="logo-item">
            <img src="../img/1.WEB DESIGN.png" alt="" />
            <h4>1.WEB DESIGN</h4>
            <p>企业品牌网站设计/手机网站制作 动画网站创意设计</p>
          </div>
          <div class="logo-item">
            <img src="../img/1.WEB DESIGN.png" alt="" />
            <h4>1.WEB DESIGN</h4>
            <p>企业品牌网站设计/手机网站制作 动画网站创意设计</p>
          </div>
          <div class="logo-item">
            <img src="../img/1.WEB DESIGN.png" alt="" />
            <h4>1.WEB DESIGN</h4>
            <p>企业品牌网站设计/手机网站制作 动画网站创意设计</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务范围区结束 -->

    <!-- 客户案例区域开始 -->
    <div class="client">
      <div class="container">
        <img src="../img/左横线和椭圆图标.png" alt="" />
        <div class="text">客户案例</div>
        <img src="../img/椭圆和右横线图标.png" alt="" />
        <p>
          OUR SERVICESWith the best professional technology, to design the best
          innovative web site
        </p>

        <div class="pics">
          <div class="pic-item">
            <img src="../img/客户案例经典动感.png" alt="" />
          </div>
          <div class="pic-item">
            <img src="../img/客户案例中间一张.png" alt="" />
          </div>
          <div class="pic-item">
            <img src="../img/客户案例下面最后一张.png" alt="" />
          </div>
        </div>

        <a href="#"> <div class="button">VIEW MORE</div></a>
      </div>
    </div>

    <!-- 客户案例区域结束 -->

    <!-- 资讯模块开始 -->
    <div class="msg">
      <div class="container">
        <img src="../img/左横线和椭圆图标.png" alt="" />
        <div class="text">最新资讯</div>
        <img src="../img/椭圆和右横线图标.png" alt="" />
        <p>TEH LATEST NEWS</p>
      </div>

      <div class="msg-container">
        <img class="fl" src="../img/左下角的房子.png" alt="" />

        <div class="fl number">
          <span class="number">09</span><br />
          <span class="date">Jan</span>
        </div>

        <div class="fl content r30 b44">
          <h3>网站排名进入前三的技巧说明</h3>
          <p>
            很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
            首页，更不用说进首页前三了。那么网站优...
          </p>
        </div>
        <div class="fl number">
          <span class="number">09</span><br />
          <span class="date">Jan</span>
        </div>

        <div class="fl content b44">
          <h3>网站排名进入前三的技巧说明</h3>
          <p>
            很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
            首页，更不用说进首页前三了。那么网站优...
          </p>
        </div>
        <div class="fl number">
          <span class="number">09</span><br />
          <span class="date">Jan</span>
        </div>

        <div class="fl content r30">
          <h3>网站排名进入前三的技巧说明</h3>
          <p>
            很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
            首页，更不用说进首页前三了。那么网站优...
          </p>
        </div>
        <div class="fl number">
          <span class="number">09</span><br />
          <span class="date">Jan</span>
        </div>

        <div class="fl content">
          <h3>网站排名进入前三的技巧说明</h3>
          <p>
            很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
            首页，更不用说进首页前三了。那么网站优...
          </p>
        </div>
      </div>
    </div>
    <!-- 资讯模块结束 -->

    <!-- 底部导航开始 -->
    <div class="footer">
      <div class="container">
        <div class="center">
          <p class="fl">
            Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved
          </p>
          <ul class="fl">
            <li><a href="#">Home</a></li>
            <li class="line"><a href="#">|</a></li>
            <li><a href="#">About</a></li>
            <li class="line"><a href="#">|</a></li>
            <li><a href="#">Portfolio</a></li>
            <li class="line"><a href="#">|</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 底部导航结束 -->
  </body>
</html>







* {
  margin: 0;
  padding: 0;
}
.fl {
  float: left;
}
.r30 {
  margin-right: 32px;
}

.b44 {
  margin-bottom: 32px;
}
.fr {
  float: right;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #646464;
}
.container {
  width: 1352px;
  margin: 0 auto;
}

/* 顶部导航开始 */
.top-nav {
  width: 100%;
  height: 81px;
  /* background-color: olivedrab; */
}
/* 顶部的图片和文字排成一行 */
.top-nav img.logo {
  float: left;
  margin-left: 135px;
  margin-top: 19px;
  margin-right: 306px;
}
.top-nav ul li {
  float: left;
  font-family: ArialMT;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #646464;
  line-height: 81px;
  margin-right: 55px;
}
/* 顶部导航结束 */
div.banner {
  background-image: url(../img/banner\ 区CREATIVE.png);
  width: 100%;
  height: 450px;
  /* background-color: olivedrab; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
}
div.banner ul {
  margin-top: 400px;
  /* border: 1px solid #000; */
  display: inline-block;
  height: 12px;
}
div.banner ul li {
  display: inline-block;
  width: 10px;
  height: 10px;
  /* background-color: olivedrab; */
  border: 1px solid #fff;
  border-radius: 6px;
  margin-right: 11px;
}

div.banner ul li:last-of-type {
  margin-right: 0;
}
div.banner ul li.active {
  background-color: #fff;
}
div.banner ul li:hover {
  cursor: pointer;
  background-color: #fff;
}
/* 服务范围区开始 */
div.service {
  width: 100%;
  height: 407px;
  /* background-color: olivedrab; */
  text-align: center;
}

div.service .container {
  padding-top: 61px;
}

div.service .text {
  font-family: AdobeHeitiStd-Regular;
  font-size: 20px;
  /* width: 100px; */
  font-weight: normal;
  letter-spacing: 0px;
  color: #363636;
  display: inline-block;
  /* border: 1px solid #000; */
  /* 设置内边距 */
  margin: 0 30px;
}

div.service .container p {
  font-family: ArialMT;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #9f9f9f;
}

div.service .container div.logos {
  display: inline-block;
  margin-top: 34px;
}
div.service .container div.logo-item {
  float: left;
  text-align: center;
  height: 208px;
  width: 202px;
  /* background-color: rgb(17, 15, 14); */
  margin-right: 72px;
}
div.service .container div.logo-item:last-of-type {
  margin-right: 0;
}

div.service .container div.logo-item h4 {
  margin-bottom: 14px;
  font-family: Arial-BoldMT;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #434343;
}
div.service .container div.logo-item p {
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 22px;
  letter-spacing: 0px;
  color: #6d6d6d;
}

/* 客户案例区 */
div.client {
  width: 100%;
  height: 491px;
  display: inline-block;
  background-color: #f8f8f8;
  text-align: center;
}

div.client .text {
  width: 102px;
  height: 21px;
  font-family: AdobeHeitiStd-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #66c5b4;

  display: inline-block;
  /* border: 1px solid #000; */
  /* 设置内边距 */
  margin: 0 30px;
}

div.client .container {
  padding-top: 61px;
}

div.client .container p {
  font-family: ArialMT;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #9f9f9f;
  margin-top: 5px;
}

div.client .container div.pics {
  display: inline-block;
  margin-top: 34px;
}
div.client .container div.pic-item {
  float: left;
  text-align: center;

  /* background-color: rgb(17, 15, 14); */
  margin-right: 19px;
}
div.client .container div.pic-item:last-of-type {
  margin-right: 0;
}

div.client .container .button {
  width: 176px;
  height: 37px;
  line-height: 37px;
  background-color: #66c5b4;
  margin: 0 auto;
  border-radius: 20px;
  margin-top: 36px;
  font-family: ArialMT;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
}
/* 资讯模块开始 */
div.msg {
  width: 100%;
  height: 471px;
  display: inline-block;
  background-color: #fff;
  text-align: center;
}

div.msg .text {
  width: 102px;
  height: 21px;
  font-family: AdobeHeitiStd-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #363636;

  display: inline-block;
  /* border: 1px solid #000; */
  /* 设置内边距 */
  margin: 0 30px;
}

div.msg .container {
  padding-top: 61px;
}
div.msg .container img {
  position: relative;
  top: -3px;
}

div.msg .container p {
  font-family: ArialMT;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #9f9f9f;
  margin-top: 5px;
}

div.msg .msg-container {
  width: 1074px;
  height: 196px;
  /* background-color: #53cac3; */
  margin: 58px auto;
  float: left;
}

div.msg .msg-container div.number {
  /* padding-top: 11px; */
  width: 72px;
  height: 82px;
  /* background-color: red; */
  border-right: 1px solid #dcdcdc;
}

div.msg .msg-container .number span.number {
  font-family: Arial-BoldMT;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  color: #66c5b4;
}

div.msg .msg-container .number span.date {
  font-family: ArialMT;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #999999;
}

div.msg div.msg-container div.content {
  width: 331px;
  height: 82px;
  /* background-color: orange; */
}

div.msg .msg-container .content h3 {
  text-align: left;
  margin-left: 21px;
  font-family: MicrosoftYaHei;

  font-weight: normal;
  font-stretch: normal;

  color: #3f3f3f;
}

div.msg .msg-container .content p {
  font-family: NSimSun;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 21px;
  letter-spacing: 0px;
  color: #a4a4a4;
  text-align: left;
  margin-left: 21px;
}

div.footer {
  width: 100%;
  height: 56px;
  background-color: #66c5b4;
}

div.footer div.center {
  width: 1067px;
  margin: 0 auto;
}

div.footer .container p {
  display: inline-block;
  margin-right: 400px;
  font-family: ArialMT;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 56px;
  letter-spacing: 0px;
  color: #ffffff;
}

div.footer .container ul {
  font-family: ArialMT;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #ffffff;
  /* border: 1px solid #000; */
}

div.footer .container ul li {
  line-height: 55px;
  /* margin-right: 19px; */
  float: left;
  /* border: 1px solid #000; */
}

div.footer .container ul li a {
  color: #ffffff;
}

div.footer .container ul li.line {
  margin-right: 14px;
  margin-left: 14px;
}

最终效果图127.0.0.1_5500_html_%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E.html.png

avatar
文章
阅读
粉丝