上机任务：创建 CSS 布局页面
【任务环境 】： 完成任务的机器需要安装如下软件： Windows xp 操
作系统， Dreamweaver 8.0 ， Ie 7.0 浏览器 /Firefox 浏览器
【操作流程规范 】：
一、 创建站点，然后创建页面 index.html 。在 index.html 页面中编
写第一个 div 与 css 。
xhtml 结构：
CSS代码：
#header {
color: #FFFFFF;
background-color: #666666;
height: 100px;
width: 700px;
overflow: hidden;
}
#header h1 {
font-size: 20px;
margin-left: 20px;
margin-top: 20px;
display: block;
1 / 11 下载文档可编辑
}
图：
二、 通过 Dreamweaver 8 的可视化操作来完成二栏式布局。
XHTML结构：
……
CSS代码：
#layout {
2 / 11 下载文档可编辑
width: 700px;
}
#layout #left {
background-color: #8dad1f;
float: left;
width: 150px;
}
#layout #right {
padding: 10px;
float: left;
width: 530px;
}
图：
3 / 11 下载文档可编辑
三、 设计列表
XHTML结构：
- IE 捉迷藏
- UL 的不同表现
- IE 3px 问题
- 高度不适应
- IE 断头台问题
4 / 11 下载文档可编辑
……
CSS代码：
#layout #left #titlelist {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#layout #left #titlelist li {
color: #FFFFFF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #a3c431;
}
图：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
