紅黑風格的CSS首頁導航條

2024-09-05 12:19:25

字體：大中小

來源：轉載

供稿：網友

紅黑風格的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><title>紅黑風格橫向導航條</title><meta http-equiv="Content-Type" content="text/html; charset=GB2312"><style>#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}#foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:5px 20px 0 20px;height:19px;background:transparent url(/jscss/demoimg/200903/foxmenu_bg-OFF.gif) no-repeat top left;}#foxmenu ul li a:hover{color:#fff;background:transparent url(/jscss/demoimg/200903/foxmenu_bg-OVER.gif) no-repeat top right;}#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;}</style></head><body>	<div   class="iwvjtn8m0"   id="foxmenucontainer">			<div   class="iwvjtn8m0"   id="foxmenu">	<ul>	<li>Home</li>	<li>源碼分類</li>	<li>Services</li>	<li>New Update</li>	<li>Product</li>	</ul>	</div>	</div></body></html>

上一篇：垂直帶指向的CSS導航條

下一篇：簡潔CSS導航菜單（藍色）