css导航栏垂直display：block 水平 display:inline

亦凉 2021-09-15 06:24 360阅读 0赞

## 导航栏=链接列表 ##

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

列表中删除边距和填充：

list-style-type:none;  
margin:0;  
padding:0;

## 垂直导航条实例 ##

ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    width: 200px;  
    background-color: \#f1f1f1;  
\}  
   
li a \{  
    display: block;  
    color: \#000;  
    padding: 8px 16px;  
    text-decoration: none;  
\}  
   
/\* 鼠标移动到选项上修改背景颜色 \*/  
li a:hover \{  
    background-color: \#555;  
    color: white;  
\}  
</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>

![70][]

## 激活/当前导航条实例 ##

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：

可以修改上面的部分代码

![70 1][]

![70 2][]

![70 3][]

ul \{   
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    width: 200px;  
    background-color: \#f1f1f1;  
    border: 1px solid \#555;  
\}  
  
  
li a \{   
    display: block;  
    color: \#000;  
    padding: 8px 16px;  
    text-decoration: none;  
\}  
  
  
li \{   
    text-align: center;  
    border-bottom: 1px solid \#555;  
\}  
  
  
li:last-child \{   
    border-bottom: none;  
\}  
  
  
li a.active \{   
    background-color: \#4CAF50;  
    color: white;  
\}  
  
  
li a:hover:not(.active) \{   
    background-color: \#555;  
    color: white;  
\}  
</style>  
</head>  
<body>  
  
  
<h2>垂直导航条</h2>  
<p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>  
  
  
<ul>  
  <li><a class="active" href="\#home">主页</a></li>  
  <li><a href="\#news">新闻</a></li>  
  <li><a href="\#contact">联系</a></li>  
  <li><a href="\#about">关于</a></li>

</ul>

![70 4][]

body \{   
    margin: 0;  
\}  
  
  
ul \{   
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    width: 25%;  
    background-color: \#f1f1f1;  
    position: fixed;  
    height: 100%;  
    overflow: auto;  
\}  
  
  
li a \{   
    display: block;  
    color: \#000;  
    padding: 8px 16px;  
    text-decoration: none;  
\}  
  
  
li a.active \{   
    background-color: \#4CAF50;  
    color: white;  
\}  
  
  
li a:hover:not(.active) \{   
    background-color: \#555;  
    color: white;  
\}  
</style>  
</head>  
<body>  
  
  
<ul>  
  <li><a class="active" href="\#home">主页</a></li>  
  <li><a href="\#news">新闻</a></li>  
  <li><a href="\#contact">联系</a></li>  
  <li><a href="\#about">关于</a></li>  
</ul>  
  
  
<div style="margin-left:25%;padding:1px 16px;height:1000px;">  
  <h2>Fixed Full-height Side Nav</h2>  
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>  
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>  
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>  
  <p>Some text..</p>  
  <p>Some text..</p>  
  <p>Some text..</p>  
  <p>Some text..</p>  
  <p>Some text..</p>  
  <p>Some text..</p>  
  <p>Some text..</p>

</div>

![70 5][]

\-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

水平导航栏

## 浮动列表项 ##

有两种方法创建横向导航栏。使用**内联(inline)**或**浮动(float)**的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

ul  
\{  
list-style-type:none;  
margin:0;  
padding:0;  
padding-top:6px;  
padding-bottom:6px;  
\}  
li  
\{  
display:inline;  
\}  
a:link,a:visited  
\{  
font-weight:bold;  
color:\#FFFFFF;  
background-color:\#98bf21;  
text-align:center;  
padding:6px;  
text-decoration:none;  
text-transform:uppercase;  
\}  
a:hover,a:active  
\{  
background-color:\#7A991A;  
\}  
  
  
</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>  
  
  
<p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>

</body>

![70 6][]

## 浮动列表项 ##

ul  
\{  
list-style-type:none;  
margin:0;  
padding:0;  
overflow:hidden;  
\}  
li  
\{  
float:left;  
\}  
a  
\{  
display:block;  
width:60px;  
background-color:\#dddddd;  
\}  
</style>  
</head>  
  
  
<body>  
<ul>  
<li><a href="\#home">Home</a></li>  
<li><a href="\#news">News</a></li>  
<li><a href="\#contact">Contact</a></li>  
<li><a href="\#about">About</a></li>  
</ul>  
  
  
<p><b>注意:</b> 如果 !DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>  
  
  
<p>背景颜色添加到链接中显示链接的区域。整个链接区域是可点击的,不仅仅是文本。</p>

