求大神帮忙写个淘宝导航栏CSS代码！
要求是这样的像素950高度80HOMEALLTOPSHOESBOTTOMBOOKMARKABOUTUS对应的是主页上装下装鞋子配件收藏我们关于我们光标停留英文会滑动成汉字...
要求是这样的 像素950 高度80
HOME ALL TOP SHOES BOTTOM BOOK MARK ABOUT US对应的是 主页 上装
下装 鞋子 配件 收藏我们 关于我们光标停留英文会滑动成汉字 背景颜色#787878 文字颜色#000000
中间用#000000 虚线隔开 字体大小18X
万分感激 展开
HOME ALL TOP SHOES BOTTOM BOOK MARK ABOUT US对应的是 主页 上装
下装 鞋子 配件 收藏我们 关于我们光标停留英文会滑动成汉字 背景颜色#787878 文字颜色#000000
中间用#000000 虚线隔开 字体大小18X
万分感激 展开
1个回答
展开全部
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Nav</title>
<style>
#nav{
width:950px;
height:80px;
background:#787878;
color:#000000;
font-size:18px;
line-height:80px;
margin:auto;
}
#nav a{
display:inline-block;
padding:0 20px;
border-right:1px dotted #000000;
}
</style>
<script>
$(function(){
$('#nav').find('a').mouseover(function(){
$(this).attr('data-en', $(this).html()).html($(this).attr('data-cn'));
});
$('#nav').find('a').mouseout(function(){
$(this).attr('data-cn', $(this).html()).html($(this).attr('data-en'));
});
});
</script>
</head>
<body>
<div id="nav">
<a href="#HOME" data-cn="主页">HOME</a>
<a href="#ALL" data-cn="配件">ALL</a>
<a href="#TOP" data-cn="上装">TOP</a>
<a href="#BOTTOM" data-cn="下装">BOTTOM</a>
<a href="#SHOES" data-cn="鞋子">SHOES</a>
<a href="#MARK" data-cn="收藏我们">BOOK MARK</a>
<a href="#ABOUT" data-cn="关于我们">ABOUT US</a>
</div>
</body>
</html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Nav</title>
<style>
#nav{
width:950px;
height:80px;
background:#787878;
color:#000000;
font-size:18px;
line-height:80px;
margin:auto;
}
#nav a{
display:inline-block;
padding:0 20px;
border-right:1px dotted #000000;
}
</style>
<script>
$(function(){
$('#nav').find('a').mouseover(function(){
$(this).attr('data-en', $(this).html()).html($(this).attr('data-cn'));
});
$('#nav').find('a').mouseout(function(){
$(this).attr('data-cn', $(this).html()).html($(this).attr('data-en'));
});
});
</script>
</head>
<body>
<div id="nav">
<a href="#HOME" data-cn="主页">HOME</a>
<a href="#ALL" data-cn="配件">ALL</a>
<a href="#TOP" data-cn="上装">TOP</a>
<a href="#BOTTOM" data-cn="下装">BOTTOM</a>
<a href="#SHOES" data-cn="鞋子">SHOES</a>
<a href="#MARK" data-cn="收藏我们">BOOK MARK</a>
<a href="#ABOUT" data-cn="关于我们">ABOUT US</a>
</div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
