您的位置：首页 > Web前端 > CSS

来自一个博客里的竖向CSS圆角导航菜单代码

2011-03-25 08:21 489 查看

代码简介：

纯CSS圆角导航条，博客里常见到这东西，很不错，色彩稳重，风格很耐看！这是用纯CSS实现的，因些兼容性比较好，而且圆角的实现方法也很独特，代码很少，如果认真研究一下，你也可以写出更多的圆角效果。

代码内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>来自一个博客里的竖向CSS圆角导航菜单代码_网页代码站(www.webdm.cn)</TITLE>
<style type="text/css">
div#BeautifulList{width:300px;margin:20px;font-family: Verdana;}
#BeautifulList a{display:block;color:#BBE1E7;padding:10px 15px;background-color:#3DA2B6;border-bottom:dotted

1px #A8D3DA;font-size:12px;text-decoration:none;}
#BeautifulList a:hover{color:#fff;background-color:#58AFC0; font-weight:bold; }
#BeautifulList h1{margin:0;font-weight:normal;color:#fff;padding:15px;font-size:14px;background-color:#238298}
#BeautifulFoot h2{color:white;margin:0; font-size:14px;padding:20px 10px;}

/*圆角控制*/
div.RoundedCorner{background: #3DA2B6}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #3DA2B6}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</HEAD>
<BODY>
<div id="BeautifulList">
<h1>欢迎光临网页代码站：</h1>
<a href="http://www.webdm.cn">网站首页</a>
<a href="/">最新更新</a>
<a href="/">下载排行</a>
<a href="/">源码分类</a>
<a href="/">广告联系</a>
<div id="BeautifulFoot" class="RoundedCorner">
<!-- <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> -->
<h2>Welcome to WebDm.CN</h2>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
</BODY>
</HTML>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/bc038e24-1f3f-43b5-ab63-466b1071e892.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航