网站首页 健康小知识 母婴教育 起名 运动知识 职场理财 情感生活 绿色生活 游戏数码 美容 特色美食 爱好
当前位置:酷知知识帮 > 游戏数码 > 电脑

HTML和css怎样制作横排导航条,菜单

栏目: 电脑 / 发布于: / 人气:1.84W

很多小伙伴学习了一段时间的HTML和css,就想自己动手试试制作导航条菜单,不过却没有思路,今天小编我就来分享一下HTML和css制作导航条的实例,大家可以参考参考。

操作方法

(01)如图,制作导航条菜单一般是用一个div嵌套ul和li标签,然后li里面有a标签。

HTML和css怎样制作横排导航条,菜单

(02)布局做好之后,开始写导航条的样式,如图,先清除导航条的margin和padding。

HTML和css怎样制作横排导航条,菜单 第2张

(03)然后定位导航条的div,这里我就用绝对定位来居中,如果你有其他导航条居中方法可以忽略这一条。

HTML和css怎样制作横排导航条,菜单 第3张

(04)然后设置导航条的li左浮动,并且去掉li前面的圆点,让导航条更好看。

HTML和css怎样制作横排导航条,菜单 第4张

(05)然后设置导航条的a标签转块级,以及导航条菜单的宽高,文字颜色,水平垂直居中和背景色以及去掉a标签的下划线。

HTML和css怎样制作横排导航条,菜单 第5张

(06)接着设置鼠标经过导航条菜单变色即可。

HTML和css怎样制作横排导航条,菜单 第6张

(07)最后,一个完美的导航条菜单就完成了,简直是太简单了。

HTML和css怎样制作横排导航条,菜单 第7张