在用html做一个网页时 ， 首先需要处理的是导航栏了 。 怎样制作一个导航栏？以前的做法基本都是用table来做 ， 现在我们用无序列表ul来做 ， 下面一起来看下 。 操作方法 01 首先我们写html代码 ， 就是用 ul ， li无序列表来放置我们的菜单项 ， 代码如图 。
文章插图
02 运行目前的代码 ， 可以看到是一个比较丑陋的导航条 。
文章插图
03 添加样式 ， 让导航栏的每一栏横向排列 ， 而不是竖向排列 。 要横向排列 ， 只需要为li添加样式：display: inline-block;就行了 ， 然后用padding样式为每一项添加一些间距 ， 代码如图 。
文章插图
04 继续美化导航项 ， 为链接a添加样式 ， 主要是添加背景色background-color ， 和加一些间距padding ， 代码如图
文章插图
05 先运行页面 ， 看下现在的效果 。
文章插图
06 接着为当前菜单的页面添加样式 ，
文章插图
07 再为鼠标经过菜单项时添加hover样式 。 代码如图 ， 在鼠标经过菜单项时 ， 为菜单项添加了投影效果 ， 并改变了字体颜色 。
文章插图
08 【HTML，如何制作导航栏？】我们的导航菜单基本完成了 ， 看下效果 ， 还是不错的 。
（如果配色更合理点 ， 就更完美了 ， 这个配色需要有美工功底了：）
文章插图
以上内容就是HTML ， 如何制作导航栏？的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 如何利用软件ps让原本扁平的卡通人物更加立体？
- 阿胶糕的制作方法与配料 阿胶糕的制作方法与配料比例
- 使用ps制作铅笔彩绘的方法
- 用photoshop制作表情包之熊猫表情：我不认识你
- Abaqus如何更改part的属性？
- 英伟达NVIDIA显卡如何安装驱动程序
- 怎么制作蜥蜴干皮效果背景图片
- 提高FPS 低配置如何流畅运行LOL
- 使用ps制作半调网边框的方法
- 如何设置计划任务每天定时关机