建站动态:乐数码共分享文章教程6 篇,网站模板0 套,网站源码0份!你还可以: 免费投稿

psd切图转换为div+css格式

综合其他     次浏览 0看法

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代码:

  1. <div id="header">div> 
  2. <div id="nav">div> 
  3. <div id="banner">div> 
  4. <div id="main">div> 
  5. <div id="footer">div> 

通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中.
  1. #header,#nav,#banner,#main,#footer
  2.          margin:0px auto
  3.          width:950px; } 
第四步:先完成header头部部分
LOGO:一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的?所以我们采用了如下HTML代码:
  1. <h1><a href=#>  

那么CSS编码该如何实现呢?
大家可以可以先想一下。然后在看我下边写CSS代码的,其实这个地方采用的是CSS以图换字技巧。CSS代码如下
  1. #header h1 a{ 
  2. background:url(image/logo.jpg); 
  3. width:476px; 
  4. height:102px; 
  5. display:block; 
  6. text-indent:-9999px; 
好。现在我们接着完成头部右侧部分,还是先进行HTML 代码的编写
  1. <ul> 
  2. <li><a href=" #">css切图培训a>li> 
  3. <br /> 
  4. <li><a href=" #">设为首页a>li> 
  5. <br /> 
  6. <li><a href=" #">加入收藏a>li> 
  7. <br /> 
  8. ul>
CSS代码:
  1. #header h1
  2. float:left

我们首先让H1左浮动。这样右侧UL部分就可以在同行显示了。
  1. #header ul{ 
  2. float:left
  3. padding:50px 0px 0px 200px
  4. list-style:none
为了避免问题,可以让UL也浮动。大家可以试一下,如果不设置浮动在IE各版本,火狐中表现的是否一致
  1. #header ul li{ 
  2. float:left
  3. padding:0px 10px
上边代码在火狐和IE8中没有问题,但是在IE6中会出现问题。我们会在后面进行讲解。
  1. #header ul li a{ 
  2. color:#555
  3. text-decoration:none
  4. font-size:13px
  5. #header ul li a:hover{ 
  6. color:#000
  7. text-decoration:underline
这时候的结果如下显示:

psd切图转换为div+css格式

 

转载请注明:乐数码_提供虚拟主机、云主机、域名注册服务,关注网站设计、网页设计、建站教程及建站资源 » psd切图转换为div+css格式