单级导航菜单的实现

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

       用列表来实现网页中的导航菜单栏。

       html如下：

    <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>

           css如下：

#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">

background-color:#CCCCCC;//导航栏底色

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

html:

<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>