psd切图转换为div+css格式

当前位置 : 首页 > 网页制作 > 心得技巧 > psd切图转换为div+css格式

psd切图转换为div+css格式

来源:互联网 作者:脚本宝典 时间:2015-09-03 12:55
PSD转div css网页切图示例 第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的

PSD转div css网页切图示例

psd切图转换为div+css格式

第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了. 

复制代码

代码如下:


*{ 
margin:0px; 
padding:0px; 


第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕. 
这样的话,我们可以为body 添加背景图片.要让基在沿水平方向平铺即可. 

复制代码

代码如下:


body{ 
background:url(image/bj.jpg) repeat-x ; 

 
psd切图转换为div+css格式


第三步:通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的html代码 
HTML代码: 

复制代码

代码如下:


<div id="header"></div> 
<div id="nav"></div> 
<div id="banner"></div> 
<div id="main"></div> 
<div id="footer"></div> 


通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中. 

复制代码

代码如下:


#header,#nav,#banner,#main,#footer{ 
margin:0px auto; 
width:950px; 


第四步:先完成header头部部分 
LOGO:一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的?所以我们采用了如下HTML代码: 
<h1><a href="#">北京杰飞css网页切图</a></h1> 
那么CSS编码该如何实现呢? 
大家可以可以先想一下。然后在看我下边写CSS代码的,其实这个地方采用的是CSS以图换字技巧。CSS代码如下 

复制代码

代码如下:


#header h1 a{ 
background:url(image/logo.jpg); 
width:476px; 
height:102px; 
display:block; 
text-indent:-9999px; 


好。现在我们接着完成头部右侧部分,还是先进行HTML 代码的编写 

复制代码

代码如下:


<ul> 
<li><a href=" #">css切图培训</a></li> 
<li><a href=" #">设为首页</a></li> 
<li><a href=" #">加入收藏</a></li> 
</ul> 


CSS代码: 

复制代码

代码如下:


#header h1{ 
float:left; 


我们首先让H1左浮动。这样右侧UL部分就可以在同行显示了。 

复制代码

代码如下:


#header ul{ 
float:left; 
padding:50px 0px 0px 200px; 
list-style:none; 


为了避免问题,可以让UL也浮动。大家可以试一下,如果不设置浮动在IE各版本,火狐中表现的是否一致 

复制代码

代码如下:


#header ul li{ 
float:left; 
padding:0px 10px; 

上边代码在火狐和IE8中没有问题,但是在IE6中会出现问题。我们会在后面进行讲解。 
#header ul li a{ 
color:#555; 
text-decoration:none; 
font-size:13px; 

#header ul li a:hover{ 
color:#000; 
text-decoration:underline; 


这时候的结果如下显示: 

psd切图转换为div+css格式


第五步:完成导航效果,效果说明:鼠标放上背景变成浅蓝色,并且要制作当前页的效果。 
HTML代码: 

复制代码

代码如下:


<ul> 
<li><a href=" #">网站首页</a></li> 
<li><a href=" #">网站制作</a></li> 
<li><a href="#>网站制作</a></li> 
<li><a href="#”>office培训</a></li> 
<li><a href="#">平面设计就业</a></li> 
<li><a href="#">div css培训</a></li> 
<li><a href="#">联系我们</a></li> 
</ul> 


现在直接编写导航的代码会产生一个问题。如果学过盒模型与浮动的都应该知道. 
导航部分文字跑到header头部右侧了。怎么解决呢? 
其实就该我们万能的清除浮动起作用了 
CSS代码 

复制代码

代码如下:


.clear{ 
clear:both; 


这时候为我们<div id="nav"></div> 
变成了<div id="nav" class=” clear”></div> 
大家现在看一下,是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算,如果计算得当,不会出现这个问题。 
完成导航的CSS样式 

复制代码

代码如下:


#nav{ 
padding-top:3px; 

#nav ul{ 
list-style:none; 

#nav ul li{ 
float:left; 


默认li是占据整行显示的,所以通过左浮动.使其在一行显示。之后在设置A的状态,达到咱们想要的结果 试验下:让LI具备宽高,然后A设置背景,能不能达到咱们效果,A不让变成块 

复制代码

代码如下:


#nav ul li a{ 
display:block; 
width:135px; 
height:56px; 
line-height:56px; 
color:#fff; 
text-align:center; 
text-decoration:none; 
font-size:14px; 


display:block;让A元素变成块状,然后好为其设置宽高背景。这里面还有一个要点就是line-height:56px,同高度56px对应,可以实现什么效果呢。同学们想一下? 

复制代码

代码如下:


#nav ul li a:hover{ 
background:#177cb7; 


现在我们导航基本已经完成,但是还少了一个当前状态的导航效果。怎么办呢。 
其实很简单就是为当前所在页面的A链接添加一个ID为current的标记。如下: 

复制代码

代码如下:


<a href="#" id="current">网站首页</a> 


接着这个状态和鼠标悬停时是一致的,所以很简单,只需要在鼠标悬停状态后边在添加一个#nav ul li a#current选择符即可。你完成没
psd切图转换为div+css格式


第六步:产品宣传banner图片,公司网站的话一般会为一个动画或者是js/jquery的特效。目前咱们直接就放置一个图片 

复制代码

代码如下:


<img src="image/banner.jpg" height="184" src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg" width="127" /> 


右侧导航html代码: 

复制代码

代码如下:


<div class="subMenu"> 
<h5>培训课程</h5> 
<ul> 
<li><a href=" #">网站首页</a></li> 
<li><a href="# ">网站制作</a></li> 
<li><a href="# ">网站制作</a></li> 
<li><a href="# ">网站制作</a></li> 
<li><a href="# ">网站制作</a></li> 
<li><a href="# ">div css培训</a></li> 
<li><a href="# ">div css培训</a></li> 
<li><a href="#l">联系我们</a></li> 
</ul> 
</div> 


css代码: 下边这些代码在上边制作过程中都已经说过了。所以直接给出来了,不再讲解。 

复制代码

代码如下:


#main{ 
padding:10px 0px; 

#main .container{ 
width:674px; 
margin-right:50px; 
float:left; 

#main .subMenu{ 
width:226px; 
float:left; 
margin-bottom:10px; 

#main .subMenu h5{ 
background:#19577c; 
height:39px; 
text-align:center; 
color:#fff; 
font-size:15px; 
line-height:39px; 

#main .subMenu ul li{ 
border-bottom:1px solid #d4d4d4; 
background:#f1f1f1; 

#main .subMenu ul li a{ 
display:block; 
color:#000; 
height:36px; 
line-height:36px; 
text-decoration:none; 
padding-left:60px; 
background:url(image/li.jpg) no-repeat 40px 50%; 

#main .subMenu ul li a:hover{ 
color:#177cb7; 
background:url(image/li3.jpg) no-repeat 40px 50%; 


第八步:内容的主体区域编码:通过上边的效果的图片,大家可以先想一下HTML如何编写。我是使用的DLDD的方式,大家一定要学会这个标记的用法,很常用,叙述产品时经常性用到。 
现在我们看看HTML代码: 

复制代码

代码如下:


<div class="news"> 
<dl class="xuexiao"> 
<h5>学校简介 <a href="#"><img src="image/more.jpg"/></a></h5> 
<dt><img src="image/223.jpg" src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg" width="488" /> 
<!--[if IE 6]> 
<![endif]--> 


上边代码的意思是仅IE6可以识别。这样我们就可以单独为IE6编辑样式了。 

复制代码

代码如下:


<!--[if IE 6]> 
<style type"text/css"> 
#header ul li{ 
width:80px; 
float:left; 
padding:0px 10px; 


Header头部右侧加宽度值 

复制代码

代码如下:


#main .container dl dt img{ 
border:1px solid #ccc; 

#main .container dl.xuexiao dt{ 
float:left; 
width:110px; 

#main .container dl.xuexiao dd{ 
font-size:12px; 
margin-left:20px; 
float:right; 
width:145px; 
text-indent:2em; 

#footer{ 
margin-top:-10px; 

</style> 
<![endif]--> 


其中里面还涉及了一些别的知识。在后续课程会去讲解。


Tag:
网友评论

<