单级导航菜单的实现

一、单级横向导航菜单的实现

<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">个人资料</a></li>
<li><a href="#">我的文章</a></li>
<li><a href="#">通讯录</a></li>
<li><a href="#">账户设置</a></li>
</ul>

#navli li{
border:1px solid;
float:left;//必要}

#nav li a{
text-decoration:none;
display:block;//必要
width:100px;
height:25px;
margin-left:2px;//左侧外边距分离导航项
text-align:center;
<span style="font-size:18px;"></span><pre name="code" class="css">color:#000000;//导航栏文字颜色
<pre name="code" class="css">

二、、单级纵向导航菜单的实现

<div id="nav">
<h1><a href="#">网站管理</h1>
<h1><a href="#">用户管理</h1>
<h1><a href="#">驾校管理</h1>
<h1><a href="#">考生管理</h1>
</div>

css:

#nav{
width:110px;
border-right:1px solid #333333;
border-bottom:1px solid #333333;
border-left:1px solid #333333;}

#nav a{
text-decoration:none;
color:#000000;}

#nav h1{
<h2><pre name="code" class="css"><span style="font-size:18px;">margin:0px;
padding:4px;
text-align:center;
font-size:16px;
font-weight:bold;
border-top:1px solid #333333;
background-color:#CCCCFF;
line-height:20px;}</span>