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中有下面表现。所以通过下边代码解决一下:
<!--[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]-->
其中里面还涉及了一些别的知识。在后续课程会去讲解。
转载于:https://blog.51cto.com/jiefei/1179188