在自学网页设计路上:[2]如何制作简单导航栏
1、制作导航栏的一般思想是通过无序标签ul来实现的,由li来加入各个栏目,加入超链接,同时可以在其中加入ID标签,方便下步操作。
![在自学网页设计路上:[2]如何制作简单导航栏](https://exp-picture.cdn.bcebos.com/ed792abb19efa25fe5bab0ce59828689a0463b04.jpg)
2、通过外链样式表导入基本的CSS代码,可以实现导航栏初步效果
![在自学网页设计路上:[2]如何制作简单导航栏](https://exp-picture.cdn.bcebos.com/023cff37c97622bc876bbdd2a05fd54604962804.jpg)
3、通过padding内补白拉开距离。在这里也可以使用margin做出距离,但是margin有时候在计算中会出现叠加现象。所以个人习惯使用padding
![在自学网页设计路上:[2]如何制作简单导航栏](https://exp-picture.cdn.bcebos.com/340e4eb8b43ea8db5be58887189c2cf7deb21604.jpg)
4、然后使用伪类实现两个效果:a、去掉超链接下划线;b、鼠标经过变换颜色。应注意颜色的取值应该接近但有明暗区别。
![在自学网页设计路上:[2]如何制作简单导航栏](https://exp-picture.cdn.bcebos.com/cfadcdd96975f2c4f0362bf68f0148fe1f420604.jpg)