【网站建设】DreamweaverFrontPage/GoliveCSS/HTMLDOM/JSDiscuz!专区FlashFireworksDIV设计技巧

您现在的位置:首页 > 网络学院 > 网站建设 > CSS/HTML > 完全用CSS实现的中英文双语导航菜单网页陶吧CSS

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

来源: 作者: 日期:2006-08-11

【聚杰网CSS/HTML】完全用CSS实现的中英文双语导航菜单网页陶吧CSS


这是一个完全用CSS实现的中英文双语导航菜单,无脚本和图片,初始时,菜单语言是英文,当鼠标悬停在菜单上时,其变成中文,当然你也可以反过来做。

实现原理:

   XHTML

从上面代码可以看出,中文放在 span 标签里,关键是需要在初始时,使其的属性不可见。

   CSS

链接的属性是相对定位,那在此标签里的元素可将其作为参照点。 在 span 元素里的中文因其设定了不可见,所以在初始状态时,只能显示英文。而当鼠标悬停在菜单上时,

span 元素里的设定变为可见,Z轴为99 ,覆盖在英文上面,从而实现了语言文字的转换。缺点:因为中英文字的长度关系,不能实现自适应宽度,只能固定宽度。




评论   点击查看全部评论
您的评论参与,将为聚杰带来更大的动力!请不要吝啬!
快速回复
请使用文明语言让我们维护健康绿色网络环境!

匿名发表   验证码: