HTML导航栏样式设计-优快云博客

<!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 runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> div,body,ul,li{ margin:0; padding:0} #nav{ width:960px; height:35px; margin:0 auto; margin-top:30px; background-color:#CCC;} #nav ul{ width:960px; height:35px;} #nav ul li { float:left; list-style:none; line-height:35px; text-align:center; height: 35px; } #nav ul li a { font-size:12px; height:35px; color:Black; text-decoration:none; display:block; float:left; padding:0 10px; } #nav ul li a:hover { font-size:12px; color:White; height:35px; background-color:Black; text-decoration:underline; } </style> <title></title> </head> <body> <form id="form1" runat="server"> <div id="nav"> <ul> <li><a href="#" mce_href="#">首页</a></li> <li><a href="#" mce_href="#">新闻中心</a></li> <li><a href="#" mce_href="#">体育新天地</a></li> <li><a href="#" mce_href="#">娱乐汇总</a></li> <li><a href="#" mce_href="#">休闲一条街</a></li> <li><a href="#" mce_href="#">联系</a></li> </ul> </div> </form> </body> </html>