很漂亮的CSS水平导航条

2024-09-05 12:19:38

字体：大中小

来源：转载

供稿：网友

仿MAC机风格的水平导航条，纯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>水平导航条(DIV+CSS)</title><style type="text/css">body{  background: #FFF;  font-family: Arial, Helvetica, sans-serif;  color: #555555;  padding: 0px;  margin: 5px;  text-align: center;    font-size: 9pt;}#nav{  text-align: center;  font-size: 11px;  font-family: Arial, Helvetica, sans-serif;  margin:15px auto;}#nav ul{  margin: 0px;  padding: 0px;  list-style-type: none;}#nav li{    float: left;  }#nav li a{  text-decoration: none;  color: #666;    background: url(/jscss/demoimg/200904/menubg.gif) no-repeat 0px 0px;  width: 100px;  line-height: 20px;  display: block;}#nav li a:hover{  color: #CC0000;    background: url(/jscss/demoimg/200904/menubg.gif) no-repeat 0px -20px;  }</style></head><body><div id="nav"><ul><li>Home</li><li>About us</li><li>Products</li><li>ASP Codes</li><li>PHP Codes</li><li>Ajax Codes</li><li>Services</li></ul></div></body></html>

上一篇：不使用图片的CSS圆角垂直菜单

下一篇：适合企业站的DIV+CSS导航菜单