2008-01-14
css圆角之有序列表dl、无序列表ul如何实现？
http://www.52css.com/article.asp?id=278
我们常可以看到许多列表或文章段落是圆角的。在传统的制作中，我们往往通过背景图片来营造出圆角的效果。运用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.52css.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.52css.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.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(attachments/month_0703/070304/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao dt{background:transparent url(attachments/month_0703/070304/topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}
.yuanjiao dd{background:#DCEAFC url(attachments/month_0703/070304/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao p{padding: .8em;}
.yuanjiao p.last{background:transparent url(attachments/month_0703/070304/botr.gif) 100% 100% no-repeat; line-height:22px; font-size: 12px;}
a {color:#06c;}
a:hover {color:#00f;}
</style>
</head>
<body>
<dl class="yuanjiao">
<dt>我爱CSS [www.52css.com] - 自定义列表圆角</dt>
<dd>
<p class="last">我爱CSS是专业介绍学习CSS的站点。设有<a href="http://www.52css.com/">教程专区</a>，<a href="http://www.52css.com/">CSS酷站欣赏</a>，<a href="http://www.52css.com/">CSS模板下载</a>等。我们的网址是：<a href="http://www.52css.com/">www.52css.com</a>。我们将不断的努力，使我们的内容更加全面，成为你工作学习的好助手！</p>
</dd>
</dl>
</body>
</html>
我们根据上面的思路，可以很顺利的制作出UL无序列表的圆角样式。与上面不同的是，我们在最末一个列表项li定义底部右侧的圆角。
我们来看以下代码及其最终运行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(attachments/month_0703/070304/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao h3 {background:transparent url(attachments/month_0703/070304/topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}
.yuanjiao ul {background:#DCEAFC url(attachments/month_0703/070304/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao li {padding: 0 .8em 0 0; line-height: 2em;margin-left: 2em; font-size: 12px;}
.yuanjiao li.last {background:transparent url(attachments/month_0703/070304/botr.gif) 100% 100% no-repeat; line-height:22px; font-size: 12px; padding-bottom:3px; }
.yuanjiao li a{color: #06c; text-decoration:none }
.yuanjiao li a:hover{color: #00f;}
</style>
</head>
<body>
<div class="yuanjiao">
<h3>我爱CSS [www.52css.com] - 无序列表圆角</h3>
<ul>
<li><a href="http://www.52css.com/article.asp?id=276">50 Beautiful CSS Web-Designs in 2006</a></li>
<li><a href="http://www.52css.com/article.asp?id=29">WEB2.0标准教程 循序渐进十二天的基础学习！ </a></li>
<li><a href="http://www.52css.com/article.asp?id=185">DIV CSS布局实例：用css网站布局之十步实录！（目录） </a></li>
<li><a href="http://www.52css.com/article.asp?id=201">Don't Make Me Think - 访客至上的网页设计秘笈 </a></li>
<li class="last"><a href="http://www.52css.com/article.asp?id=35">Div+CSS 网页布局 教程！</a></li>
</ul>
</div>
</body>
</html>
经过上面的学习，我们应该掌握了圆角的一些用法，在其它容器里的应用，只需要灵活的编写与定义就可以了。
此文参考了forest的文章，在此表示感谢。
我们常可以看到许多列表或文章段落是圆角的。在传统的制作中，我们往往通过背景图片来营造出圆角的效果。运用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.52css.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.52css.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.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(attachments/month_0703/070304/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao dt{background:transparent url(attachments/month_0703/070304/topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}
.yuanjiao dd{background:#DCEAFC url(attachments/month_0703/070304/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao p{padding: .8em;}
.yuanjiao p.last{background:transparent url(attachments/month_0703/070304/botr.gif) 100% 100% no-repeat; line-height:22px; font-size: 12px;}
a {color:#06c;}
a:hover {color:#00f;}
</style>
</head>
<body>
<dl class="yuanjiao">
<dt>我爱CSS [www.52css.com] - 自定义列表圆角</dt>
<dd>
<p class="last">我爱CSS是专业介绍学习CSS的站点。设有<a href="http://www.52css.com/">教程专区</a>，<a href="http://www.52css.com/">CSS酷站欣赏</a>，<a href="http://www.52css.com/">CSS模板下载</a>等。我们的网址是：<a href="http://www.52css.com/">www.52css.com</a>。我们将不断的努力，使我们的内容更加全面，成为你工作学习的好助手！</p>
</dd>
</dl>
</body>
</html>
我们根据上面的思路，可以很顺利的制作出UL无序列表的圆角样式。与上面不同的是，我们在最末一个列表项li定义底部右侧的圆角。
我们来看以下代码及其最终运行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(attachments/month_0703/070304/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao h3 {background:transparent url(attachments/month_0703/070304/topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}
.yuanjiao ul {background:#DCEAFC url(attachments/month_0703/070304/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao li {padding: 0 .8em 0 0; line-height: 2em;margin-left: 2em; font-size: 12px;}
.yuanjiao li.last {background:transparent url(attachments/month_0703/070304/botr.gif) 100% 100% no-repeat; line-height:22px; font-size: 12px; padding-bottom:3px; }
.yuanjiao li a{color: #06c; text-decoration:none }
.yuanjiao li a:hover{color: #00f;}
</style>
</head>
<body>
<div class="yuanjiao">
<h3>我爱CSS [www.52css.com] - 无序列表圆角</h3>
<ul>
<li><a href="http://www.52css.com/article.asp?id=276">50 Beautiful CSS Web-Designs in 2006</a></li>
<li><a href="http://www.52css.com/article.asp?id=29">WEB2.0标准教程 循序渐进十二天的基础学习！ </a></li>
<li><a href="http://www.52css.com/article.asp?id=185">DIV CSS布局实例：用css网站布局之十步实录！（目录） </a></li>
<li><a href="http://www.52css.com/article.asp?id=201">Don't Make Me Think - 访客至上的网页设计秘笈 </a></li>
<li class="last"><a href="http://www.52css.com/article.asp?id=35">Div+CSS 网页布局 教程！</a></li>
</ul>
</div>
</body>
</html>
经过上面的学习，我们应该掌握了圆角的一些用法，在其它容器里的应用，只需要灵活的编写与定义就可以了。
此文参考了forest的文章，在此表示感谢。
评论排行榜