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

上机任务：创建CSS布局页面【任务环境】：完成任务的机器需要安装如下软件：Windowsxp操作系统，Dreamweaver8.0，Ie7.0浏览器/Firefox浏览器【操作流程规范】：一、创建站点，然后创建页面index.html。在index.html页面中编写第一个div与css。xhtml结构：divid=header此处显示idheader的内容/divCSS代码：#header{color:#FFFFFF;background-color:#666666;height:100px;width:700px;overflow:hidden;}#headerh1{font-size:20px;margin-left:20px;margin-top:20px;display:block;}图：二、通过Dreamweaver8的可视化操作来完成二栏式布局。XHTML结构：divid=layoutdivid=left/divdivid=right……/div/divCSS代码：#layout{width:700px;}#layout#left{background-color:#8dad1f;float:left;width:150px;}#layout#right{padding:10px;float:left;width:530px;}图：三、设计列表XHTML结构：divid=layoutdivid=leftulid=titlelistliIE捉迷藏/liliUL的不同表现/liliIE3px问题/lili高度不适应/liliIE断头台问题/li/ul/divdivid=right……CSS代码：#layout#left#titlelist{margin:0px;padding:0px;list-style-type:none;}#layout#left#titlelistli{color:#FFFFFF;padding-top:5px;padding-bottom:5px;padding-left:10px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#a3c431;}图：四、创建导航XHTML代码：divid=headerh1IE捉秘藏问题/h1ulid=navliahref=#首页/a/liliahref=#CSS入门/a/liliahref=#id=currentCSS高级技巧/a/liliahref=#CSShack/a/li/ul/divdivid=layoutdivid=left……CSS代码：#header#navli{float:left;list-style-type:none;}#header#nava{display:block;background-color:#999999;color:#FFFFFF;padding:5px;margin-left:3px;text-decoration:none;}#header#nava:hover{background-color:#787878;}#header#nav#current{color:#666666;background-color:#FFFFFF;}#header#nav{margin-left:400px;margin-top:36px;}图：五、编写与应用cssXHTML结构：divid=rightp捉迷藏问题(spanclass=strongTextPeekabooBug/span)是IE浏览器中的一个非常典型的对CSS的支持上的bug，说他是bug毫不为过，捉迷藏问题主要出现在IE6浏览器，当div应用稍显复杂的时候，常常出现的情况是在用于版式布局的时候，有时候当我们制作一个左右二栏的网页，而每个栏中又有一些链接、div等，这个时候容易引发捉迷藏问题，如本例中的代码：/p……CSS代码：.strongText{color:#996600;background-color:#FFFF99;font-weight:bold;}图：六、css代码测试IE浏览器：Firefox浏览器：