用CSS实现中英文双语导航菜单-竞赛园地 - 常州市新北区奔牛初级中学

栏目列表

当前位置：首页>>化学家园>>习题下载>>竞赛园地>>文章内容

用CSS实现中英文双语导航菜单

发布时间：2008-12-15 点击：来源：中国IT人才网作者：will2011

用CSS实现中英文双语导航菜单：

代*如下：

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://{域名已经过期}/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://{域名已经过期}/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+Css实例:用CSS实现中英文双语导航菜单--中国IT人才网!IT求职,IT招聘</title>
</head>
<style type="text/css">
.container{ width:800px; margin:20px auto;}
a{ color:#0033FF; text-decoration:none;}
a:hover{ color:#FFFFFF; text-decoration:underline;}
.nav li{ float:left; margin:2px 4px;}
.bi{ position:relative; z-index:0;}
.bi:hover{z-index:99;}
.bi:hover span{visibility:visible;  top:0; left:0; cursor:pointer;}
.bi span{position:absolute; left:-999em;  visibility:hidden;}
.nav li a,.bi:hover span{line-height:20px; text-decoration:none; background:#DDDDDD; color:#666666; display:block; width:100px;
 text-align:center;}
.nav li a:hover,.bi:hover span{color:#FFFFFF; background:#DC4E1B;}
.bi:hover span{padding-top:2px;}
.navbar{ background:#DC4E1B;  height:8px; overflow:hidden; clear:both;}
</style>
<body>
<div class="container">
	<div class="nav">
		<li><a class="bi" href="http://{域名已经过期}" target="_blank">51ITRenCai<span>中国IT人才网</span></a></li>
		<li><a class="bi" href="http://{域名已经过期}/About/Aboutus.html" target="_blank">AboutUs<span>关于我们</span></a></li>
		<li><a class="bi" href="http://{域名已经过期}/About/AdServices.html" target="_blank">AdServices<span>广告服务</span></a></li>
		<li><a class="bi" href="http://{域名已经过期}/About/ContactUs.html" target="_blank">ContactUs<span>联系我们</span></a></li>
	</div>
	<div class="navbar"></div>
</div>
</body>
</html>

[可先修改部分代* 再运行查看效果]

关闭窗口

打印文档

附件：