怎样用DIV+CSS制作的横排导航栏

2024-10-12 14:35:04

1、首先,书写一个蟠校盯昂div标签,并且在这个div标签添加一个类,类名可以自定义,这里我就把类名设置为.mynav。然后在div里面嵌套了ul,ul里面嵌套了li,li标签存放的是菜单的内容,这里我就设置5个菜单。

怎样用DIV+CSS制作的横排导航栏

3、然后我们要清除所有标签的margin和padding,所以要使用通配符*。

怎样用DIV+CSS制作的横排导航栏

5、这样就会得出如图所示的效果。

怎样用DIV+CSS制作的横排导航栏

7、这样菜单前面的小圆点就会消失不见了。

怎样用DIV+CSS制作的横排导航栏

9、这样菜单就会浮动起来,变成横排的了。

怎样用DIV+CSS制作的横排导航栏

11、这样,导航栏基本完成。

怎样用DIV+CSS制作的横排导航栏
猜你喜欢