扁平化风格博客源码

        今天下午，学习了扁平化风格博客，在学习过程中，增加了一些知识储量。
    在HTML中引入CSS文件有两种：
    ①http://cdn.staticfile.org/normalize/3.0.1/normalize.min.css（引自其它网站）   这个是重置样式，就是不管你外表原来如何，全部回炉重造。
    ②https://necolas.github.io/normalize.css/3.0.2/normalize.css（引自其它网站）  这个是常规化样式，稍微保留你的外形，在进行改造。

    以下是编辑扁平化风格博客的源码，图片可以从我的个人相册—扁平化风格博客用图中下载。

	
	
	  
	
	


    

    

        

        
菇凉你好
          

            
首页
            
链接2
            
链接3
            
链接4
          
        
        

           

              
菇凉你好
              
愿你明媚如光如夏日午后的光，温厚却蕴藏着巨大的能量。
              Look Me
              

                 更多
              
           
        
    

    

      

         

            

               
少年
               

               
鲜衣怒马正当时 踏遍长安纵风流
            
            

               item1
               item2
               item3
            
         
      
      

         

            

                
            
            

                
公子
                
桃花夭夭不及你白衫
                
陌上花开  可缓缓归矣
            
         
         

            

                
公子
                
桃花夭夭不及你白衫
                
陌上花开  可缓缓归矣
            
            

                
            
         
         

            

                
            
            

                
公子
                
桃花夭夭不及你白衫
                
陌上花开  可缓缓归矣
            
         
      
      

      

       

         
是你
         

         

            月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
      
      

         

             
标题3
             
月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
         

             
标题3
             
月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
         

             
标题3
             
月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
         

             
标题3
             
月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
         

             
标题3
             
月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
         

             
标题3
             
月下独酌是你，深宫戏耍是你，遍寻知己是你，最恨那负心负知己也是你。
         
      
     
      
    

    

      

         
item1
         
item2
         
item3
         
item4
         
item5
      
      

         © 静夜思 -2060
      
    

    

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

ul{
	margin:0;
}

header{
	background: rgba(0,0,0,0.4);
}

nav{
	background: transparent;
	height: 50px;
}

#banner{
	background: rgba(0,0,0,0.1);
	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: #089DB0;
	color:#eee;
	padding: 10px 30px;
}

#banner button{
	padding: 14px 40px;
}

#banner .inner .more{
	margin-top: 280px;
}

.sub-heading{
	line-height: 30px;
	margin: 30px 0;
}

.logo{
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
}

.logo a{
	color: #fff;
	text-decoration:none;
	margin-left: 20px;
}

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

h2{
	font-size: 30px;
}

h3{
	font-size: 24px;
}

p{
	font-size: 18px;
	letter-spacing: 1px;
	color: #fff;
}

.hr{
	width: 100%;
	height: 2px; 
	margin: 20 auto;
	background: #1C727D;
}

.sub-heading{
	font-size: 18px;
}

#main-btn{
	padding: 14px 28px;
	font-size: 20px;
	letter-spacing: 4px;
	border-radius: 6px;
	background: #18a;
}

.green-section{
	background: #089DB0;
	color: #fff;
	text-align:center;
	padding: 100px 0;
}

.green-section .hr{
	background: #1C727D;
	width: 100%;
}

.green-section .icon-group .icon{
	display: inline-block;
	width: 80px;
	height: 80px;
	background: #0D6F7C;
	transform: rotate(45deg);
	margin: 20px;
}

.icon-group{
	margin-top: 60px;
}

.wrapper{
	max-width: 1080px;
	margin: 0 auto;
}

.gray-section{
	background: #252F34;
	color: #fff;
}

.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,255,255,0.05);
}

.article-preview:after{
	content: '';
	display: block;
	clear: both;
}

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

.text-section h2{
	margin-bottom: 20px;
}

.text-section .sub-heading{
	font-size: 22px;
}

.text-section p{
	font-size: 18px;
	letter-spacing: 1px;
}

.text-section > *{
	max-width: 90%;
}

.purple-section{
	padding: 80px;
	background:#262149;
	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;
	/*border:1px solid #fff;*/
}

.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-bottom: 20px;
}

.main-wrapper{
	background: #444 url(img/banner.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}