下面来学习容器崁套使用，制作出以下的显示效果。

此主题相关图片如下：

1、先根据效果来画一个设计图解，这可是做事的根据哟。
 
此主题相关图片如下：

2、进入网站后台，如果退出来了就点网站黄色容器下面的“管理登录”，我预先在网站模板中插入了这个登录后台的标签。
在模板中主体替换如下的内容：
<div id="main">
<div id="main_left">
<div id="z_box1">热门新闻</div>
<div id="z_box1">推荐新闻</div>
</div>
<div id="main_right">
<div id="r_box1">新闻动态</div>
<div id="r_box1">办事指南</div>
</div>
</div>
<div id="bot">{$GetManageLogin}</div>

3、保存模板，发布首页。
4、编辑/images中style.css文件,添加以下容器的设置样式。
#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
{
height:100px;
background:#f6f6f6;
margin-bottom:4px;
padding:10px;
border:#ccc 1px solid
}
#r_box1
{
height:100px;
background:#f6f6f6;
margin-bottom:4px;
padding:10px;
border:#ccc 1px solid
}

保存CSS文件，刷新网站前台看效果。其实，在制作过程中可以边编写边保存看网站变化的效果，不断地改变参数看网站变化的效果。如果达不到自己想要的效果，要么检查模板中的容器调用是否正确，要么是CSS文件的参数设置有问题。

[此贴子已经被作者于2006-12-2 14:22:03编辑过]