css圆角之有序列表dl、无序列表ul如何实现？

文章类别：div+css布局 | 发表日期:2008-10-5 15:32:21

　　我们常可以看到许多列表或文章段落是圆角的。在传统的制作中，我们往往通过背景图片来营造出圆角的效果。运用div css进行网页布局，我们应该让编码更有语义，结构更加的简单，更重要的是可以适应宽度与高度的变化。有序列表dl、无序列表ul的圆角我们可以仅通过四个角的图片来实现。我们看下面的这一张图片：


　　我们将圆角的多出部分设置成“背景色”，这里的背景色指的是网页的背景色或此DL、UL容器的背景色。而内部的颜色是透明的，我们可以根据不同的需要进行颜色的设置，而根本不需要去修改这四个图片。

　　我们首先需要制作四张图片备用，这四张图片，分别是：topl.gif顶部的左侧；topr.gif顶部的右侧；botl.gif底部的左侧，botr.gif底部的右侧。这四张图片分别定义在不同的背景容器里，营造出了圆角的效果。

　　我们来看有序列表DL的实现方法，我们看下面的XHTML代码：


　　这是一个有序列表DL典型的代码，只是在DD标签中，我们另外加上了一个P标签。这便于我们进行四个角落的圆角背景的设置。
　　将顶部的左侧的背景定义在DL中；
　　将顶部的右侧的背景定义在DT中；
　　将底部的左侧的背景定义在DD中；
　　将底部的右侧的背景定义在DD的P中。

　　我们来看下面的CSS代码：


　　通过上面的CSS定义，我们就可以实现了DL有序列表的圆角布局的编写，我们再将代码细化一下，看看最终的运行效果：


　　我们根据上面的思路，可以很顺利的制作出UL无序列表的圆角样式。与上面不同的是，我们在最末一个列表项li定义底部右侧的圆角。

　　我们来看以下代码及其最终运行效果：


　　经过上面的学习，我们应该把握了圆角的一些用法，在其它容器里的应用，只需要灵活的编写与定义就可以了。

　　此文参考了forest的文章，在此表示感谢。

上一篇：{教程}一个无序列表UL鼠标激活显示背景色的实例 人气:4858
下一篇：{教程}使用fieldset、label标签制作form表单 人气:2554

div+css布局视频教程