客户需要一个网站地图，尝试了一下网站地图的样式修改。样式效果地址见：http://www.yaoyahu.com/Sitemap.html
在这个页面中，采用了同一个标签，对同一个标签使用的区块定义不同的CSS样式控制：
<div class="map">
标签
</div>
……
<div class="map2">
标签
</div>
这里不对包含选择符的定义进行阐述（关于如何利用包含选择符重复使用 CSS 定义的内容请参阅《圆角边框制作及其应用示例 》一文）。这里主要对左右式排列的网站地图的 CSS 定义作一下记录：
上图片中解析生成的HTML代码为：
<dl>
<dt><a href="/Category_7/index.aspx" title="" target="_blank">雁过留声</</dt>
<dd>
<ul>
</ul>
<div class="clear"></div>
</dd>
</dl>
<dl>dd>ul>a>dl>
<dt><a href="/yaoyuan/index.html" title="" target="_blank">姚源童画</a></dt>
<dd>
<ul>
<li><a href="/yaoyuan/Fairytales/index.html">童话与童画</a></li>
<li><a href="/yaoyuan/Words/index.html">童言无忌</a></li>
<li><a href="/Category_33/index.aspx">我家有儿初长成</a></li>
</ul>
<div class="clear"></div>
</dd>
</dl>
<dl>
<dt><a href="/Life/index.html" title="" target="_blank">人生陶吧</a></dt>
<dd>
<ul>
<li><a href="/Category_24/index.aspx">管理者</a></li>
<li><a href="/Life/SHOS/index.html">生活偶拾</a></li>
<li><a href="/Life/Studying/index.html">书山有路</a></li>
</ul>
<div class="clear"></div>
</dd>
</dl>
要实现上图的效果，要解决以下几个问题：
1、以 dl 为一个整体的单位由上而下排列，如何实现一级节点左侧下文的深灰色底线。
2、使位于 dt 下方的 dd 并列到 dt 的右侧。
3、要实现二级栏目下方浅色的灰线（定义 dd 的下边框值）与左侧深灰色底线对齐。
解决上面的问题也并不困难：
1、如果直接定义 dl 的下边框，按图所示比较短，如果要实现这么短的连线就要定义 dl 的宽度，则所有一级节点都会横向排列，则此不考虑这个方案。直接制作一个1px 高度的灰线图片，定义 dl 的背景图片，左居下不重复即可。由于不为 dl 定义宽度，则所有一级节点（及其里面的dt、dd）就为一个 Flow Model（流动模型）区块作为整体整体的单位由上而下排列（见下面.map dl 的定义内容）。
2、固定 dt、dd 的宽度，同时将 dd 向上缩进-25px、向左缩进110px（margin: -25px 0px 0px 110px; ）让开 dt 的宽度与高度，使位于 dt 下方的 dd 并列到 dt 的右侧。
3、定义 dd 的底边框（border-bottom: 1px solid #eee;），同时定义dl、ul 的 overflow 属性（overflow:hidden;height: 100%;），使其能随 dd 的内容自动延伸高度，实现实现二级栏目下方浅色的灰线与左侧 dl 的深灰色背景图片（底线）相对齐。
下面是 CSS 定义，可以进一步研究下：
/* ==网站地图样式1== */
.map {
font: normal normal normal 13px/24px Arial, "宋体", Helvetica, sans-serif;
margin: 20px 0px;
}
.map a {
color: #366E91;
}
.map dl, .map ul {
overflow:hidden;
height: 100%;
}
/* 一节节点整体 */
.map dl {
margin-top: 10px;
background: url(images/sm_line.gif) no-repeat left bottom;
display: block;
min-height: 24px;
}
/* 一节节点标题 */
.map dt {
padding-left: 20px;
height: 24px;
width: 100px;
background: url(images/sm_f.gif) no-repeat left top;
}
.map dt a {
color: #666;
}
/* 二节节点标题 */
.map dd {
margin: -25px 0px 0px 110px;
width: 160px;
border-bottom: 1px solid #eee;
display: block;
}
.map dd li {
padding-left: 20px;
line-height: 26px;
background: url(images/sm_p.gif) no-repeat left 2px;
display: block;
}
