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

1、精选文档上机任务：创建CSS布局页面【任务环境】： 完成任务的机器需要安装如下软件： Windows xp操作系统， Dreamweaver 8.0， Ie 7.0扫瞄器/Firefox 扫瞄器【操作流程规范】：一、 创建站点，然后创建页面index.html。在index.html页面中编写第一个div与css。xhtml结构：<div id="header">此处显示 id "header" 的内容</div>CSS代码：#header color: #FFFFFF;background-color: #666666;heig

2、ht: 100px;width: 700px;overflow: hidden;#header h1 font-size: 20px;margin-left: 20px;margin-top: 20px;display: block;图：二、 通过Dreamweaver 8的可视化操作来完成二栏式布局。XHTML结构：<div id="layout"> <div id="left"> </div> <div id="right"> </div></div>CSS代

3、码：#layout width: 700px;#layout #left background-color: #8dad1f;float: left;width: 150px;#layout #right padding: 10px;float: left;width: 530px;图：三、 设计列表XHTML结构：<div id="layout"> <div id="left"> <ul id="titlelist"> <li>IE捉迷藏 </li> <li>

4、UL的不同表现</li> <li> IE 3px问题 </li> <li> 高度不适应 </li> <li> IE断头台问题 </li> </ul> </div> <div id="right">CSS代码：#layout #left #titlelist margin: 0px;padding: 0px;list-style-type: none;#layout #left #titlelist li color: #FFFFFF;padding-top

5、: 5px;padding-bottom: 5px;padding-left: 10px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #a3c431;图：四、 创建导航XHTML代码：<div id="header"> <h1>IE捉秘藏问题</h1> <ul id="nav"> <li><a href="#">首页</a></li> &l

6、t;li><a href="#">CSS入门</a></li> <li><a href="#" id="current">CSS高级技巧</a></li> <li><a href="#">CSS hack</a></li> </ul></div><div id="layout"> <div id="left&

7、quot;>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;#h

8、eader #nav margin-left: 400px;margin-top: 36px;图：五、 编写与应用cssXHTML结构：<div id="right"><p>捉迷藏问题(<span class="strongText">Peekaboo Bug</span>)是IE扫瞄器中的一个格外典型的对CSS的支持上的bug，说他是bug毫不为过，捉迷藏问题主要消灭在IE6扫瞄器，当div应用稍显简单的时候，经常消灭的状况是在用于版式布局的时候，有时候当我们制作一个左右二栏的网页，而每个栏中又有一些链接、div等，这个时候简洁引发捉迷藏问