六、布局页面——侧边栏
主体部分涉及side和main两部分，的内容比较多，但都不难，本节教程没有增加什么新的知识点，学起来并不吃力。主体部分先从侧边栏说起，讲解如何切图时已经说过，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码
<div class="side_box">
<h2><strong>产品</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;}
