HTML,如何制作导航栏?

在用html做一个网页时,首先需要处理的是导航栏了。怎样制作一个导航栏?以前的做法基本都是用table来做,现在我们用无序列表ul来做,下面一起来看下。

操作方法

  • 01

    首先我们写html代码,就是用 ul,li无序列表来放置我们的菜单项,代码如图。

  • 02

    运行目前的代码,可以看到是一个比较丑陋的导航条。

  • 03

    添加样式,让导航栏的每一栏横向排列,而不是竖向排列。要横向排列,只需要为li添加样式:display: inline-block;就行了,然后用padding样式为每一项添加一些间距,代码如图。

  • 04

    继续美化导航项,为链接a添加样式,主要是添加背景色background-color,和加一些间距padding,代码如图

  • 05

    先运行页面,看下现在的效果。

  • 06

    接着为当前菜单的页面添加样式,

  • 07

    再为鼠标经过菜单项时添加hover样式。代码如图,在鼠标经过菜单项时,为菜单项添加了投影效果,并改变了字体颜色。

  • 08

    我们的导航菜单基本完成了,看下效果,还是不错的。
    (如果配色更合理点,就更完美了,这个配色需要有美工功底了:)

  • End
  • 发表于 2017-10-16 00:00
  • 阅读 ( 556 )
  • 分类:电脑网络

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具