第一个页面练习

页面css代码：

header{
background-color: rgba(0,0,0,0.4);
margin:0;
}
nav{
height:50px;
background:#696969;
}
nav ul{
list-style-type:none ;
margin:0;
float:right;

}
nav div a {
text-decoration: none;
color:#fff;
margin-left: 30px;
font-size:20px;
font-weight:bold ;

}
nav ul li,nav .logo{
display:inline-block;
line-height: 50px;
float:left ;
margin-right: 30px;
letter-spacing:1px ;

}
nav ul li a{
text-decoration: none;
line-height:inherit;
display: inline-block;
color:#fff;
margin:0;
}
nav ul li .active{
border-bottom: 1px solid #fff;
}
#banner{
background-color: rgba(0,0,0,0.2);
height:680px;
margin:0;
}
#banner .inner{
width:300px ;
text-align:center;
margin:0 auto;
position :relative;
top:160px;
color:#fff;
}
#banner .inner p{
font-size:18px;
letter-spacing: 1px;
line-height: 40px;
}
#banner .inner h1{
font-family:"Times New Roman", Times, serif;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
padding:10px 0;
}
#banner .inner button{
border:none;
padding:15px 45px;
background-color:#333;
color:#eee;
border-radius:5px;
}
#banner .inner .more{
margin-top: 220px;

}
nav ul li a:hover{
background-color: #0D6F7C;
}
nav .logo a:hover{
background-color:#089DB0;
}
#banner{
/*background-color:#f5f5dc;*/
/*background-image:url(img/fjtt.jpg);
background-repeat:no-repeat;
background-attachment:50% 80%;
background-size:cover;*/
background-image:url("../img/58d208f635753.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
/*background-position:50% 80%;*/
background-size:cover;
}
/*section class="green-section"开始*/
.content .green-section{
max-width: 1520px;
margin:0px auto;
background-color: #089DB0;
text-align: center;
padding:60px;
color:#fff;
}
.content .green-section div h1{
margin:0;
}
.content .green-section div .hr{
height:1px;
width:65%;
background-color: #078494;
margin:20px auto;
}
.content .green-section .icon-gourp .icon{
width:80px;
height:80px;
margin:40px;
display:inline-block;
background-color: #0D6F7C;
transform: rotate(45deg);
}
.content .green-section .icon-gourp .icon .wz{
margin:0 auto;
position:relative;
top:20px;
transform:rotate(-45deg);
padding:10px 5px;
font-size:15px;
}
.content .green-section .icon-gourp{
margin-top: 60px;
}


/*section class="grey-section"开始*/
.content .grey-section{
background-color: #252f34;
color:#fff;
max-width:1520px;
}
.grey-section .article-preview .img-section{
width:45%;
}
.grey-section .article-preview .img-section img{
width:100%;
}
.grey-section .article-preview .text-section{
width:55%;
}
.grey-section .article-preview>div{
float:left;
} 
/*.grey-section .article-preview .text-section>*{
width:90%;
text-align:center;
}*/


.clearfix:after{
content: '';
display: block;
clear: both;
}
.grey-section .article-preview .text-section{
position:relative;
top:60px;
left:40px;
}
/*.grey-section .article-preview .text-section .subhead{
line-height: 50px;
}*/
.text-section h2{
margin-bottom: 20px;
font-size: 20px;
}
.text-section .subhead{
letter-spacing: 1px;
}
.grey-section .article-preview .text-section p{

letter-spacing: 1px;
}
.grey-section .article-preview .text-section>*{
max-width: 90%;
}
.grey-section .article-preview:nth-child(odd){
background-color: rgba(255,255,255,0.05);
}


/*section class="purple-section"开始*/
.content .purple-section {
background-color:#3f3965;
color:#fff;
padding:80px;
max-width:1520px ;
}


.purple-section .wrapper .heading-wrapper {
margin:0 auto;
text-align: center;
}
.purple-section .wrapper .heading-wrapper .hr{
width:70%;
height:1px;
background-color:#302097 ;
margin:20px auto;
}


.purple-section .wrapper .card-group .card{
float:left;
width:50%;
min-height:300px;
padding:50px;
box-sizing: border-box;
}
.card-group .card:nth-child(1){
background-color: rgba(0,0,0,0.04);
}
.card-group .card:nth-child(2){
background-color: rgba(0,0,0,0.06);
}
.card-group .card:nth-child(3){
background-color: rgba(0,0,0,0.08);
}
.card-group .card:nth-child(4){
background-color: rgba(0,0,0,0.1);
}
.card-group .card:nth-child(5){
background-color: rgba(0,0,0,0.12);
}
.card-group .card:nth-child(6){
background-color: rgba(0,0,0,0.14);
}
/*footer开始*/
footer .over{
background-color: rgba(0,0,0,0.5);
margin:0 auto;
height:70px;

}
footer .over li{
list-style-type: none;
display: inline-block;
line-height: 70px;
}
footer .over li a{
text-decoration: none;
margin-left: 30px auto;
color:#fff;
}

