html和css扁平化

html部分：

    
    
    
    
    



    

        

            
王小窝
                

                    
首页
                    
链接3
                    
链接4
                
        
        

            

                
王小窝
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam numquam in, qui. Ex, tempora velit dolor molestias rerum, ipsum praesentium. Excepturi, commodi. Accusantium praesentium provident, assumenda commodi odit, delectus facilis!
              
                了解我
                

                    更多
                
            
        
    



    

        

            

                

                    
标题
                    

                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum culpa rerum doloremque beatae, molestiae totam, ea atque rem corporis sed fuga nesciunt, impedit ab et, fugiat ipsa! Id, autem?
                
                

                items2
                    items2
                    items3
                
            
        
        

            

                

                    
又一个标题
                    
我是副标题
                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sunt praesentium, magni, architecto numquam nam id quis eaque quidem, adipisci porro hic beatae reprehenderit! Ab eum natus, similique in ut.
                
                

                    
                
            
            

                

                    
                
                

                    
又一个标题
                    
我是副标题
                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam, rem sed fugiat quia impedit reprehenderit dolorem voluptate aperiam alias harum saepe! Molestiae, repellendus! Magni mollitia neque, dicta similique amet.
                
            
            

                

                    
又一个标题
                    
我是副标题
                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis illum blanditiis possimus unde aperiam at praesentium sapiente, nemo iste? Placeat quidem libero similique architecto cupiditate dolorum expedita temporibus harum asperiores.
                
                

                    
                
            
        
        

            

                

                    
又一个标题
                    

                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tenetur corporis iste sit nesciunt reprehenderit sed neque recusandae ducimus, laudantium, assumenda totam architecto, blanditiis est veritatis aspernatur perferendis nulla qui.
                
                

                    

                        
标题
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fugiat repellendus, harum aliquam provident aut commodi. Nam, cumque veritatis magni sapiente earum! Excepturi necessitatibus soluta modi. Ut rerum eveniet veniam.
                    
                    

                        
标题
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ratione atque, dolores odio, eligendi totam eveniet quo minus fugiat obcaecati, labore delectus? Officiis vitae aliquid sequi culpa, sunt rem odio.
                    
                    

                        
标题
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic at, vitae veniam labore, quis fugit, sequi enim error tempora, nulla ipsam quae harum praesentium fuga tenetur tempore. Dolore, molestiae, repellat?
                    
                    

                        
标题
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti nobis perferendis nostrum. Natus molestiae magnam eligendi totam, aperiam fugiat earum quisquam ratione, tempore expedita aliquam sequi culpa delectus doloremque.
                    
                    

                        
标题
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ad consectetur voluptatem explicabo rerum perferendis quae alias, dicta tenetur. Quis, eius, voluptates. Incidunt molestiae saepe voluptates odio alias et quam.
                    
                    

                        
标题
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum dolorum at molestiae iure, quisquam officiis suscipit laudantium voluptatum inventore similique, consectetur nobis totam, dicta veritatis tenetur quasi expedita ad.
                    
                
            
        
    



    

        

            
item1
            
item2
            
item3
            
item4
            
item5
        
        

            © 王小窝 - 2017
        
    

css部分：

.clearfix:after { content: ''; display: block; clear: both; }


ul {
    margin: 0;
}
nav {
    background-color: transparent;
    height: 50px;
}
a {
    text-decoration: none;
}


header {
    background-color: rgba(0,0,0,0.4);
}
#banner {
    background-color: rgba(0,0,0,0.2);
    height: 700px;
}


nav ul {
    list-style: none;
    margin:0;
    float: right;
}
nav ul li,nav .logo {
    display: inline-block;
    line-height: 50px;
    margin-right: 20px;
}


nav ul li a {
    line-height: inherit;
    text-decoration: none;
    display: inline-block;
    height: inherit;
    color: #fff;
}


nav ul li.logo {
    float: left;
    padding: 10px;
}


#banner .inner {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top:160px;
}
#banner .inner h1{
    margin: 0;
}
button {
    border: none;
    background-color: #333;
    color: #eee;
    padding: 10px;
    border-radius: 5px;
}
#banner button {
    padding: 14px 60px;
}


#banner .inner .more {
    margin-top: 280px;
    color: #fff;
    font-size: 12px;
}


.sub-heading{
    line-height: 30px;
    margin: 30px 0;
    /*font-size: 18px;*/
}
.logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}


.logo a{
    color: #fff;
}


h1 {

    padding: 12px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}


h2{
    font-size: 30px;
}


h3 {
    font-size: 24px;
}


p {
    font-size: 18px;
    letter-spacing: 1px;
}
.hr{
    width: 100px;
    height: 2px;
    margin: 20px auto;
}
.green-section {
    background-color: #089DB0;
    text-align: center;
    color: #fff;
    padding: 100px 0;
}
.green-section .hr {
    background-color: #028e94;
    width: 60%;
}


.green-section .icon-grop .icon{
    display: inline-block;width: 80px;
    height: 80px;
    border: 1px solid #0D6F74;
    transform: rotate(45deg);
    margin: 20px;
}
.icon-grop {
    margin-top: 60px;
}
.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}


.gray-section {
    background-color: #252F34;
}
.gray-section .img-section{
    width: 45%;
}
.img-section img {
    width: 100%
}


.gray-section .text-section{
    width: 55%;
}
.article-preview > div {
    float: left;
    font-size: 0;
}


.article-preview:nth-child(odd){
    background-color:rgba(255,25,255,0.05);
}


.text-section{
   position: relative;
    top:68px;
    left:50px;
}


.text-section > * {
    max-width: 90%;
    color: #fff;
}
.text-section h2    {
    margin-bottom: 20px;
}


.text-section .sub-heading {
    font-size: 22px;
}
.text-section p {
    font-size: 18px;
    letter-spacing: 1px;
}
.purple-section {
    padding: 80px;
    background-color: #3F3965;
    color: #fff;
}
.purple-section .heading-wrapper {
    text-align: center;
}


.purple-section .hr {
    background: #373259;
    width: 60%;
}
.card{
    float: left;
    width: 50%;
    min-height: 300px;
    padding: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.card:first-child{
    background
: rgba(0,0,0,0.04);
}
.card:nth-child(2){
    background: rgba(0,0,0,0.08);
}
.card:nth-child(3){
    background: rgba(0,0,0,0.12);
}
.card:nth-child(4){
    background: rgba(0,0,0,0.16);
}
.card:nth-child(5){
    background: rgba(0,0,0,0.20);
}
.card:nth-child(6){
    background: rgba(0,0,0,0.24);
}
footer{
    background: #333;
    color: #fff;
    min-height: 200px;
    text-align: center;
}
ul.share-group {
    display: block;
    width: 1080px;
    margin: 0 auto;
    padding: 50px;
}
.share-group li {
    display: inline-block;
    padding: 10px;
}
.copy{
    padding: 20px;
}
.main-wrapper {
    background: #444 url(../img/banner.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
｝

浏览器默认设置reset.css，一开始我用的是它，但使用后h1的标题大小失效，有点暴力。用normalize.css还是比较温和的，如果前端了解很深的可以，自己写默认设置。

选择器：nth-child（）和nth-of-type（）选择器匹配属于其父元素的第n个元素，n可以是数字和关键字或公式。odd和even是比较常见的。

本人初学者，如有错误请勿怪。