【步骤1】无样式

一、效果

二、HTML

    
            
    
        
     
home
        
     
about us
        
     
products
        
     
services
        
     
contact
    
    

 【步骤2】基本样式

一、效果

二、HTML

    
            
        
    
        
     
home
        
     
about us
        
     
products
        
     
services
        
     
contact
    
    

三、CSS

*{    margin:0;     padding:0;    }body{    font:11px Verdana, Geneva, sans-serif;     background:#666;    }ul{    list-style:none;    }

 【步骤3】横向导航条

一、效果

二、HTML

    
    
     
home
    
     
about us
    
     
products
    
     
services
    
     
contact
    

三、CSS

#nav

{

    margin-top: 50px;

    overflow: hidden;

    height: 1%;

    background: url(../images/nav-bg.png) repeat-x;

    text-transform: capitalize;

}

#nav li

{

    float: left;

    background: url(../images/line.gif) no-repeat center right;

    padding-right: 1px;

}

#nav li a

{

    display: block;

    height: 30px;

    line-height: 30px;

    padding: 0 20px;

    color: black;

    text-decoration: none;

}

#nav li a:hover

{

    background: url(../images/nav-bg.png) repeat-x left bottom;

    color: white;

}

【说明】

 margin-top: 50px;

    导航条与页面顶端距离50px;

overflow: hidden;

    内容会被修剪，并且其余内容是不可见的

height: 1%;

    高度是父元素的1%，父元素未设置高度值时，不起作用，实际高度由内部元素a决定。在这里，与overflow: hidden;联用，消除IE低版本的某些bug吧。

 background: url(../images/line.gif) no-repeat center right;

    竖线分隔图片右侧居中

padding-right: 1px;

    右侧内部填充1px，这是给竖线分隔图片留下的位置

background: url(../images/nav-bg.png) repeat-x left bottom;

    left bottom相当于0 -30px

 

【技术要点】

列表导航栏的大小由三层标签决定，最里层标签是a，高度是30px，宽度=20px+文字宽度+20px；第二层是li，宽度=a的宽度+1px，高度30px是由a决定的；最外一层是<ul id="nav">宽度100%，高度30px是由li决定的。

 

【附图】

line.gif

nav-bg.png