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;

   url(p_w_picpath /li.jpg) no-repeat 40px 50%;

         }       

#main .subMenu ul li a:hover{

         color:#177cb7;

         url(p_w_picpath /li3.jpg) no-repeat 40px 50%;

         }

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

现在我们看看HTML代码：

<div class="news">

         <dl class="xuexiao">

             <h5>学校简介  <a href="#"><img src="p_w_picpath/more.jpg"/></a></h5>

        <dt><img src="p_w_picpath/223.jpg" alt="杰飞logo"/></dt>

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

    </dl>

    <dl class="xinwen">

             <h5>学校新闻<a href="#"><img src="p_w_picpath/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="p_w_picpath/more.jpg"/></a></h5>

<ul>

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

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

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

    <li><a href="#"><img src="p_w_picpath/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;

         url(p_w_picpath /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中有下面表现。所以通过下边代码解决一下：


PSD转div css网页切图示例

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

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