-第4章 变幻菜单

应用场景

这可以说是一个导航的减法变幻吧。
像一些中英文网上，当鼠标在菜单上的时候把菜单上的中文改变成英文。

知识点

负边距运用。

技巧

如果要实现鼠标在菜单上时把首页显示成Home，一般有两种写法：

方法一，写两个并列的标签。
当鼠标在 li 时显示有英文文字 首页 的标签。因为他们都是在同一个种元素 a 标签上，所以可能需要给两个 a 标签添加类名来识别，而且还需要添加再次 href 属性值。


  • 首页
    Home

    • 方法二，使用嵌套。(推荐)
    像这种写法因为 a 标签和 span 本就不同，所有可以直接用他们来区分。而且 span 是嵌套在 a 标签中的，所以只需要写一个 href 值。


  • 首页Home

    • 完整代码






    Document





    总结

    巧妙的运用了负边距，把 a 标签上移自身高度，而让下面的 span 标签显示在自身原来的位置。

    posted @ 2017-02-27 17:53  程序媛李李李李蕾  阅读(275)  评论(0)    收藏  举报