预览一下效果吧，是不是整体效果出来了，下边就需要定义里边各个部分了。
先看下产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片，但这样麻烦一点， 每个都需要设置，而且还得定位，有个更简便的方法是定义ul的背景图片，因为在切图标时，每个图标之间的间距是按照效果图的间距来切的。
<div class="side_box">
<h2><strong>产品</strong>导购</h2>
<div class="side_con product">
<ul>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li class="product3"><strong>语音业务：</strong><a 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根据需要自己定义的名称，一般用 能表达这块内容意思的简洁英文来表示，或者用拼音。有关样式命名上请参考：http://www.aa25.cn/web_w3c/248.shtml。“产品导购”的样式定义如下：
.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-bottom:1px dashed #dcdcdc; color:#777;}
.product ul li strong { display:block; height:24px; color:#333;}
.product ul li a { color:#777;}
.product ul li a:hover { text-decoration:underline;}
.product ul li.product3 { border-bottom:none;}
“产品导购”完成后，下边该“使用问答”了。“使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。所以这部分采用dl、dt、dd的形式来完成。
<div class="side_con ask">
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
</div>.ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}
.ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}
.ask dl dt a { color:#666;}
.ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}
“使用问答”完成后，侧边栏就剩下“联系我们”了，这个更简单，直接插入图片就行了，然后调整一下位置就可以了。
<div class="side_box">
<h2><strong>联系</strong>我们</h2>
