自写的滑动门式菜单

2024-09-05 12:20:28

字体：大中小

来源：转载

供稿：网友

自已写的横排的导航菜单，红色水晶风格，大家可以用啦，不过也有些地方需要高手指教啊，代码里有注释，兼容性还不错，希望一起提高吧。

<!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><style type="text/css">*{margin:0;padding:0;}body{ margin:auto;font:14px "宋体",Verdana, Arial, Helvetica, sans-serif;color:#333;}ul,li{padding:0; list-style:none;}a:link,a:visited{color:#333;text-decoration:none;}a:hover{color:#d00;text-decoration:none;}#headNav{background:url(/jscss/demoimg/200910/_navBg.png) 0 -42px repeat-x; border-top:solid 1px #E5B0B1; height:42px;}#headNav ul li{float:left; padding:13px 0; text-align:center; cursor:pointer; }#headNav ul li a{display:block; font-size:14px; padding:0 9px; font-weight:bold; color:#fff;}#headNav ul li a.lineLink{border-left:dotted 1px #fff;}.navNormalLink{background:url(/jscss/demoimg/200910/_navBg.png) 0 -42px no-repeat; padding-bottom:4px;}.navNormalOver{background:url(/jscss/demoimg/200910/_navBg.png) no-repeat; padding-bottom:4px;}</style></head><body>	<div id="headNav">		<ul>			<li>站长首页</li>			<li>行业资讯</li>			<li>搜索引擎</li>			<li>站长访谈</li>			<li>网站联盟</li>			<li>源码下载</li>			<li>网页特效</li>			<li>模板素材</li>			<li>软件下载</li>		</ul>		<script type="text/javascript">				</script>	</div></body></html>

上一篇：CSS仿支付宝菜单，自己亲手写的

下一篇：CSS实现折叠的菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注