HTML及CSS模拟报纸

任务目的

深入掌握CSS中的字体、背景、颜色等属性的设置

进一步练习CSS布局

任务描述

参考 PDS设计稿（点击下载），实现页面开发，要求实现效果与样例（点击查看）基本一致

页面中的各字体大小，内外边距等可参看标注图（点击查看）

页面宽度固定

注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript

设计稿中的图片、文案均可自行设定

在Chrome中完美实现符合标注中的各项说明

有能力的同学可以尝试跨浏览器的兼容性

有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

参考资料

MDN HTML入门

MDN CSS入门教程

任务代码

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>task6</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="clearfix">
    <div class="header-logo">ife.baidu.com</div>
    <span class="header-time">2016.03</span>
  </header>
  <section id="about" class="clearfix">
    <aside>
      <p class="bigLetter"><span>ABOUT</span></p>
      <p class="bigLetter"><span>TECHNOLOGE</span></p>
      <p class="content">About technologe about technologe about technologe</p>
      <h3 class="big700">700</h3>
      <div class="content3">
        <span class="red3">3.2</span>
        <span class="wraper">
          <span class="redcss">CSS</span>
          <span>cssssccsccscssc</span>
        </div>
      </h4>
    </aside>
    <article>
      <div class="about-img">
        <img src="http://img3.3lian.com/2013/c3/75/d/10.jpg" alt="轮播图">
        <div class="shadow-left"></div>
        <div class="shadow-right"></div>
      </div>
      <div class="introduce clearfix">
        <div class="what">
          <h2><span class="greenH2">What</span></h2>
          <p>
            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
          </p>
        </div>
        <div class="what">
          <h2><span class="yellowH2">When</span></h2>
          <p>
            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
          </p>
        </div>
        <div class="what">
          <h2><span class="redH2">How</span></h2>
          <p>
            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
          </p>
          <div class="whatPrecent">
            <ul>
              <li>What--------<span class="precent">40%</span></li>
              <li>What--------<span class="precent">30%</span></li>
              <li>What--------<span class="precent">30%</span></li>
            </ul>
          </div>
        </div>
      </div>
    </article>
  </section>
  <section id="technologe" class="clearfix">
    <div class="technologe-left">
      <h1><span class="yellowLetter">THE</span>TECHNOLOGE OF FRONT</h1>
      <h2>前端技术领域</h2>
      <p>前端前端前端前端前端前端前端前端前端前端前前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
      <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1827139362,3355305400&fm=27&gp=0.jpg" alt="猫图片" width=200 height=300>
      <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端。</p>
    </div>
    <div class="technologe-right">
      <div class="technologe-top">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538129588585&di=3109d5c44b646da00ef9e17623a561c1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F3%2F05%2Fc4361318222.jpg%3Fdown" alt="技术图" width=450 height=250>
        <div class="shadow-img">
          <h2>前端技术<span>前端技术前端技术</span></h2>
        </div>
      </div>
      <div class="technologe-bottom">
        <ul>
          <li>▲前端前端前端前端前端前端前端前端...................................前端</li>
          <li>▲前端前端前端前端前端前端前端前端...................................前端</li>
          <li>▲前端前端前端前端前端前端前端前端...................................前端</li>
        </ul>
        <div class="technologe-data clearfix">
          <div class="data-left">
            <h2>0</h2>
            <div class="detail">
              <h3>ONE TWO</h3>
              <h3>THREE FORE FIVE</h3>
              <p>hello world hello world hello world</p>
            </div>
          </div>
          <div class="data-right">
            <p><span>“</span>world hello word hello word hello word hello word hello word hello word hello word hello word hello word<span>”</span></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>ife.baidu.com</footer>
