论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:35

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


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

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

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<dl>
<dt></dt>
<dd><p></p></dd>
</dl>

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

  我们来看下面的CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.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有序列表的圆角布局的编写,我们再将代码细化一下,看看最终的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

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

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

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

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

  此文参考了forest的文章,在此表示感谢。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058