红黑风格的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 id="foxmenucontainer">			<div 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导航菜单（蓝色）