PSD转div css网页切图示例

来源:北京杰飞电脑培训中心 时间:2013-04-16

第一步:先把把所有标记归置内外边距归置为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 ;

         }        

 

第三步:通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的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;

         }

这时候的结果如下显示:

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

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的状态,达到咱们想要的结果

#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选择符即可。你完成没

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

<img src="image/banner.jpg" alt="北京杰飞电脑培训" title="北京杰飞电脑培训"/>

必要的属性是alt必须加上。替换文本,当图片不能正常加载,还有就是为了优化。

小技巧:

因为多次用到UL。都需要添加默认圆点。所以在*里面写上list-style:none;.这样其它地方就不用写了。其实包含文字颜色大小等,如果很多地方也是一样。同样可以声明到*选择符里。

第七步:完成内容区域

思路:我们可以把内容区域划分为两部分:一部分是左侧导航,一部分为主要内容区域。这样我先为进行HTML编码:

<div class="container">

测试

</div>

现在我们先看一下右侧导航的结果图

右侧导航html代码:

<div class="subMenu">

<h5>培训课程</h5>

<ul>

          <li><a href=" #" id="current">网站首页</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="#l">div css培训</a></li>

     <li><a href="#l">div css培训</a></li>

     <li><a href="#">联系我们</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" alt="杰飞logo"/></dt>

        <dd>杰飞学校特色:实行家教式教学模式,小班教学的完美结合可随到随学,可预约上课,可完全根据学员实际情况教学,保证学会为止……</dd>

    </dl>

    <dl class="xinwen">

             <h5>学校新闻<a href="#"><img src="image/more.jpg"/></a></h5>

        <dd><a href="#">浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>

        <dd><a href="#">浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>

         <dd><a href="#">浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>

           <dd><a href="#">浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>

    </dl>

</div>

接着是最下边产品部分的HTML编码:

<div class="product clear">

<h5>精品课程<a href="#"><img src="image/more.jpg"/></a></h5>

<ul>

         <li><a href="#"><img src="image/css.gif"/></a></li>

    <li><a href="#"><img src="image/css.gif"/></a></li>

    <li><a href="#"><img src="image/css.gif"/></a></li>

    <li><a href="#"><img src="image/css.gif"/></a></li>

</ul>

</div>

现在开始完成CSS代码的编写:

首选是学校简介与新闻,其实仔细观察这两个也是两列布局,所以设定宽,并设置左浮动:

#main .container dl{

         width:300px;

         float:left;

         }

接着是栏目名称:因为这两个效果是一样的。所以直接使用群组选择符把两个都选择编写就可以了。

#main .container dl h5,#main .product h5{

         border-bottom:1px #000 solid;

         margin-bottom:15px;

         font-size:17px;

         }

 

#main .container dl h5 a{

    padding-left:170px;

         }

先完成左侧学校简介,让简介浮在图片右方:

#main .container dl dt{

         float:left;

         width:110px;

         }

#main .container dl dt img{

         border:1px solid #ccc;

         }

#main .container dl.xuexiao dd{

font-size:12px;

margin-left:25px;

float:left;

width:165px;

text-indent:2em;

         }

单独设置新闻的DD标记

#main .container dl.xinwen dd{

         height:22px;

         line-height:22px;

         background:url(image/li.jpg) no-repeat 0 50%;

         }       

#main .container dl.xinwen dd a{

         color:#000;

         text-decoration:none;

         padding-left:20px;

         }

#main .container dl.xinwen dd  span{

         padding-left:25px;

         }       

#main .container  dl.xuexiao{

         margin-right:40px;

         }

现在我们开始完成产品的CSS代码:

#main .product{

         padding-top:20px;

         }

让其距顶部空出一定距离。

#main .product h5 a{

         padding-left:510px;

         }

#main .product ul li{

         float:left;

         padding-left:10px;

         }

让LI进行左浮动即可。

最后一步:完成底部:

HTML代码:

<div id="footer" class="clear">

<p>联系我们:北京市石景山区皓月写字楼328室;联系电话:010-88685956;15910646335(陈老师)</p>

</div>

CSS代码:

#footer{

         background:#d1dce3;

         height:50px;

         line-height:50px;

         text-align:center;

         }

到此我们已经完成了一个页面的切图。

几个错误:头部标记在IE6中有下面表现。所以通过下边代码解决一下:

<!--[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]-->

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

来源:

相关文章

标签:

A5创业网 版权所有