创建CSS布局页面(上机实训任务).doc

上机任务：创建CSS布局页面【任务环境】： 完成任务的机器需要安装如下软件： Windows xp操作系统， Dreamweaver 8.0， Ie 7.0浏览器/Firefox 浏览器【操作流程规范】：一、 创建站点，然后创建页面index.html。在index.html页面中编写第一个div与css。xhtml结构：此处显示 id header 的内容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;图：二、 通过Dreamweaver 8的可视化操作来完成二栏式布局。XHTML结构： CSS代码：#layout width: 700px;#layout #left background-color: #8dad1f;float: left;width: 150px;#layout #right padding: 10px;float: left;width: 530px;图：三、 设计列表XHTML结构： IE捉迷藏 UL的不同表现 IE 3px问题 高度不适应 IE断头台问题 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;图：四、 创建导航XHTML代码： IE捉秘藏问题 首页 CSS入门 CSS高级技巧 CSS hack CSS代码：#header #nav li float: left;list-style-type: none;#header #nav a display: block;background-color: #999999;color: #FFFFFF;padding: 5px;margin-left: 3px;text-decoration: none;#header #nav a:hover background-color: #787878;#header #nav #current color: #666666;background-color: #FFFFFF;#header #nav margin-left: 400px;margin-top: 36px;图：五、 编写与应用cssXHTML结构：捉迷藏问题(Peekaboo Bug)是IE浏览器中的一个非常典型的对CSS的支持上的bug，说他是bug毫不为过，捉迷藏问题主要出现在IE6浏览器，当div应用稍显复杂的时候，常常出现的情况是在用于版式布局的时候，有时候当我们制作一个左右二栏的网页，而每个栏中又有一些链接、div等，这个时候容易引发捉迷藏问题，如本例中的代码：CSS代码：.strongText color: #996