>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
至上节教程为止，我们已经把主内容区左侧栏目的内容添加完毕了，本节我们来看一下右侧边栏的内容如何实现。之前我们为了更好的实现背景效果，把侧边栏划分成了两个模块，我们只在背景纵向平铺的sidecontent容器中添加内容。观察一下最终效果图中的侧边栏内容，依照一般的思维，我们会认为它里面有两个带有各自标题的列表：
当然这种思维是正确的，在之前的教程中我们也实现过结构类似的内容模块。但这次我们换个思路来考虑，这么规则的分行元素，我们是不是可以用一个列表来实现呢？看一下下面的结构：
- <ul id="menu">
- <li><h2>Categories</h2></li>
- <li>
- <ul>
- <li><a HREF="#">CSS入门系列教程</a></li>
- <li><a HREF="#">不可或缺的技巧</a></li>
- <li><a HREF="#">实例漫谈布局实战</a></li>
- </ul>
- </li>
- <li><h2>Blogroll</h2></li>
- <li>
- <ul>
- <li><a HREF="#">Rambling Soul</a></li>
- <li><a HREF="#">Open Designs</a></li>
- <li><a HREF="#">CSS Freebies</a></li>
- </ul>
- </li>
- </ul>
这里我们运用了列表嵌套，首先是一个ID为menu的无序列表，它包含四个列表项目，分别是两个H2标题和两个子级列表，几个文本链接则分别放置到子级列表的项目中。一下子难以理解的话，花点时间仔细看一下，相信很快就能摸出个头绪来。当然并不是说一定要这样做，只不过想告诉大家，有时候灵活的转换一下思路，很多相同的效果可以用不同的方法实现出来，这对学习和巩固CSS知识是很有帮助的。那么接下来我们就看一下，这种结构的内容元素，怎么利用CSS来调整它的外观样式。首先是去除父列表和子列表的项目修饰符号：
- #menu {list-style:none;}
- #menu li ul {list-style:none;}
然后是两个标题文本的样式：
- #menu h2 {
- border-bottom:solid 1px #D2E6CA;
- padding:5px;
- margin:10px 0px 0px 0px;
- font-family: Arial, Helvetica, sans-serif;
- font-size:18px;
- color:#690;
- font-weight:bold;
- }
主要是字体方面的样式定义，以及灰色的下边框。对于子级列表中的列表项，我们除了设置边框之外，还要定义一个高度值来获得比较舒适的行高：
- #menu li ul li {
- height:25px;
- border-bottom:solid 1px #efefef;
- }
然后是针对列表项中链接的样式定义：
- #menu li ul a {
- display:block;
- height:20px;
- padding:5px 5px 0px 5px;
- text-decoration:none;
- color:#333;
- }
- #menu li ul a:hover {
- background:#F8F9F2;
- color:#000;
- }
最后一个需要调整的地方就是menu列表的位置，现在它与页面中的一些内容元素以及侧边栏背景图重叠了，最主要是列表左侧边缘的位置，我们利用边界属性margin来设置一些间隔距离：
- #menu {
- ... ...
- margin:0 16px 0 24px;
- }
OK侧边栏的内容及其样式设定就差不多完成了，这节中关于CSS规则作用的解释稍微简略了一点，但是相信如果认真的学习了之前的教程内容，看懂也是很应该的事情哈哈。当然可以肯定的说，我这里的CSS样式定义并不是最简洁扼要的，更不是唯一的，或者说很多规则也可以用另外的CSS属性来替代，这就要靠大家多多练习多多摸索，从中总结、提炼出自己的经验和技巧了。
喜欢的就爱屋及乌 被雷了就诛连九族
欢迎您访问西米CC博客，本文被浏览了135次。若需要转载西米CC的原创文章，请接受如下的小小要求，所转载日志文章开端或者末尾做如下标识：
本文转载自：西米CC - http://ximicc.com
