图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.
网友评论