怎样用CSS实现双语导航菜单

DIV+CSS 21NN 1年前 (2018-05-24) 55次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]
当前位置 :| 建站学>网页设计>css设计教程> 怎样用CSS实现双语导航菜单

 建站教程导航

网站策划
  • 建站理念与思路
  • 确定网站主题
  • 网站内容规划
  • 网站标题,关键词和描述
  • 网站的风格和创意
  • 建站心得与技术巧门
  • 用户体验
建站基础
  • 网站域名
  • 网站空间
  • 提交网站备案
  • FTP工具下载与使用
网页设计与设计
  • 色彩原理与网页配色
  • 网页设计
     · fireworks(教程);
     · photoshop(教程)
     · flash(教程)
     · 素材(下载)
  • 网页设计
     · Dreamvever(教程)
     · HTML(教程)
     · XHTML(教程)
     · DIV+CSS(教程)
  • 网页特效
网站功能开发
  • 开源系统建站
     · 源码
     · 模板
     · 教程
  • WEB常用编程语言
     · ASP(交流)
     · PHP(教程)
     · asp.net
     · JSP
     · XML/XSLT
     · javascript(教程)
     · Ajax(教程)
     · jQuery教程
  • WEB常用数据库
     · 数据库综合
     · MSSQL SERVER
     · MYSQL
     · oracle
网站维护与内容建设
  • 网站内容编辑
  • 网站内容采集
  • 服务器管理
     · Web服务
     · Windows 教程
     · Linux教程
     · 集群、安全与缓存
网站推广与运营
  • SEM
  • SEO搜索引擎优化 交流>>
  • 网站综合推广
  • 网站数据统计与分析
  • 网站运营策略与技术巧门
网站赚钱
  • 网站赢利模式
  • 网络广告联盟
  • 淘宝客赚钱
  • Google adsense赚钱

怎样用CSS实现双语导航菜单

时间:2011-02-12
相关文章:
  • HTML代码技术巧门:HTML注释表达式判断IE版本
  • CSS网页设计技术巧门:图片的自适应居中和兼容处
  • css3设计网页实例:点击切换不同的CSS列表
  • css-sprite适用的条件:对css-sprite的理解
  • CSS3实例资源收集:11个CSS3开发实用工具
  • 从四个方面谈谈Web标准的价值所在
  • 控制网页文件大小通过精简CSS实现
  • css的语法
  • 怎样插入CSS样式表
  • 什么是css
  • 本教程是一个完全用CSS实现的中英文双语导航菜单,无脚本和图片,初始时,菜单语言是英文,当鼠标悬停在菜单上时,其变成中文,当然你也可以反过来做。
    实现原理:
    XHTML

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

    .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;
    }
    链接的属性是相对定位,那在此标签里的元素可将其作为参照点。 在 span 元素里的中文因其设定了不可见,所以在初始状态时,只能显示英文。而当鼠标悬停在菜单上时, span 元素里的设定变为可见,Z轴为99 ,覆盖在英文上面,从而实现了语言文字的转换。
    缺点:因为中英文字的长度关系,不能实现自适应宽度,只能固定宽度。
    最终效果
    运行代码框
    完全用CSS实现的中英文双语导航菜单


    本文:怎样用CSS实现双语导航菜单 本文链接:https://www.21nn.cn/biancheng/divcss/20093.html 本站所以图片、文章仅限用于学习和研究目的; 不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关。 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如有侵权请邮件与我们联系处理。i@ki4.cn
    喜欢 (0)
    [1353713598@qq.com]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址