自动变为大写的自适应CSS漂亮菜单

2024-09-05 12:20:21

字体：大中小

来源：转载

供稿：网友

一款个性的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=utf-8" /><title>大块的自适应CSS导航条</title><style>*{	margin:0;	padding:0;}body{	background:#fff;	color:#666;		font:12px/18px Tahoma, Arial, Helvetica, sans-serif;	}	#codefans_net_menu{		margin:0 auto;		width:700px;	}		#codefans_net_menu ul{			list-style:none;		}			#codefans_net_menu li{				list-style:none;				display:block;				float:left;				line-height:51px;				border:solid #636363;				border-width:0 2px 0 2px;								background:url(/jscss/demoimg/200908/menu_005_bg.jpg) repeat-x;				height:51px;				margin:0 1px 0 0;											}				#codefans_net_menu li a{					display:block;					float:left;					color:#fff;					text-transform:uppercase;					font-size:11px;					font-weight:bold;					text-decoration:none;					padding:0 25px;					height:51px;									}					#codefans_net_menu li a:hover{					color:#fff;					background:url(/jscss/demoimg/200908/menu_005_h.jpg) repeat-x;					}				#codefans_net_menu li a.current{					display:block;					float:left;					background:url(/jscss/demoimg/200908/menu_005_h.jpg) repeat-x;										color:#fff;					text-transform:uppercase;					font-size:11px;					font-weight:bold;					text-decoration:none;					padding:0 25px;					}					#codefans_net_menu li a:hover.current{						color:#fff;					}</style></head><body><div id="codefans_net_menu"><ul><li>HomePage</li><li>WEB</li><li>AJAX</li><li>jQuery</li><li>CSS</li><li>Mootools</li>							</ul></div></body></html>

上一篇：公司类网站喜欢用的纯CSS菜单

下一篇：简单的菜单，无图片

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注