博客里的竖向纯CSS圆角导航栏

2024-09-05 12:19:34

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE>圆角导航栏</TITLE>  <style type="text/css"> div#BeautifulList{width:180px;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>CSS圆角导航栏：</h1> 网站首页 最新更新 下载排行 源码分类 广告联系 <div id="BeautifulFoot" class="RoundedCorner">  <h2>感谢关注</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>

上一篇：符合标准的红色网页选项卡（简洁）

下一篇：CSS实现Windows风格的菜单按钮

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注