Home >Web Front-end >HTML Tutorial >A beautiful black DIV CSS navigation bar_html/css_WEB-ITnose
代码:
< 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 >