Dreamweaverdiv+css网页标准布局实例范例.ppt

div+css网页标准布局实例教程 六、布局页面——侧边栏 主体部分涉及side和main两部分，内容较多，但都不难，没有增加什么新的知识点，主体部分先从侧边栏说起，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码 div class=side_box h2strong产品/strong导购/h2 div class=side_con此处显示 class side_con 的内容/div /div 这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样可以省去很多没必要的定义，所以在页面布局当中一定要合理利用每一个标签。讲到这里，有必要说一下第一节教程中讲的为什么不能叫div+css而应该叫xhtml+css了，因为div只是xhtml中的一个标签，叫div+css会让许多朋友误认为遇到块级元素就得用div，造成了div的滥用，而合理利用每个标签，才是web标准设计的一个准则。回过头来定义侧边栏的样式如下： #side { float:right; width:228px;} .side_box { margin-bottom:8px;} .side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;} .side_box h2 strong { color:#f30;} .side_con { padding:10px; background:url(../images/side_bg.gif) 0 bottom no-repeat;} 预览一下效果吧，是不是整体效果出来了，下边就需要定义里边各个部分了。 先看下产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片，但这样麻烦一点，每个都需要设置，而且还得定位，有个更简便的方法是定义ul的背景图片，因为在切图标时，每个图标之间的间距是按照效果图的间距来切的。 div class=side_box h2strong产品/strong导购/h2 div class=side_con product ul listrong语音业务：/stronga href=#普通电话/a | a href=#语音数字中继/a/li listrong语音业务：/stronga href=#普通电话/a | a href=#语音数字中继/a/li li class=product3strong语音业务：/stronga href=#普通电话/a | a href=#语音数字中继/a/li /ul /div /div 细心的用户已发现，这里的class后跟了两个样式名称，说明一个元素是可以定义多个样式的，中间用空格分开。也可以把product样式定义在ul上。 说到可以定义多个样式，强调一点：许多人常常大量使用，如一个块元素需要设置边框，绿色文字和灰色背景所以就在css里定义： .border { border:1px solid #f60;} .color { color:#080;} .bg { background:#ccc;} 然后在块元素上增加： div class=border color bg此处显示新 Div 标签的内容/div 其实这是一个非常不好的写法，表面看似达到了代码重用性，但实际当中，当需要把其中一个元素的的边框改为2px，怎么改？如果把.border的边框改了，那么所有应用这一样式的元素都改了。如果再在代码中增加一个样式，那么又得去改html代码，和代码和结构分离的理念相违背了。一个好的代码布局，不管以后怎么改风格，只用改样式表，而不用去改html代码，这才真正做到两者分离了。 回到刚才的问题上，给第三个li定义了一个product3样式，然后在样式表中定义它的底部边框为无，因为前边定义li的底边框为1px的虚线，而最后一个不需要，所以单独定义个样式把它取消掉，这里的product根据需要自己定义的名称，一般用能表达这块内容意思的简洁英文来表示，或者用拼音。 产品导购”的样式定义如下： .product { padding:0px 10px;} .product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;} .product ul li { height:58px; padding:14px 0 0 64px; border-botto