文档介绍：工程5补充案例一“家居网”首页面制作
一、案例描述1、考核知识点
＞列表与超链接、2、练习目标
＞掌握无序列表、有序列表及定义列表。
＞掌握链接伪类。
3、需求分析
列表形式在网站设计中占有比拟大的比重，显示信息非常整齐直观，约设计师</h3>
<dl><dtximg src=Himages/picO7 .pngH/x/dt>
12
54
5556
5758
5960
6162
6364
6566
6768
6970
12
34
56
78
910
1112
1314
1516
1718
1920
2122
2324
25<dd〉李先生预约了酷番做设计< /dd>
<dd c1ass="1ast”>长春住宅空间 100 5F</dd> </dl> <dl>
<dtximg src=nimages/pic08 .pngn/x/dt>
<dd>李先生预约了一米阳光做设计</dd>
<dd c1ass="1ast”>北京住宅空间 90 平</dd> </dl> <dl><dtximg src=Himages/picO9 .pngn/x/dt>
<dd>李先生预约了旋风原创做设计</dd>
<dd class="1ast”>河北住宅空间 130 平</dd> </dl></li>
</ul>
</div>
(4)定义样式
，用于控制“内容”模块。具体如下:
・ content{width:980px;
margin:20px auto 40px; )
・ content h2{font-size: 20px;
margin-bottom: lOpx;
line-height: 50px; ) .content .pic{
padding:15px lOpx 0;
border-top: Ipx solid #ccc; overflow: hidden;
) .content .pic li{ float: left; margin:0 15px 15px 0;
)
.content .pic img{display: block;} .content .pic .not{margin:0;} .content .txt{width:980px;
padding-top:15px;border-top: Ipx solid #ccc;
overflow: hidden;13
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
50
)
.content .txt li{
float: left; width:280px; border:Ipx solid #ccc; padding:20px 17px; margin-right: 15px;
}.content .txt {margin:0;}
.content .txt li h3{font-size: 16px;}.content .txt li dl{ width:280px; height:66px; border-bottom: Ipx solid #ccc; padding-top: 20px;
).content .txt li dl dt{ float: left; margin-right: 15px;
).content .txt li dl .last{ font-size: 14px; line-height: 30px; color:#bbb;
)
在上述代码中，第13行和第25行代码均用于清除浮动，第19行代码用于清除图片下方的间隙问题。，刷新页面，效果如图5-10所示。
14
图5-10 “内容”模块效果图5、制作版权信息模块
(1) HTML结构分析“版权信息”模块由vdiv>标记定义。具体结构如图5-11所示。
关于我们।联至我们I意见建议।帮助中心।
免责声明：本网站局部内容由用户自行上传，如权利人发现存在误传］
<div>
及时与本站联系。
图5-11 “版权信息”模块结构图(2)样式分析
“版权信息”模块的背景图通栏显示，因此需设置最外层Vdiv>的宽度100%,且文字内容居中显示。
(3)搭建结构
“版权信息”模块的HTML结构代码。具体如下：
<!--footer begin--〉
<div clas