<p><b>注意:</b> overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。.</p>

![70 7][]

实例解析：

*  float:left - 使用浮动块元素的幻灯片彼此相邻
 *  display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
 *  width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    background-color: \#333;  
\}  
  
  
li \{  
    float: left;  
\}  
  
  
li a \{  
    display: block;  
    color: white;  
    text-align: center;  
    padding: 14px 16px;  
    text-decoration: none;  
\}  
  
  
li a:hover \{  
    background-color: \#111;  
\}  
</style>  
</head>  
<body>  
  
  
<ul>  
  <li><a class="active" href="\#home">主页</a></li>  
  <li><a href="\#news">新闻</a></li>  
  <li><a href="\#contact">联系</a></li>  
  <li><a href="\#about">关于</a></li>

</ul>

![70 8][]

### 激活/当前导航条实例 ###

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：

![70 9][]

### 链接右对齐 ###

将导航条最右边的选项设置右对齐 (float:right;)：

![70 10][]

![70 11][]

增加分割线

<li> 通过 border-right 样式来添加分割线:

border-right:1px solid \#bbb;

固定导航栏

body \{margin:0;\}  
  
  
ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    background-color: \#333;  
    position: fixed;  
    top: 0;  
    width: 100%;  
\}  
  
  
li \{  
    float: left;  
\}  
  
  
li a \{  
    display: block;  
    color: white;  
    text-align: center;  
    padding: 14px 16px;  
    text-decoration: none;  
\}  
  
  
li a:hover:not(.active) \{  
    background-color: \#111;  
\}  
  
  
.active \{  
    background-color: \#4CAF50;  
\}  
</style>  
</head>  
<body>  
  
  
<ul>  
  <li><a class="active" href="\#home">主页</a></li>  
  <li><a href="\#news">新闻</a></li>  
  <li><a href="\#contact">联系</a></li>  
  <li><a href="\#about">关于</a></li>  
</ul>  
  
  
<div style="padding:20px;margin-top:30px;background-color:\#1abc9c;height:1500px;">  
<h1>Fixed Top Navigation Bar</h1>  
<h2>Scroll this page to see the effect</h2>  
<h2>The navigation bar will stay at the top of the page while scrolling</h2>  
  
  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>  
<p>Some text some text some text some text..</p>

</div>

![70 12][]

导航栏在底部只需要改变 ul中的  top改为bottom

ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    border: 1px solid \#e7e7e7;  
    background-color: \#f3f3f3;  
\}  
  
  
li \{  
    float: left;  
\}  
  
  
li a \{  
    display: block;  
    color: \#666;  
    text-align: center;  
    padding: 14px 16px;  
    text-decoration: none;  
\}  
  
  
li a:hover:not(.active) \{  
    background-color: \#ddd;  
\}  
  
  
li a.active \{  
    color: white;  
    background-color: \#4CAF50;  
\}  
</style>  
</head>  
<body>  
  
  
<ul>  
  <li><a class="active" href="\#home">主页</a></li>  
  <li><a href="\#news">新闻</a></li>  
  <li><a href="\#contact">联系</a></li>  
  <li><a href="\#about">关于</a></li>

</ul>

![70 13][]

[70]: /images/20210813/fc0eafb364ea44c59bad71028a33d936.png
[70 1]: /images/20210813/78531028f32349d89ff69038b66c595c.png
[70 2]: /images/20210813/6b365f665a064d7b9bc18214c5099849.png
[70 3]: /images/20210813/9ddb6dccd32c428fa5f6a92fb34b5288.png
[70 4]: /images/20210813/0159c106595b45b49fd1ff59af96b279.png
[70 5]: /images/20210813/6f28b8a19b744cca9206a48de047fb88.png
[70 6]: /images/20210813/2c4d12f0d8d340a0beb598f3893206f4.png
[70 7]: /images/20210813/8489ffb0b61a42888b233a5d662af200.png
[70 8]: /images/20210813/9b1e0a2acfdd45faae4835f842200816.png
[70 9]: /images/20210813/141712feb44d46fa9ab89166e626125e.png
[70 10]: /images/20210813/d9d3e14efe1a41129b58334cc9ab09a0.png
[70 11]: /images/20210813/47a9208b71a44c4a9c4b60a8e53ea221.png
[70 12]: /images/20210813/06ae42192318496f89cbd89b73d52288.png
[70 13]: /images/20210813/38da3487e4b44e64a4d9198b4dc3ce0a.png