部分初学者在写导航时的迷惑

图1
图2
图3

要实现的功能:当鼠标放在首页和home所在的容器上的时候,字体颜色为蓝色,下边出现蓝色的3px的实心边框。

1.初学者在刚开始学习写导航的时候,都会用ul li来部署导航,但是问题来了,究竟是用li标签包着a标签呢?还是用a标签包着li标签呢?答案当然是后者了,当然,前者也是可以完成相应的功能的,但是在后期可能会出现想象不到的问题。

2.接下来我们要考虑的是当鼠标放到容器上的时候,是用a来实现3px的下边框还是用li来实现。

       (1)给li加下边框,来实现相应的功能,发现加上边框之后,他会是一个小梯形,不是我们想要的结果。

       (2)给a加下边框,出现一个3px的蓝色下边框,符合我们的要求。

3.作了以上工作之后,文本首页和home到四边的距离可以用padding来实现,在写代码的过程中,要给a标签加一个display:inline-block 这样a标签中的文本也可以随着hover发生颜色的变化。但是,会出现一个小bug,如图3所示,要想解决这个小bug,需要把它的父元素加上font-size:0;这样空隙就解决了,但是你会发现就连子元素上的文本也都没有了,这时需要给子元素加上font-size:16px;如图2,至此,这个导航小功能就完成了。


2.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,153评论 0 66
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,677评论 32 459
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,416评论 1 41
  • 坟前花落君知否? 心比天高。 路比山遥, 行舟不过奈何桥。 三更归梦三更后, 梦里眉稍。 梦醒蓬蒿, 一字一句入骨...
    野渡ing阅读 243评论 2 2