通过以上几讲的学习，内含简单内容的容器设置和调用非常简单。如果是网站栏目处的设置就要复杂点，
一般栏目有标题、栏目内容，这时容器设计得比较完整。一个完整的容器要分别设置好标题区、内容区的的样式定义，
因为是属于一个容器的组成部分，在定义时前面的容器名就要保持一样，这样在模板中调用时就只要写一次容器名，标题、内容就
可省写为<dt>、<dd>了，一般还要外套一个<dl>。那一个完整的的容器调用是这样的：

<div id="z_box1">
<dl>
<dt>热门新闻</dt>
<dd>热门文章调用标签</dd>
</dl>
</div>

好，下面回到网站后台，把模板中的内容替换成下面的内容：

<div id="main">
<div id="main_left">
<div id="z_box1">
<dl>
<dt>热门新闻</dt>
<dd>热门文章调用标签</dd>
</dl>
</div>
<div id="z_box1">
<dl>
<dt>推荐新闻</dt>
<dd>推荐文章调用标签}</dd>
</dl>
</div>
</div>
<div id="main_right">
<div id="r_box1">
<dl>
<dt>新闻动态</dt>
<dd>{LB_新闻动态}</dd>
</dl>
</div>
<div id="r_box1">
<dl>
<dt>办事指南</dt>
<dd>{LB_办事指南}</dd>
</dl>
</div>
</div>
</div>
<div id="bot">{$GetManageLogin}</div>

保存模板，发布首页。编辑/images中style.css文件,添加以下各个容器的标题和内容的设置样式。

* /* 通用符全部声明,边距都暂为0 */
{
margin:0;
padding:0;
}
#main
{
margin-top:10px;
margin-left:10px;
width:600px;
background:#ff0;
}
#main_left
{
float:left;
width:200px;
}
#main_right
{
float:right;
width:396px;
}
#z_box1
{
margin-bottom:4px;
border:#ccc 1px solid
}
#z_box1 dt,#r_box1 dt
{
height:28px;
background:#ff6600;
font-weight:bold;
color:#fff;
text-align:center;
line-height:28px;
font-size:10pt;
}
#z_box1 dd,#r_box1 dd
{
height:100px;
background:#f9f9f9;
padding:10px;
}
#r_box1
{
background:#3AB1F5;
margin-bottom:4px;
border:#ccc 1px solid
}

说明：根据样式定义参数在上面的定义值可以继承给下面元素的道理，加上相同设置项的容器允许一起声明，
中间用逗号隔开，这样，很多定义项便可以省写。大家在编写容器参数时要尽可能地省写设定项。完成我效果图为：