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

上机任务：创立CSS规划页面之青柳念文创作【任务环境】：达成任务的机器需要装置以下软件：Windowsxp操控系统，Dreamweaver，阅读器/Firefox阅读器【操控流程规范】：一、编写第一个div与css.xhtml布局：<divid="header">此处显示id"header"的内容</div>CSS代码：#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="layout"><divid="left"></div><divid="right"></div></div>CSS代码：#layout{width:700px;}#layout#left{background-color:#8dad1f;float:left;width:150px;}#layout#right{padding:10px;float:left;width:530px;}图：三、设计列表XHTML布局：<divid="layout"><divid="left"><ulid="titlelist"><li>IE捉迷藏</li><li>UL的分歧表示</li><li>IE3px问题</li><li>高度不适应</li><li>IE断头台问题</li></ul></div><divid="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="header"><h1>IE捉秘藏问题</h1><ulid="nav"><li><ahref="#">首页</a></li><li><ahref="#">CSS入门</a></li><li><ahref="#"id="current">CSS</a></li>

高级技巧<li><ahref="#">CSShack</a></li></ul></div><divid="layout"><divid="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="right"><p>捉迷藏问题(<spanclass="strongText">PeekabooBug</span>)是IE阅读器中的一个特别典型的对CSS的支持上的bug，说他是bug绝不为过，捉迷藏问题主要出此刻IE6阅读器，当div应用稍显复杂的时候，经常出现的状况是在用于版式规划的时候，有时当我们制作一个左右二栏的网页，而每一个栏中又有一些链接、div等，这个时候简单引起捉迷藏问题，如本例中的代码：</p>CSS代码：.str