</body>
</html>
//style.css
/*格式化样式-----------------------*/
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
ul a{
  text-decoration: none;
}
.clearfix::after{
  content: '';
  clear: both;
  display: block;
}
html{
  background-color: rgb(14,14,14);
}
body{
  width: 980px;
  margin: 0 auto;
  padding: 0 40px;
  background-color: white;
}
/*头部样式--------------------------*/
header{
  border-bottom: 2px solid rgb(146,146,146);
  margin-bottom: 40px;
}
header .header-logo{
  float: left;
  color: white;
  font-size: 14px;
  width: 120px;
  padding-top: 40px;
  background-color: rgb(213,93,92);
}
header .header-time{
  float: right;
  padding-top: 34px;
  color: rgb(213,93,92);
}
/*关于部分样式--------------------------*/
#about aside{
  float: right;
  width: 250px;
  border-top: 2px solid rgb(205,128,146);
  padding-top: 10px;
}
#about aside .bigLetter:first-letter{
  font-size: 30px;
}
#about aside .bigLetter span{
  border-bottom: 2px solid gray;
}
#about aside .content{
  font-size: 14px;
  color: rgb(103,103,103);
}
#about aside .big700{
  font-size: 120px;
  color: rgb(117,184,107);
}
#about aside .content3 .red3{
  color: rgb(202,130,146);
  font-size: 60px;
}
#about aside .content3 .wraper{
  display: inline-block;
  width: 100px;
  color: #ccc;
}
#about aside .content3 .wraper .redcss{
  font-size: 16px;
  color: rgb(202,130,146);
}
#about article{
  margin-right: 300px;
}
#about article .about-img{
  position: relative;
}
#about article .about-img img{
  width: 100%;
  height: 300px;
}
#about article .about-img .shadow-left{
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  height: 98.8%;
  background-color: green;
  opacity: 0.3;
}
#about article .about-img .shadow-right{
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 98.8%;
  background-color: red;
  opacity: 0.3;
}
#about article .introduce{
  margin-top: 50px;
}
#about article .introduce .what{
  float: left;
  width: 200px;
  margin-right: 25px;
}
#about article .introduce .what p{
  font-size: 14px;
  margin-top: 10px;
  color: rgb(188,188,188);
}
#about article .introduce .what .whatPrecent{
  margin-top: 10px;
}
#about article .introduce .what .whatPrecent li{
  line-height: 25px;
}
#about article .introduce .what .whatPrecent .precent{
  color: rgb(235,185,183);
}
#about article .introduce .what:last-of-type p{
  line-height: 26px;
}
#about article .introduce .what .greenH2{
  color: rgb(64,140,90);
  border-bottom: 2px solid rgb(64,140,90);
}
#about article .introduce .what .yellowH2{
  color: rgb(212,150,90);
  border-bottom: 2px solid rgb(212,150,90);
}
#about article .introduce .what .redH2{
  color: rgb(204,118,130);
  border-bottom: 2px solid rgb(204,118,130);
}
/*前端技术领域部分样式--------------------------*/
#technologe {
  margin-top: 60px;
  border-bottom: 1px solid gray;
}
#technologe .technologe-left{
  float: left;
  width: 49%;
  margin-bottom: 40px;
}
#technologe .technologe-left h1{
  color: rgb(17,70,108);
  font-size: 35px;
}
#technologe .technologe-left h2{
  border-bottom: 2px solid rgb(17,70,108);
  color: rgb(17,70,108);
  font-size: 35px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
#technologe .technologe-left img{
  margin: 20px 0px 0px 20px;
  float: right;
}
#technologe .technologe-left p{
  color: rgb(188,188,188);
}
#technologe .technologe-left p:first-of-type:first-letter{
  font-size: 80px;
  color: rgb(245,227,40);
  float: left;
  margin-right: 10px;
  margin-top: -15px;
}
#technologe .technologe-left .yellowLetter{
  font-size: 70px;
  color: rgb(245,227,40);
  font-style: italic;
  margin-right: 40px;
}
#technologe .technologe-right{
  float: right;
  width: 49%;
}
#technologe .technologe-right .technologe-top img{
  width: 100%;
}
#technologe .technologe-right .technologe-top{
  position: relative;
}
#technologe .technologe-right .technologe-top .shadow-img{
  position: absolute;
  padding: 10px 0;
  bottom: 3px;
  width: 100%;
  background-color: rgba(0,0,0,0.4);
}
#technologe .technologe-right .technologe-top .shadow-img h2{
  position: relative;
  padding: 4px 0;
  padding-left: 20px;
  margin-left: 30px;
  color: white;
  font-size: 25px;
  border-left: 3px solid rgb(144,177,106);
}
#technologe .technologe-right .technologe-top .shadow-img span{
  color: rgb(144,177,106);
  font-size: 14px;
  font-style: italic;
}
#technologe .technologe-right .technologe-bottom{
  background-color: rgb(238,238,214);
  padding: 20px;
  margin-top: 30px;
  padding-top: 40px;
  padding-bottom: 0;
}
#technologe .technologe-right .technologe-bottom li{
  line-height: 40px;
}
#technologe .technologe-right .technologe-bottom .data-left{
  float: left;
  width: 60%;
  padding: 40px 0;
  background-color: rgb(214,93,93);
  margin-left: -20px;
}
#technologe .technologe-right .technologe-bottom .data-left h2{
  font-size: 100px;
  display: inline-block;
  color: white;
}
#technologe .technologe-right .technologe-bottom .data-left .detail{
  width: 180px;
  display: inline-block;
  color: white;
  border-left: 2px solid white;
  padding-left: 10px;
}
#technologe .technologe-right .technologe-bottom .data-right{
  float: right;
  width: 40%;
}
#technologe .technologe-right .technologe-bottom .data-right p{
  text-indent: 4em;
  position: relative;
}
#technologe .technologe-right .technologe-bottom .data-right span:first-of-type{
  position: absolute;
    left: -127px;
    top: -27px;
    color: rgb(214,93,93);
    font-size: 100px;
}
#technologe .technologe-right .technologe-bottom .data-right span:last-of-type{
  position: absolute;
    left: 65px;
    top: 82px;
    color: rgb(214,93,93);
    font-size: 100px;
}
/*尾部部分样式--------------------------*/
footer{
  color: rgb(214,93,93);
  font-size: 14px;
  text-align: right;
  padding-bottom: 40px;
}

实现常见的技术产品官网的页面架构及样式布局

任务目的

通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力

学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变