[div+css网页标准布局实例-.pptVIP

div class=clearfloat/div div id=maincontent div id=main此处显示 id main 的内容/div div id=side此处显示 id side 的内容/div /div div class=clearfloat/div div id=footer此处显示 id footer 的内容/div /div /body /html Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 六、布局页面——侧边栏 主体部分涉及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标准设计的一个准则。回过头来定义侧边栏的样式如下： Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. #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;} 预览一下效果吧，是不是整体效果出来了，下边就需要定义里边各个部分了。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 先看下产品导购部分，内容分为三部分，可以用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 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 细心的用户已发现，这里的class后跟了两个样式名称，说明一个元素是可以定义多个样式的，中间用空格分开。也可以把product样式定义在ul上。 说到可以定义多个样式，强调一点：许多人常常大量使用，如一个块元素需要设置边框，绿色文字和灰色背景所以就在css里定义： .border { borde