页面HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>王冬冬的博客</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" href="css/ggddvc.css"/>
</head>
<body>
<div class="nr">
<!--头部开始-->
<header>
<div a href></div>
<!--导航栏开始-->
<nav>
<div class="logo"><a href="#">王冬冬</a></div>
<ul>

<li><a href="" class="active">首页</a></li>
<li><a href="">文章</a></li>
<li><a href="">关于我</a></li>
<li><a href="">约我</a></li>

</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>王冬冬</h1>
<p class="sub-heading">王冬冬同志是一位忠诚的共产主义战士。</p>
<!--<input type="button" value="了解我" />-->
<button>了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header>
<!--内容开始-->
<div class="content">
<section class="green-section">
<div>
<h1>我的故事</h1>
<div class="hr"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptate dolorem asperiores modi culpa minus a!<br/> A vero eos obcaecati porro impedit assumenda ipsam nesciunt! Eaque facere repudiandae ducimus itaque?
</p>
</div>
<div class="icon-gourp">
<div>
<div class="icon"><div class="wz">关于我</div></div>
<div class="icon"><div class="wz">约我</div></div>
<div class="icon"><div class="wz">包养我</div></div>
</div>
</div>
</section>
<section class="grey-section ">
<div class="article-preview clearfix">

<div class="text-section">
<h2>平凡的世界</h2>
<div class="subhead">这是一个平凡的世界</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime asperiores libero<br/> tenetur quae aperiam dicta deleniti maiores quas quis amet nobis modi reprehenderit id.<br/> Ducimus cum magnam illum veritatis ad.
</p>
</div>
<div class="img-section">
<img src="img/fjtt.jpg">
</div>
</div>

<div class="article-preview clearfix">
<div class="img-section">
<img src="img/fjtt2.jpg">
</div>
<div class="text-section">
<h2>平凡的世界</h2>
<div class="subhead">这是一个平凡的世界</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime asperiores libero<br/> tenetur quae aperiam dicta deleniti maiores quas quis amet nobis modi reprehenderit id.<br/> Ducimus cum magnam illum veritatis ad.
</p>
</div>
</div>
<div class="article-preview clearfix">
<div class="text-section">
<h2>平凡的世界</h2>
<div class="subhead">这是一个平凡的世界</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime asperiores libero<br/> tenetur quae aperiam dicta deleniti maiores quas quis amet nobis modi reprehenderit id.<br/> Ducimus cum magnam illum veritatis ad.
</p>
</div>
<div class="img-section">
<img src="img/fjtt3.jpg">
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>这里是标题</h2>
<div class="hr"></div>
<div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae corporis sequi illum eius veritatis labore ipsam.<br/> Quia molestiae autem quam nesciunt tenetur sit cum optio excepturi atque sint ea accusamus!
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>卡片1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>Laudantium delectus perspiciatis at consequuntur iusto aliquid<br/> saepe facilis.
</p>
</div>


<div class="card">
<h3>卡片2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>Laudantium delectus perspiciatis at consequuntur iusto aliquid<br/> saepe facilis.
</p>
</div>

<div class="card">
<h3>卡片3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>Laudantium delectus perspiciatis at consequuntur iusto aliquid<br/> saepe facilis.
</p>
</div>

<div class="card">
<h3>卡片4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>Laudantium delectus perspiciatis at consequuntur iusto aliquid<br/> saepe facilis.
</p>
</div>


<div class="card">
<h3>卡片5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>Laudantium delectus perspiciatis at consequuntur iusto aliquid<br/> saepe facilis.
</p>
</div>


<div class="card">
<h3>卡片6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>Laudantium delectus perspiciatis at consequuntur iusto aliquid<br/> saepe facilis.
</p>
</div>
   </div>
</div>
</section>
</div>

<!--页脚开始-->
<footer>
<ul class="over">
<center>
<li><a href="">首页</a></li>
<li><a href="">文章</a></li>
<li><a href="">关于我</a></li>
<li><a href="">约我</a></li>
<li><a href="">更多</a></li>
</center>
</ul>
</footer>
</div>
</body>
</html>