一个简约型的横向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导航菜单|www.abaonet.com|</title> <style> body { background-color:#292929; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center } #navcontainer { width:778px } #navlist { margin: 0; padding: 0 0 20px 20px; border-bottom: 1px solid #444; } #navlist ul, #navlist li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navlist a:link, #navlist a:visited { float: left; line-height: 14px; margin: 0 10px 4px 10px; text-decoration: none; color: #999; } #navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 1px solid #76B41C; padding-bottom: 5px; background: transparent; color: #fff; } #navlist a:hover { color: #fff; } </style> </head> <body> <p> </p> <p> </p> <div id="navcontainer"> <ul id="navlist"> <li><a href="http://www.abaonet.com/" target="_blank" id="current">Item 01</a></li> <li><a href="#">Link 02</a></li> <li><a href="#">Link 03</a></li> <li><a href="#">Link 04</a></li> <li><a href="#">Link 05</a></li> <li><a href="#">Link 06</a></li> <li><a href="#">Link 07</a></li> <li><a href="#">Link 08</a></li> <li><a href="#">Link 09</a></li> </ul> </div> </body> </html> 可以另存为 .html 来查看效果。 |
| 关键字：html css |