学习用CSS修饰一个类似Tab的标签样式

2020-01-27 14:20:34

字体：大中小

来源：转载

供稿：网友

用CSS美化修饰一个类似TAB标签的样式代码，经过您的完善修改和补充，它完全可以变成一个漂亮的导航菜单哦。本样式完全用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><title>纯CSS选项卡菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica;font-size:12px;}#nav{border-bottom:1px solid #ABE0F2;}#nav{height:27px;}*html #nav{height:26px;}*+html #nav{height:26px;}#nav ul{list-style:none;margin:0 10px;padding:0;position:absolute;}#nav ul li{margin-right:5px;float:left;}#nav ul li a{border:1px solid #ABE0F2;padding:5px 4px !important;padding:6px 10px 5px;display:block;text-decoration:none;background:#EEF7FF;color:#666;}#nav ul li a:hover{background:#FFF;border-bottom:1px solid #FFF;text-decoration:none;}#nav ul li.on a{background:#FFF;border-bottom:1px solid #FFF;}</style></head><body><div id="nav">  <ul>    <li><a href="#" title="做有质量的源代码网站">源码爱好者</a></li>    <li class="on"><a href="#" title="收集ASP、PHP、AJAX等精品源码下载">源码下载</a></li>    <li><a href="#" title="为软件开发商及IDC业务商提供高精准广告投放">广告合作</a></li>  </ul></div></body></html>

上一篇：鼠标经过背景变色的CSS代码

下一篇：CSS的blendtransp 淡入淡出应用代码

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注