要实现的功能:当鼠标放在首页和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.