当前位置:主页 > 热门技术 >

CSS实现列表圆角效果[兼容ie/firefox]

作者:918Õ发表时间:2019-01-03

  帮客之家(ag8亚游集团www.Bkjia.com)教程 CSS列表圆角,在四个角使用了图片,使用图片的好处是兼容性好,在火狐、IE下均有良好表现,而且代码也很少,学习CSS的朋友不妨把本代码作为一个实例来学习,了解用CSs布局图片的核心。

<!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>CSS实现列表圆角</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(http://www.bkjia.com/uploads/userup/1/0910/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao dt{background:transparent url(http://www.bkjia.com/uploads/userup/1/0910/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(http://www.bkjia.com/uploads/userup/1/0910/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao p{padding: .8em;}
.yuanjiao p.last{background:transparent url(http://www.bkjia.com/uploads/userup/1/0910/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列表圆角</dt>
<dd>
<p class="last">帮客之家(<a href="http://www.bkjia.com/" _fcksavedurl="http://www.bkjia.com/">Bkjia.Com</a>)提供互联网资讯与教程,是站长、程序员、网页设计师等交流与学习的网络平台,烈火一直坚持为互联网的发展提供动力,热情、积极、向上、不断进取是Liehuo.Net的座右铭,关注站长,建设互联网!</p>
</dd>
</dl>
</body>
</html><br /><center>帮客之家更多教程,请访问:<a href=http://www.bkjia.com/ target=_blank _fcksavedurl="http://www.bkjia.com/ target=_blank">http://www.bkjia.com/</a></center>

提示:可修改后代码再运行!

http://www.bkjia.com/HTML_CSS/366133.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/366133.htmlTechArticle烈火网(LieHuo.Net)教程 CSS列表圆角,在四个角使用了图片,使用图片的好处是兼容性好,在火狐、IE下均有良好表现,而且代码也很少,学习...

本文源自: 环亚娱乐

下一篇:没有了 上一篇:XML的基础知识
热门技术
联系我们