Copyright © 2006-2007 中国建站网. All Rights Reserved .
合作联系： QQ: 8856499 黔ICP备07001966号
css圆角之有序列表dl、无序列表ul如何实现？
我们常可以看到许多列表或文章段落是圆角的。在传统的制作中，我们往往通过背景图片来营造出圆角的效果。运用div+css进行网页布局，我们应该让编码更有语义，结构更加的简单，更重要的是可以适应宽度与高度的变化。有序列表dl、无序列表ul的圆角我们可以仅通过四个角的图片来实现。我们看下面的这一张图片：
我们将圆角的多出部分设置成“背景色”，这里的背景色指的是网页的背景色或此DL、UL容器的背景色。而内部的颜色是透明的，我们可以根据不同的需要进行颜色的设置，而根本不需要去修改这四个图片。
我们首先需要制作四张图片备用，这四张图片，分别是：topl.gif顶部的左侧；topr.gif顶部的右侧；botl.gif底部的左侧，botr.gif底部的右侧。这四张图片分别定义在不同的背景容器里，营造出了圆角的效果。
我们来看有序列表DL的实现方法，我们看下面的XHTML代码：
xml Example Source Code" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Example Source Code [www.136z.com]<dl>
<dt></dt>
<dd><p></p></dd>
</dl>
这是一个有序列表DL典型的代码，只是在DD标签中，我们另外加上了一个P标签。这便于我们进行四个角落的圆角背景的设置。
将顶部的左侧的背景定义在DL中；
将顶部的右侧的背景定义在DT中；
将底部的左侧的背景定义在DD中；
将底部的右侧的背景定义在DD的P中。
我们来看下面的CSS代码：
xml Example Source Code" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Example Source Code [www.136z.com].yuanjiao {background:#06c url(topl.gif) no-repeat; }
.yuanjiao dt{background:transparent url(topr.gif) 100% 0 no-repeat; }
.yuanjiao dd{background:#DCEAFC url(botl.gif) 0 100% no-repeat;}
.yuanjiao dd p{background:transparent url(botr.gif) 100% 100% no-repeat;}
通过上面的CSS定义，我们就可以实现了DL有序列表的圆角布局的编写，我们再将代码细化一下，看看最终的运行效果：
xml Source Code to Run" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Source Code to Run [www.136z.com]
我们根据上面的思路，可以很顺利的制作出UL无序列表的圆角样式。与上面不同的是，我们在最末一个列表项li定义底部右侧的圆角。
我们来看以下代码及其最终运行效果：
xml Source Code to Run" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Source Code to Run [www.136z.com]
经过上面的学习，我们应该掌握了圆角的一些用法，在其它容器里的应用，只需要灵活的编写与定义就可以了。
此文参考了forest的文章，在此表示感谢。
我们将圆角的多出部分设置成“背景色”，这里的背景色指的是网页的背景色或此DL、UL容器的背景色。而内部的颜色是透明的，我们可以根据不同的需要进行颜色的设置，而根本不需要去修改这四个图片。
我们首先需要制作四张图片备用，这四张图片，分别是：topl.gif顶部的左侧；topr.gif顶部的右侧；botl.gif底部的左侧，botr.gif底部的右侧。这四张图片分别定义在不同的背景容器里，营造出了圆角的效果。
我们来看有序列表DL的实现方法，我们看下面的XHTML代码：
xml Example Source Code" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Example Source Code [www.136z.com]<dl><dt></dt>
<dd><p></p></dd>
</dl>
这是一个有序列表DL典型的代码，只是在DD标签中，我们另外加上了一个P标签。这便于我们进行四个角落的圆角背景的设置。
将顶部的左侧的背景定义在DL中；
将顶部的右侧的背景定义在DT中；
将底部的左侧的背景定义在DD中；
将底部的右侧的背景定义在DD的P中。
我们来看下面的CSS代码：
xml Example Source Code" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Example Source Code [www.136z.com].yuanjiao {background:#06c url(topl.gif) no-repeat; }.yuanjiao dt{background:transparent url(topr.gif) 100% 0 no-repeat; }
.yuanjiao dd{background:#DCEAFC url(botl.gif) 0 100% no-repeat;}
.yuanjiao dd p{background:transparent url(botr.gif) 100% 100% no-repeat;}
通过上面的CSS定义，我们就可以实现了DL有序列表的圆角布局的编写，我们再将代码细化一下，看看最终的运行效果：
xml Source Code to Run" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Source Code to Run [www.136z.com]我们根据上面的思路，可以很顺利的制作出UL无序列表的圆角样式。与上面不同的是，我们在最末一个列表项li定义底部右侧的圆角。
我们来看以下代码及其最终运行效果：
xml Source Code to Run" onload="return imgzoom(this,550);" onclick="javascript:window.open(this.src);" style="cursor: pointer;"/> Source Code to Run [www.136z.com]经过上面的学习，我们应该掌握了圆角的一些用法，在其它容器里的应用，只需要灵活的编写与定义就可以了。
此文参考了forest的文章，在此表示感谢。
相关文章
广告赞助
网友评论
共有 0 位网友发表了评论,平均得分: 0 查看完整内容