`

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

    博客分类：
  • CSS
CSSGoogleXHTMLHTML 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="bilingual menu,中英文双语菜单" />
<meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" />
<meta content="all" name="robots" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>完全用CSS实现的中英文双语导航菜单</title>
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}
  
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}

#nav li{
float: left;
margin-right: 1px;
}

.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: 80px;
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>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
  <ul id="nav">
  <li><a class="bi" href="index.html">Home<span>首　页</span></a></li>
  <li><a class="bi" href="about.html">About us<span>关于我们</span></a></li>
  <li><a class="bi" href="products.html">Products<span>产品展示</span></a></li>
  <li><a class="bi" href="services.html">Services<span>售后服务</span></a></li>
  <li><a class="bi" href="contact.html">Contact<span>联系我们</span></a></li>
</ul>
<div id="navbar"></div>
</div>
<div id="footer">
  <address>
  Design by <a href="http://www.forest53.com">forestgan</a> 本演示采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。&nbsp;&nbsp;<a href="javascript:history.back()">Back</a>
  </address>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript>google-analytics</noscript>
<script src="http://www.forest53.com/stat/mystat.asp?siteid=1" type="text/javascript"></script>
<noscript>stat.</noscript>
</body>
</html>
<script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
分享到：
| 点我挂掉IE6
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    完全用CSS实现的中英文双语导航菜单.rar

    这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做。 缺点：因为中英文字的长度关系，不能实现自适应宽度，只能固定...

    CSS中英文双语导航菜单 div css实现中英文双语切换导航条.zip

    "CSS中英文双语导航菜单 div css实现中英文双语切换导航条.zip"是一个实例，它展示了如何利用HTML、CSS以及可能的JavaScript（如jQuery）来构建这样一个功能。下面将详细阐述这个主题涉及的知识点。 首先，我们需要...

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

    导航菜单的好坏直接影响网站的用户体验，有些网站为了满足广大的用户群，经常会要求有中英文对照．下面笔者就通过一个实例来研究中英文导航是如何制作出来的。别担心，不用图片，不用Java Script，更不用动态脚本，...

    中英文双语导航菜单

    ### 中英文双语导航菜单：完全用CSS实现的细节解析 在现代网页设计中，创建一个用户友好且具有多语言支持的导航菜单是至关重要的。本文将深入探讨一个完全使用CSS实现的中英文双语导航菜单的设计思路、代码结构及其...

    中英文双语导航菜单.zip

    这个"中英文双语导航菜单.zip"文件提供了一个利用HTML和CSS技术实现的无JavaScript解决方案，非常适合那些希望构建简洁、高效的网站导航结构的开发者。 首先，让我们详细探讨HTML源码在构建网站菜单中的作用。HTML...

    完全用CSS实现的中英文双语导航菜单特效代码

    介绍： 这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做。 缺点：因为中英文字的长度关系，不能实现自适应宽度，只能...

    中英文双语下拉二级导航菜单.zip

    【标题】"中英文双语下拉二级导航菜单"是一个网页设计组件，它结合了jQuery技术，用于创建具有鼠标悬停功能的双语导航菜单。这个菜单不仅可以在鼠标经过时切换中英文显示，还能展开下拉二级菜单，提供更丰富的导航...

    CSS实现的中英文双语菜单效果代码

    总结来说，CSS实现的中英文双语菜单效果代码利用了CSS的hover属性和背景图片，创建了一个具有动态效果的导航菜单。这种方法不仅易于实现，而且具有良好的可扩展性和可定制性，适用于各种类型的网站。通过学习和实践...

    用JavaScript实现CheckBox的多选和反选.pdf

    此外，使用 CSS 实现中英文双语导航菜单也是一个重要的技术。导航菜单是网站中一个非常重要的部分，其功能是引导用户进入网站的各个功能版块。导航菜单的好坏直接影响网站的用户体验，有些网站为了满足广大的用户群...

    Ace-Admin官方源码最新完整版 中英文双语 1.3.5

    1.3.5版本是该模板的最新完整版，它不仅包含了Ace-Admin的基础框架，还提供了中英文双语支持，极大地拓宽了其应用范围，尤其适合需要多语言后台系统的项目。 首先，我们来深入了解Ace-Admin的核心特性。Ace-Admin...

    Ace Admin中英文双语版

    这个资源包含Ace的中英文双语版本，确保了在不同语言环境下的使用灵活性。Ace框架基于Bootstrap 3，一个强大的前端开发工具，提供响应式布局和移动设备优先的设计理念，确保在PC和手机上都能呈现良好的用户体验。 ...

    ASP网站实例开发源码——三友手机配件有限公司中英文双语企业网站(源码+数据库).zip

    7. **网页模板**：网站可能会使用模板机制来创建和重用页面元素，如页头、页脚和导航菜单，这样可以提高开发效率并保持一致性。 8. **错误处理和日志记录**：ASP网站通常会包含错误处理代码，以捕获和处理可能出现...

    中英文网站 企业版现成源代码

    3. JavaScript文件：实现交互功能，如导航菜单、语言切换、表单验证等。 4. 图片和媒体资源：包括企业logo、产品图片、背景图像等，可能有针对不同语言的版本。 5. 数据库配置：用于存储网站数据，如产品信息、新闻...

    中英文企业网站系统源代码

    "中英文企业网站系统源代码"这个标题揭示了我们关注的核心内容，即一个支持中文和英文双语的企业级网站系统的原始代码。这样的系统通常用于那些需要面向国内外用户，展示企业形象、产品服务以及进行在线交互的公司。...

    简单的中英文网站源码

    3. 导航菜单：方便用户在中英文两个版本之间切换，同时浏览网站的不同部分。 4. 响应式设计：考虑到不同设备的屏幕尺寸，网站可能采用了响应式布局，确保在手机、平板电脑和桌面电脑上都能良好显示。 在实际应用中...

    测试完整的中英文企业类网站源码

    此外，考虑到源码支持中英文双语，它可能包含了i18n（国际化）设计，这涉及到语言包、多语言切换逻辑以及本地化日期和货币格式处理。这使得网站能够适应全球市场，满足不同地区的客户需求。 对于开发者来说，这个...

    ASP源码—网新中英文响应式企业手机、电脑一体化建站源码 高级版.zip

    中英文双语网站是全球化企业的标准配置，它允许企业面向国内外市场提供服务。中英文版本的网站可以分别针对中国国内市场和国际市场的用户，提供相应的语言环境，便于不同语言背景的用户理解和使用。在源码设计时，...

    中英双语企业网站源码二

    【标题】"中英双语企业网站源码二"提供了构建多语言企业网站的解决方案，主要针对希望在中文和英文市场同时开展业务的...使用者只需按照提供的指南进行安装和配置，就能快速构建起具备中英文双语功能的专业企业网站。

Magicbox
Global site tag (gtag.js) - Google Analytics