|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。
这是一个完整用CSS完成的中英文双语导航菜单，无剧本和图片，初始时，菜单言语是英文，当鼠标悬停在菜单上时，其酿成中文，固然你也能够反过去做。
完成道理：
XHTML
<ulid="nav">
<li><aclass="bi"href="index.html">Home<span>首 页</span></a></li>
</ul>
从下面代码能够看出，中文放在span标签里，关头是必要在初始时，使其的属性不成见。
CSS
.bi{
position:relative;
z-index:0;
}
.bi:hover{
z-index:99;
}
.bi:hoverspan{
visibility:visible;
top:0;
left:0;
cursor:pointer;
}
.bispan{
position:absolute;
left:-999em;
visibility:hidden;
}
#navlia,.bi:hoverspan{
line-height:20px;
text-decoration:none;
background:#DDDDDD;
color:#666666;
display:block;
width:80px;
text-align:center;
}
#navlia:hover,.bi:hoverspan{
color:#FFFFFF;
background:#DC4E1B;
}
.bi:hoverspan{
padding-top:2px;
}
链接的属性是绝对定位，那在此标签里的元素可将其作为参照点。在span元素里的中文因其设定了不成见，以是在初始形态时，只能显现英文。而当鼠标悬停在菜单上时，
span元素里的设定变成可见，Z轴为99，掩盖在英文下面，从而完成了言语笔墨的转换。弱点：由于中英笔墨的长度干系，不克不及完成自顺应宽度，只能流动宽度。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="Keywords"content="bilingualmenu,中英文双语菜单"/><metahttp-equiv="Description"content="完整用CSS完成的中英文双语导航菜单"/><metacontent="all"name="robots"/><metahttp-equiv="pragma"content="no-cache"/><metaname="author"content="forestgan"/><metaname="copyright"content="forestgan"/><title>完整用CSS完成的中英文双语导航菜单</title><styletype="text/css">a{color:#FFFF99;text-decoration:none;}a:hover{color:#FFFFFF;text-decoration:underline;}#nav{padding:10px10px0;font-size:12px;font-weight:bold;margin:1em00;list-style:none;}#navli{float:left;margin-right:1px;}.bi{position:relative;z-index:0;}.bi:hover{z-index:99;}.bi:hoverspan{visibility:visible;top:0;left:0;cursor:pointer;}.bispan{position:absolute;left:-999em;visibility:hidden;}#navlia,.bi:hoverspan{line-height:20px;text-decoration:none;background:#DDDDDD;color:#666666;display:block;width:80px;text-align:center;}#navlia:hover,.bi:hoverspan{color:#FFFFFF;background:#DC4E1B;}.bi:hoverspan{padding-top:2px;}#navbar{background:#DC4E1B;height:8px;overflow:hidden;clear:both;}</style><linkhref="../css/main.css"rel="stylesheet"type="text/css"/></head><body><divid="top"><ulid="nav"><li><aclass="bi"href="index.html">Home<span>首 页</span></a></li><li><aclass="bi"href="about.html">Aboutus<span>关于我们</span></a></li><li><aclass="bi"href="products.html">Products<span>产物展现</span></a></li><li><aclass="bi"href="services.html">Services<span>售后服务</span></a></li><li><aclass="bi"href="contact.html">Contact<span>接洽我们</span></a></li></ul><divid="navbar"></div></div><divid="footer"><address>Designby<ahref="http://www.forest53.com">forestgan</a>本演示接纳<ahref="http://www.creativecommons.cn/">创作共用受权</a>--签名和非贸易用处。<ahref="javascript:history.back()">Back</a></address></div><scriptsrc="http://www.google-analytics.com/urchin.js"type="text/javascript"></script><scripttype="text/javascript">_uacct="UA-152060-1";urchinTracker();</script><noscript>google-analytics</noscript><scriptsrc="http://www.forest53.com/stat/mystat.asp?siteid=1"type="text/javascript"></script><noscript>stat.</noscript></body></html><scriptlanguage="Javascript">varnow=newDate();document.write("</noscript>
运转代码复制代码另存代码[code][/code]</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:22:31
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-9 20:31:48