用ul、li做横向导航

  
  

   
   /*
   
    ul li以横排显示 
   
   */
   
   


   
   /*
   
    所有class为menu的div中的ul样式 
   
   */
   
   
div.menu ul

   
   {
   
   
    list-style
   
   :
   
   none
   
   ;
   
    
   
   /*
   
    去掉ul前面的符号 
   
   */
   
   
    margin
   
   :
   
    0px
   
   ;
   
    
   
   /*
   
    与外界元素的距离为0 
   
   */
   
   
    padding
   
   :
   
    0px
   
   ;
   
    
   
   /*
   
    与内部元素的距离为0 
   
   */
   
   
    width
   
   :
   
    auto
   
   ;
   
    
   
   /*
   
    宽度根据元素内容调整 
   
   */
   
   

   
   }
   
   

   
   /*
   
    所有class为menu的div中的ul中的li样式 
   
   */
   
   
div.menu ul li

   
   {
   
   
    float
   
   :
   
   left
   
   ;
   
    
   
   /*
   
    向左漂移，将竖排变为横排 
   
   */
   
   

   
   }
   
   

   
   /*
   
    所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) 
   
   */
   
   
div.menu ul li a, div.menu ul li a:visited

   
   {
   
   
    background-color
   
   :
   
    #465c71
   
   ;
   
    
   
   /*
   
    背景色 
   
   */
   
   
    border
   
   :
   
    1px #4e667d solid
   
   ;
   
    
   
   /*
   
    边框 
   
   */
   
   
    color
   
   :
   
    #dde4ec
   
   ;
   
    
   
   /*
   
    文字颜色 
   
   */
   
   
    display
   
   :
   
    block
   
   ;
   
    
   
   /*
   
    此元素将显示为块级元素，此元素前后会带有换行符 
   
   */
   
   
    line-height
   
   :
   
    1.35em
   
   ;
   
    
   
   /*
   
    行高 
   
   */
   
   
    padding
   
   :
   
    4px 20px
   
   ;
   
    
   
   /*
   
    内部填充的距离 
   
   */
   
   
    text-decoration
   
   :
   
    none
   
   ;
   
    
   
   /*
   
    不显示超链接下划线 
   
   */
   
   
    white-space
   
   :
   
    nowrap
   
   ;
   
    
   
   /*
   
    对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 
   
   */
   
   

   
   }
   
   

   
   /*
   
    所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) 
   
   */
   
   
div.menu ul li a:hover

   
   {
   
   
    background-color
   
   :
   
    #bfcbd6
   
   ;
   
    
   
   /*
   
    背景色 
   
   */
   
   
    color
   
   :
   
    #465c71
   
   ;
   
    
   
   /*
   
    文字颜色 
   
   */
   
   
    text-decoration
   
   :
   
    none
   
   ;
   
    
   
   /*
   
    不显示超链接下划线 
   
   */
   
   

   
   }
   
   

   
   /*
   
    所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) 
   
   */
   
   
div.menu ul li a:active

   
   {
   
   
    background-color
   
   :
   
    #465c71
   
   ;
   
    
   
   /*
   
    背景色 
   
   */
   
   
    color
   
   :
   
    #cfdbe6
   
   ;
   
    
   
   /*
   
    文字颜色 
   
   */
   
   
    text-decoration
   
   :
   
    none
   
   ;
   
    
   
   /*
   
    不显示超链接下划线 
   
   */
   
   

   
   }
  
  

2、前台引用上述CSS样式文件

  
  

   
   <
   
   link 
   
   href
   
   ="Styles/Site.css"
   
    rel
   
   ="stylesheet"
   
    type
   
   ="text/css"
   
    
   
   />
  
  

3、前台数据

  
  

   
       
   
   <
   
   div 
   
   class
   
   ="menu"
   
   >
   
   
        
   
   <
   
   ul
   
   >
   
   
            
   
   <
   
   li
   
   ><
   
   a 
   
   href
   
   ="javascript:void(0);"
   
   >
   
   主页
   
   </
   
   a
   
   ></
   
   li
   
   >
   
   
            
   
   <
   
   li
   
   ><
   
   a 
   
   href
   
   ="javascript:void(0);"
   
   >
   
   工作日志
   
   </
   
   a
   
   ></
   
   li
   
   >
   
   
            
   
   <
   
   li
   
   ><
   
   a 
   
   href
   
   ="javascript:void(0);"
   
   >
   
   设备运行记录
   
   </
   
   a
   
   ></
   
   li
   
   >
   
   
            
   
   <
   
   li
   
   ><
   
   a 
   
   href
   
   ="javascript:void(0);"
   
   >
   
   其他
   
   </
   
   a
   
   ></
   
   li
   
   >
   
   
        
   
   </
   
   ul
   
   >
   
   
    
   
   </
   
   div
   
   >