您的位置首页百科问答

html如何利用ul/li制作横向导航栏?css做导航

html如何利用ul/li制作横向导航栏?css做导航

的有关信息介绍如下:

html如何利用ul/li制作横向导航栏?css做导航

Dreamweaver制作横向的导航,怎么用ul li列表来制作呢?

新建一个html网页,在body中输入【

】。保存后刷新网页可以看到无序列表已经由第一项了。

在ul中复制两个【

  • 首页
  • 】,并把字分别修改成【简介】和【产品】。

    在head中添加【】,这样就可以去掉无序列表前面的原点了。

    因为是要做横向导航,所以要加入一个左浮动的代码【li{float: left;}】。保存后可以看到3个列表项已经水平排开了,但是文字都在一起,很难区分。

    定义a标签样式【a{width: 80px; height: 20px;padding: 10px 0;text-align: center; background: #d4d4d4;display: block;}】。可以看到文字有距离了,但是文字是蓝色的,并且有下划线;三个列表项中间还没有空隙。

    可以先添加一个右边距【margin-right: 5px;】,保存后可以看到,三个导航项已经有了一定的距离了。

    然后加入以下代码【 color: #000000; text-decoration: none;】,定义字体为黑色,下划线去掉。这样就像导航了把~

    最后我们还可以为导航项添加一个鼠标经过时换个颜色,这样更清晰【a:hover{

    background: #ff0000;color: #ffffff;}】。好啦,就是这么简单,大家都会了吗?