3.2Div+CSS布局案例.ppt

四、页面顶部制作之二 保存预览一下，竖线已经出来了。 #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} 不过，菜单选项的文字却在顶部，我们再修改成以下代码： #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}#menu ul li a:hover{} 效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码： 最后的效果如下： ???????????????????????????????????????????????????????????????????? 四、页面顶部制作之二 index.htm 五、页面制作 这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。 首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在td/td中加入这么一段就可以了，你可以试试：div style=border-bottom:1px dashed #ccc/div 利用dashed、solid、dotted...等可以制作出许多效果来，实线、虚线、双线、阴影线等等。 五、页面制作 div id=banner/div 以上代码（index.htm）便可以实现设计草图中的banner #banner{ background: url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both ;/*清除浮动*/ } 在css.css中加入以下样式： 通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。 另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。 五、页面制作 div id=pagebody!--页面主体--?div id=sidebar!--侧边栏--?/div?div id=mainbody!--主体内容--?/div/div 以上是页面主体部分，我们在css中添加以下样式： #pagebody {?width:730px; /*设定宽度*/?margin:8px auto; /*居中*/}#sidebar {?width:160px; /*设定宽度*/?text-align:left; /*文字左对齐*/?float:left; /*浮动居左*/?clear:left; /*不允许左侧存在浮动*/?overflow:hidden; /*超出宽度部分隐藏*/}#mainbody {?width:567px;?text-align:left;?float:right; /*浮动居右*/?clear:right; /*不允许右侧存在浮动*/?overflow:hidden} border:1px solid #E00;height:200px 为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码 * * * * * 当在HTML中定义为id=divID时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class=divID时，则在CSS中对应的设置语法是.divID。 如果id=divID这个层中包括了一个img/img，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class=divID这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。 Div+CSS布局 步骤 一、页面结构设计 二、写入整体层结构与CSS 三、页面顶部制作之一 四、页面顶部制作之二 五、页面制作 一、页面结构设计 所有的设计第一步就是页面功能结构分析， 构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需