天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>CSS+DIV:超酷的竖排导航栏

CSS+DIV设计实例:超酷的竖排导航栏

天极网2006-05-29 16:56我要吐槽
HTML:
以下是引用片段:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS:
以下是引用片段:
#navcontainer { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer ul ul li { margin: 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}

#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}



ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

   查看效果

作者:龙犊整理责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级