#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
為了讓用戶知道當前所處的頁面，做了一個當前頁面的狀態，把ID添加到相應的a上。
<!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" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;} #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;} #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首頁</a></li> <li><a href="#">網頁版式</a></li> <li><a href="#">web教程</a></li> <li><a href="#">web實例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運行
三、 CSS Sprites技術
CSS Sprites在國內很多人叫css精靈或css雪碧。它是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的背景圖片定位到要顯示的位置。這樣做可以減少文件體積，減少對服務器的請求次數，提高效率。
講CSS Sprites之前，先把背景圖片給搞清楚
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }
css背景屬性縮寫后如上所示，#ccc表示背景色；url（）里是背景圖片路徑；接下來的兩個數值參數分別是左右和上下，第一個參數表示距左多少px，第二個參數表示距上多少，這和padding的簡寫方式是不 一樣，一定不要弄混。另外再強調一點css中值為0可以不帶單位，其它數值都必須帶單位（line-height值為多少倍時，zoom，z-index除外）；no-repeat表示背景圖片向哪個方向重復，此時為不重復。
還需說明一點的是定位圖片位置的參數是以圖片的左上角為原點的，理解了這些，CSS Sprites技術就基本上懂了，就是靠背景圖片定位來實現的。把三張背景圖片整合到一張上，如下圖：
<!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" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;} #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;} #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首頁</a></li> <li><a href="#">網頁版式</a></li> <li><a href="#">web教程</a></li> <li><a href="#">web實例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運行
3
