前端页面还原 photoshop+CSS+html(一)

一、根据设计图还原Html页面

使用photo shop做出来的设计图，进行Html页面还原步骤。
原图：

二、还原步骤

1.根据设计图进行页面结构的划分

1. 根据设计图可将页面划分为三个大部分，header ,main, footer.
2. 然后进行header区域结构的细划分，根据背景色的不同可将header区域划分为header_top和header_bot部分。精确像素使用ps 切片工具。
3. header_top可以划分出logo 和nav部分。

header_top代码 css 样式

.header{
   
   		width: 100%;
   		height: 491px;
   	}
   	.header_top{
   
   		width: 100%;
   		height: 142px;
   		background-color: black;
   	}
   	.header_top .inner {
   
   		width: 994px;
   		height: 142px;
   		/* 水平居中显示 */
   		margin: 0 auto;
   		
   	}
   	.header_top .inner .logo{
   
   		width: 454px;
   		height: 142px;
   		float: left;
   	}
   	.header_top .inner .logo h1{
   
   		width: 454px;
   		height: 142px;
   		/* background-image 具有平铺属性 */
   		background-image: url(images/logo_02.png);
   	}
   	
   	/* logo 需要使用h1 和a 标签 */
   	.header_top .inner .logo h1 a{
   
   		width: 454px;
   		height: 142px;
   		/* display: block; 使行元素具有块元素属性 */
   		display: block;
   		/* text-indent: ; 首行缩进  隐藏文字 */
   		text-indent: -1000px;
   	}
   	.header_top .inner .nav{
   
   		width: 488px;
   		height: 142px;
   		float: right;
   	}
   	.header_top .inner .nav ul li{
   
   		list-style: none;
   		/* 行高等于容器高度 文字就可以垂直居中 */
   		height