实战

	
		
		
		
	

	
		
		

			

				
			
			

				

					
首页
					
图片
					
视频
					
手记
				
			
		
		
		

			
			

				
			
			
			

				
My BEAUTIFUL LIFE
			
			

				LOOK MORE >
			
			
			

				

					

						
						
MICROBLOG
					
					

						
						
WECHAT
					
					

						
						
QQ
					
					

				
				

					"I want to give good things to record down,
					after the recall will be vary beautiful."
				
				

			
			
			

			
		
		
		


		
	

 

html.css

*{
	padding: 0;
	margin: 0;
}
.header{
	width: 100%;
	height: 100px;
}
.header .logo img{
	width: 300px;
	height: 85px;
	padding-left:60px ;
	padding-top: 8px;
}

.header .logo{
	float: left;
}
.header .nav{
	float: right;
}
.header .nav ul{
	padding-right: 30px;
}
.header .nav ul li{
	float: left;
	list-style: none;
	width: 60px;
	height: 100px;
	line-height: 90px;
	font-size: 15px;
	font-weight: bolder;
    color: #7D7D7D;
}
.main .top{
	width: 100%;
	height:600px ;
}
.main .top  img{
	width: 100%;
	height:600px ;
}
.main .tooplayer{
	position: absolute;
	top:100px;
	left: 0;
	background-color: #000;
	width: 100%;
	height: 600px;
	opacity: 0.5;
}

.main .tooplayer-top{
	position: absolute;
    width: 500px;
    height: 250px;
    top: 400px;
    margin-top: -30px;
    z-index: 2;
    right: 500px;
}
.main  .tooplayer .word{
	padding-top: 200px;
	color: white;
	font-size: 45px;
	font-weight: bolder;
    text-align: center;
    font-family: "微软雅黑";
}
.main .tooplayer-top button{
	width: 200px;
	height: 60px;
	margin-top: 50px;
	color: white;
	background-color: #F5704F;
    font-family: "微软雅黑";	
	text-align: center;
	font-weight: bolder;
    font-size: 14px;
    
    border-radius:8px ;
    margin-left: 150px; 
}
.main .middle{
	width: 1000px;
	margin: 0 auto;
}
.main .middle .m-top .m-top-weibo{
	float: left;
	width: 33.3%;
	padding-top: 50px;
	text-align: center;
}
.main .middle .m-top .m-top-weixin{
	float: left;
	width: 33.3%;
	padding-top: 50px;
	text-align: center;
}
.main .middle .m-top .m-top-qq{
	float: left;
	width: 33.3%;
	padding-top: 50px;
	text-align: center;
}
.main .middle .m-top .comm{
	font-size: 15px;
	color: #7D7C7F;
	font-weight:bold ;
	padding-top: 20px;
}
.main .middle .m-middle{
	font-size: 22px;
	color: #E19796;
	font-weight: bold;
	padding-top: 50px;
	font-style: italic;
}
.main .middle .m-top .clear{
	clear:both;
}