灰色大按钮式导航条，纯CSS，滑过变色

2024-09-05 12:19:41

字体：大中小

来源：转载

供稿：网友

灰色大按钮式导航条，纯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>大按钮式导航条</title><style>*{	margin:0;	padding:0;	font-family:Geneva, Arial, Helvetica, sans-serif;}#menu{	width:90%;	margin:25px auto;}#menu ul{	list-style:none;}#menu li{	display:block;	float:left;}#menu li a{	background:#979797 url(/jscss/demoimg/200904/menu_bg6.gif) repeat-x;	border:2px solid #939393;	margin:0 1px;	padding:15px 15px 15px 15px;	display:block;	float:left;	color:#fff;	text-transform:uppercase;	text-decoration:none;	font-size:13px;	font-weight:bold;	height: 50px;}#menu li a span{	color:#636363;	font-size:10px;	text-transform:lowercase;	font-weight:normal;}#menu li a:hover{	background:#e46825 url(/jscss/demoimg/200904/menu_hover6.gif) repeat-x;	border:2px solid #939393;	text-decoration:none;}#menu li a:hover span{	color:#636363;}.current{	background:#bcbcbc url(/jscss/demoimg/200904/menu_hover6.gif) repeat-x;	border:2px solid #aeaeae;	margin:0 1px;	padding:15px 15px 15px 15px;	display:block;	float:left;	color:#fff;	text-transform:uppercase;	text-decoration:none;	font-size:13px;	cursor:pointer;	font-weight:bold;	height: 50px;}.current span{	color:#636363;	font-size:10px;	text-transform:lowercase;	font-weight:normal;}</style></head><body><div id="menu"><ul><li class="current">Indexs takes you to HomePage</li><li>About Us takes you to Welcome</li><li>Products Codes sort Codes Intro</li><li>Partners Last news partners page</li>		<li>Contact takes you to contact page</li></ul></div></body></html>

上一篇：绿色大按钮式的CSS导航条

下一篇：多种文本框输入格式限制的JS代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注