使用html和css制作水平导航栏nav

全栈程序员-站长 • 2022年5月26日下午7:40 • 未分类 • 阅读 46

大家好，又见面了，我是你们的朋友全栈君。

使用html和css制作水平导航栏nav的方法及其效果：
1、li设置float:left;
（1）代码片段：

...
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
            margin:100px 50px;/*margin:100px auto无效,不能使ul左右居中*/
            text-align:center;
            font-size:14px;
        }
        li{
            float:left;/*改动的地方*/
            width:80px;
            padding:10px;
            background-color:#ff9137;
        }
        a:link,a:visited,a:hover,a:active{
            color:#fff;
            text-decoration:none;
        }
        a{
            display:block;/*整体变为可点击区域，而不只是字*/
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>
...

（2）呈现效果：
li{float:left;}
（3）备注：
①可对ul设置margin，但是设置为margin:100px auto时无法让ul居中
②ul所占高度为0。
③可对li设置width，自由调节宽度。
④可对li设置margin，使li之间有空白。
⑤可对a设置display:block；使整体变成可点击区域。
⑥如果想让链接有相同的大小，就必须用浮动，不能用display:inline;

2、li设置display:inline-block;
（1）代码片段：

...
<style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
            margin:100px;
            text-align:center;
            font-size:14px;
        }
        li{
            display:inline-block;/*改动的地方*/
            width:80px;
            padding:10px;
            background-color:#ff9137;
        }
        a:link,a:visited,a:hover,a:active{
            color:#fff;
            text-decoration:none;
        }
        a{
            display:block;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>
...

（2）呈现效果：
li{display:inline-block;}
（3）备注：
①对ul设置margin:100px auto；可让ul左右居中。
②即使li没有margin，各个li之间还是会有空白。
（aSuncat-20190809：可对父元素font-size设置0，子元素font-size设置成正常的，来消除空白）
③可对a设置display:block;使整体变成可点击区域。

3、li设置display:inline;
（1）代码片段：

...
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
            margin:100px;/*margin:100px auto;可让ul左右居中*/
            text-align:center;
            font-size:50px;
        }
        li{
            display:inline;/*改动的地方*/
            padding:10px;
            background-color:#ff9137;
        }
        a:link,a:visited,a:hover,a:active{
            color:#fff;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>
...

（2）呈现效果：
li{display:inline}
（3）备注：
①可对ul设置margin：100px auto，可使ul左右居中。
②即使li没有margin，各个li之间还是会有空白。
③不能对li设置width，即无法限定宽度。
④不能对a设置display:block;a会溢出，达不到我们想到的效果。
呈现效果如下：
a{display:block}的效果

4、li设置position:absolute;
（1）代码片段：

...
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
            margin:100px 50px;
            text-align:center;
            font-size:14px;
            position:relative;
        }
        li{
            position:absolute;/*改动的地方*/
            top:0;
            width:80px;
            padding:10px;
            background-color:#ff9137;

        }
        .li1{
           left:0;
        }
        .li2{
            left:80px;
        }
        .li3{
            left:160px;
        }
        .li4{
            left:240px;
        }
        a:link,a:visited,a:hover,a:active{
            color:#fff;
            text-decoration:none;
        }
        a{
            display:block;/*整体变为可点击区域，而不只是字*/
        }
    </style>
</head>
<body>
<ul>
    <li class="li1"><a href="#">Home</a></li>
    <li class="li2"><a href="#">News</a></li>
    <li class="li3"><a href="#">Contact</a></li>
    <li class="li4"><a href="#">About</a></li>
</ul>
</body>
...

（2）呈现效果：
li{position:absolute;}
（3）备注：
①对ul设置position:relative，便于对li设置position;
②对li设置position:absolute; top:0;
③对不同li设置left ;这样可以让li在不同的位置显示出来，而不是全部堆叠在一起。
④最不推荐这种方法，得给每个li一个left，比较麻烦。