又一种新的CSS垂直导航代码

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

<!--CSS文件内容为:-->

<style type="text/css">

#vertmenu {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100%;

width: 160px;

padding: 0px;

margin: 0px;

}

#vertmenu h1 {

display: block;

background-color:#FF9900;

font-size: 90%;

padding: 3px 0 5px 3px;

border: 1px solid #000000;

color: #333333;

margin: 0px;

width:159px;

}

#vertmenu ul {

list-style: none;

margin: 0px;

padding: 0px;

border: none;

}

#vertmenu ul li {

margin: 0px;

padding: 0px;

}

#vertmenu ul li a {

font-size: 80%;

display: block;

border-bottom: 1px dashed #C39C4E;

padding: 5px 0px 2px 4px;

text-decoration: none;

color: #666666;

width:160px;

}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {

color: #000000;

background-color: #eeeeee;

}

</style>

<div id="vertmenu">

<h1>导航文本</h1>

<ul>

<li><a href="#" tabindex="1">Home</a></li>

<li><a href="#" tabindex="2">About Us</a></li>

<li><a href="#" tabindex="3">Computing</a></li>

<li><a href="#" tabindex="4">Web Sites</a></li>

<li><a href="#" tabindex="5">Games</a></li>

<li><a href="#" tabindex="6">Links</a></li>

</ul>

</div>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航