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

最新推荐文章于 2022-06-21 08:53:57 发布

大大大大大大。@

最新推荐文章于 2022-06-21 08:53:57 发布

阅读量832

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_43742704/article/details/125264739

本文介绍了如何使用Photoshop设计图还原HTML页面，详细阐述了从页面结构划分到CSS样式设定的过程。首先，根据设计图将页面分为header、main和footer三大部分，接着深入细化header区域，如header_top和header_bot，利用PS切片工具精确像素。在CSS应用中，用h1标签实现logo，通过行高和容器高度一致实现文字垂直居中，同时讲解了padding、margin和position属性的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

二、还原步骤

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

根据设计图可将页面划分为三个大部分，header ,main, footer.
然后进行header区域结构的细划分，根据背景色的不同可将header区域划分为header_top和header_bot部分。精确像素使用ps 切片工具。
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;
   		/* 行高