一款黑色漂亮的DIV+CSS导航条

一款黑色漂亮的DIV+CSS导航条

 

代码:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 黑色CSS菜单 </ title >
< style >
#menu  {
    background :  #333 ;
    float :  left ;
    list-style :  none ;
    margin :  0 ;
    padding :  0 ;
    width :  100% ;
    height :  0px ;
}
#menu li  {
    float :  left ;
    margin :  0 ;
    padding :  0 ;
    font-family : sans-serif ;
    font-size :  67.5% ;
}
#menu a  {
    background :  #333 ;
    color :  #ccc ;
    display :  list-item ;
    float :  left ;
    margin :  0 ;
    padding :  8px 12px ;
    font-weight : normal ;
    text-decoration :  none ;
}
#menu a:hover  {
    background :  #2580a2 ;
    color :  #fff ;
    padding-bottom :  8px ;
     }                     
                    
</ style >
< div >                         
< ul  id ="menu" >
   < li >< a  href ="/sort/list_11_203_1.shtml" > Ajax/JavaScript </ a ></ li >
< li >< a  href ="/sort/list_11_83_1.shtml" > ExtJS实例 </ a ></ li >< li >< a  href ="/sort/list_11_112_1.shtml" > jQuery代码 </ a ></ li >< li >< a  href ="/sort/list_11_168_1.shtml" > CSS特效 </ a ></ li >< li >< a  href ="/sort/list_11_96_1.shtml" > HTML精选 </ a ></ li >< li >< a  href ="/sort/list_11_202_1.shtml" > 在线编辑器 </ a ></ li >< li >< a  href ="/sort/list_11_209_1.shtml" > Mootools举例 </ a ></ li >< li >< a  href ="/sort/list_11_210_1.shtml" > Prototype框架 </ a ></ li >
< li >< a  href ="#" > 官方博客 </ a ></ li >
< li >< a  href ="/guestbook/" > Guestbook </ a ></ li >
</ ul >
</ body >
</ html >

 

posted on 2011-07-19 13:17  前端设计 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/webshow/archive/2011/07/19/2110460.html