斜角的CSS导航条

2024-09-05 12:20:05

字体：大中小

来源：转载

供稿：网友

斜角风格的导航菜单，别看这么花，但实际只用了一张背景图片，只是用CSS控制图片的取用位置，这是个很值得学习的CSS菜单实例，对以后学习DIV布局肯定用得上。

<!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=utf-8" /><title>斜角的导航菜单</title><style>ul{margin:0 0 0 50px;font-size:12px;}.tab li{display:inline;}.tab a{background: url(/jscss/demoimg/200906/xbg.gif) no-repeat;}  .tab a:link,.tab a:visited{float:left;background-position:right -226px;text-decoration: none; margin-left:-20px; padding-right:30px;} .tab a:link span,.tab a:visited span{display:block;background: url(/jscss/demoimg/200906/xbg.gif) no-repeat left top;padding:5px 15px 2px 15px; color:#000}   .tab a:hover,.tab a:active{background-position:right -264px;} .tab a:hover span,.tab a:active span{background-position:left -38px;}  .tab .on a:link,.tab .on a:visited{background-position:right -302px;} .tab .on a span,.tab .on a:link span,.tab .on a:visited span{background: url(/jscss/demoimg/200906/xbg.gif) no-repeat left -77px;;color:#000; font-weight:bold}.big li{line-height:2.0; font-size:14px;}.info{ border:1px solid #FF9900; clear:both; font-size:12px; padding:10px;}</style></head><body>  <ul class="tab">    <li class="on"><span>首 页</span></li>    <li ><span>发布信息</span></li>    <li ><span>我的客齐集</span></li>    <li ><span>社 区</span></li>    <li ><span>帮 助</span></li> <div style="clear:both;"></div>  </ul> <br /><br />  <ul class="tab big">    <li class="on"><span>首 页</span></li>    <li ><span>发布信息</span></li>    <li ><span>我的客齐集</span></li>    <li ><span>社 区</span></li>    <li ><span>帮 助</span></li>  </ul>  <div class="info">一个注重资源质量的学习型源码下载站。</div></body></html>

上一篇：适合企业使用的导航菜单

下一篇：仿126邮箱精美滑动门

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注