html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

CSS实现的中英文双语菜单效果代码_Div+Css教程

[ ] 已经帮助:人解决问题

        本文实例讲述了CSS实现的中英文双语菜单效果代码。分享给大家供大家参考。具体如下:XMHHTML5中文学习网 - HTML5先行者学习网

        这是一款你一定喜欢的CSS中英文双语菜单,支持鼠标 特效,先运行一下看效果,绝对会另你满意。用到了一个背景图片,请自行下载。XMHHTML5中文学习网 - HTML5先行者学习网

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"XMHHTML5中文学习网 - HTML5先行者学习网
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XMHHTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml">XMHHTML5中文学习网 - HTML5先行者学习网
<head>XMHHTML5中文学习网 - HTML5先行者学习网
<title>实用的中英文CSS菜单</title>XMHHTML5中文学习网 - HTML5先行者学习网
<style>XMHHTML5中文学习网 - HTML5先行者学习网
body{XMHHTML5中文学习网 - HTML5先行者学习网
margin:0;XMHHTML5中文学习网 - HTML5先行者学习网
padding:0;XMHHTML5中文学习网 - HTML5先行者学习网
font-size:12px;XMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
*XMHHTML5中文学习网 - HTML5先行者学习网
{XMHHTML5中文学习网 - HTML5先行者学习网
margin:0;XMHHTML5中文学习网 - HTML5先行者学习网
padding:0;XMHHTML5中文学习网 - HTML5先行者学习网
text-align:left;XMHHTML5中文学习网 - HTML5先行者学习网
color:#9196A0;XMHHTML5中文学习网 - HTML5先行者学习网
font-family:Verdana;XMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
a{XMHHTML5中文学习网 - HTML5先行者学习网
color:#9196A0;XMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
a:link {XMHHTML5中文学习网 - HTML5先行者学习网
text-decoration: noneXMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
a:visited{XMHHTML5中文学习网 - HTML5先行者学习网
text-decoration: noneXMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
a:hover{XMHHTML5中文学习网 - HTML5先行者学习网
text-decoration:underline;XMHHTML5中文学习网 - HTML5先行者学习网
color:#81BC06XMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
#nav{XMHHTML5中文学习网 - HTML5先行者学习网
height:100%;XMHHTML5中文学习网 - HTML5先行者学习网
overflow: hidden;XMHHTML5中文学习网 - HTML5先行者学习网
list-style:none;XMHHTML5中文学习网 - HTML5先行者学习网
margin:0 auto;XMHHTML5中文学习网 - HTML5先行者学习网
width:798pxXMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li{XMHHTML5中文学习网 - HTML5先行者学习网
float:left;XMHHTML5中文学习网 - HTML5先行者学习网
font-weight:bold;XMHHTML5中文学习网 - HTML5先行者学习网
height:60px;XMHHTML5中文学习网 - HTML5先行者学习网
background:url(images/navbg.png) #fff repeat-x left bottom;XMHHTML5中文学习网 - HTML5先行者学习网
padding:0XMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
#nav a{XMHHTML5中文学习网 - HTML5先行者学习网
text-align:center;XMHHTML5中文学习网 - HTML5先行者学习网
padding-top:20px;XMHHTML5中文学习网 - HTML5先行者学习网
display: block;XMHHTML5中文学习网 - HTML5先行者学习网
height:40px;XMHHTML5中文学习网 - HTML5先行者学习网
line-height:40px;XMHHTML5中文学习网 - HTML5先行者学习网
}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.one{width:80px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.two{width:80px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.three{width:80px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.four{width:80px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.five{width:100px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.six{width:106px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.seven{width:100px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.eight{width:80px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a.nine{width:92px;}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.one{background:url(images/navunbg.gif) no-repeat -8px 0}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.two{background:url(images/navunbg.gif) no-repeat -8px -60px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.three{background:url(images/navunbg.gif) no-repeat -8px -120px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.four{background:url(images/navunbg.gif) no-repeat -8px -180px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.five{background:url(images/navunbg.gif) no-repeat 4px -240px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.six{background:url(images/navunbg.gif) no-repeat 8px -300px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.seven{background:url(images/navunbg.gif) no-repeat 4px -360px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.eight{background:url(images/navunbg.gif) no-repeat -8px -420px}XMHHTML5中文学习网 - HTML5先行者学习网
#nav li a:hover.nine{background:url(images/navunbg.gif) no-repeat 0 -480px}XMHHTML5中文学习网 - HTML5先行者学习网
</style>XMHHTML5中文学习网 - HTML5先行者学习网
</head>XMHHTML5中文学习网 - HTML5先行者学习网
<body>XMHHTML5中文学习网 - HTML5先行者学习网
<p>&nbsp;</p>XMHHTML5中文学习网 - HTML5先行者学习网
<ul id="nav">XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="one">网站首页</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="two">关于我们</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="three">最新更新</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="four">更新排行</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="five">建站服务流程</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="six">客户案例</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="seven">网站使用指南</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="eight">网页特效</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
<li><a href="#" class="nine">联系我们</a></li>XMHHTML5中文学习网 - HTML5先行者学习网
</ul><!--nav end-->

 XMHHTML5中文学习网 - HTML5先行者学习网

希望本文所述对大家的css网页设计有所帮助。

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助