css导航栏_使用CSS的导航栏

系统管理员 2023-03-05 10:59 3阅读 0赞

css导航栏

## CSS | 导航栏 **(**CSS | Navigation Bar**)** ##

Developing websites is great but developing a user-friendly website is even greater. So how does one design a user-friendly website? What tools to use? Well, there are many tools to mention which are quite helpful in making a website user-friendly. So let's discuss one such tool which is **Navigation Bar**.

开发网站很棒，但是开发用户友好的网站则更大。 那么，如何设计一个用户友好的网站呢？ 使用什么工具？ 好了，有很多工具值得一提，它们对使网站易于使用非常有帮助。 因此，让我们讨论一种这样的工具，即**Navigation Bar** 。

**Navigation Bar**, what is the first thought that comes into mind after listening to this term. Quite simply though, a menu option for navigating throughout that particular page or site. The **navigation bar** also lets people move from one page to another. The **navigation bar** works as a guide for the user to surf through the pages.

**导航栏** ，听完该术语后想到的第一个想法是什么。 虽然很简单，但是菜单选项用于浏览特定页面或站点。 **导航栏**还允许人们从一页移动到另一页。 **导航栏**可作为用户浏览页面的指南。

The **navigation bar** is created with the help of menu items taken together. Like an ordered list or unordered list, these list items can be arranged into various positions like horizontally, vertically, right-aligned, etc. Therefore one should be clear in mind about the type of **navigation bar** he/she wants to use on the webpage.

**导航栏**是在菜单项结合在一起的情况下创建的。 就像有序列表或无序列表一样，这些列表项可以按水平，垂直，右对齐等各种位置排列。因此，应该牢记他/她想在网页上使用的**导航栏**的类型。

Besides being aware of the **navigation bar**, one should also make sure that the links provided in the navigation bar are correct otherwise the user may access the wrong page without even being aware and that creates problems.

除了知道**导航栏外** ，还应确保导航栏中提供的链接正确无误，否则用户可能会访问错误的页面而根本不知道并造成问题。

let's talk about some type of navigation bars in detail,

让我们详细讨论一些类型的导航栏，

1.  Vertical navigation bar
    
    垂直导航栏
2.  Horizontal navigation bar
    
    水平导航栏
3.  Fixed navigation bar
    
    固定的导航栏

### 1)垂直导航栏 **(**1) Vertical Navigation Bar**)** ###

The **vertical navigation bar** is used to display the menu options vertically. You can use the display property and set it to block. By using display property and setting it to block means that the entire block consisting of your menu item will become clickable. You can also set the width of these blocks as well.

**垂直导航栏**用于垂直显示菜单选项。 您可以使用display属性并将其设置为block。 通过使用display属性并将其设置为block意味着包含菜单项的整个块将变为可单击。 您也可以设置这些块的宽度。

**CSS Syntax:**

**CSS语法：**

Element
        {
            display: block;
            width: 50px;
        }

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            li a {
        
                display: block;
                width: 90px;
                background-color: #dddddd;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li><a href="#student">student</a></li>
            <li><a href="#staff">staff</a></li>
            <li><a href="#dean">dean</a></li>
        </ul>
    </body>
    
    </html>

**Output**

**输出量**

![Navigation bar using CSS | Example 1][Navigation bar using CSS _ Example 1]

In the above example, displaying the links as block elements makes the whole link area clickable.

在上面的示例中，将链接显示为块元素使整个链接区域可单击。

### 2)水平导航栏 **(**2) Horizontal Navigation Bar**)** ###

In a horizontal navigation bar as the name suggests the elements can be arranged horizontally. Now, this can be done in two ways, first, using inline property and second is by using the floating property.

顾名思义，在水平导航栏中可以将元素水平放置。 现在，这可以通过两种方式完成，一种是使用内联属性，第二种是使用float属性。

**1) inline**

**1)内联**

In **"inline property"** the elements are by default block items, the line break is removed from before and after of each list item so that they can be shown in one line.

默认情况下，在**“内联属性”中** ，元素是块项，从每个列表项的前后删除换行符，以便可以将它们显示在一行中。

**Syntax for inline:**

**内联的语法：**

Element{
            display: inline;
        }

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            li {
        
                display: inline;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li><a href="#student">student</a></li>
            <li><a href="#staff">staff</a></li>
            <li><a href="#dean">dean</a></li>
        </ul>
    </body>
    
    </html>

**Output**

**输出量**

![Navigation bar using CSS | Example 2][Navigation bar using CSS _ Example 2]

In the above example, the elements are displayed in a single line.

在上面的示例中，元素显示在一行中。

**2) floating:**

**2)浮动：**

**"floating property"** is used to adjust elements next to each other.

**“浮动属性”**用于调整彼此相邻的元素。

**Syntax for floating:**

**浮动语法：**

element{
            float: left; 
        }

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            li {
        
                display: block;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li><a href="#student">student</a></li>
            <li><a href="#staff">staff</a></li>
            <li><a href="#dean">dean</a></li>
        </ul>
    </body>
    
    </html>

**Output**

**输出量**

![Navigation bar using CSS | Example 3][Navigation bar using CSS _ Example 3]

In the above example, the elements are displayed next to each other without any space.

在上面的示例中，元素彼此相邻显示，没有任何空格。

### 3)固定位置导航栏 **(**3) Fixed position navigation bar**)** ###

These types of **navigation bar stay fixed to their positions** be it top or bottom even when the user scrolls down or up the page.

即使用户向下或向上滚动页面，这些类型的**导航栏也将固定在**顶部或底部。

**CSS Syntax:**

**CSS语法：**

Element{
            // for fixed top
            position: fixed; 
            // To fix the bar at the top
            top: 0;
            // for fixed bottom
            // To fix the bar at the bottom
            bottom: 0;
        }

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .topnav {
        
                overflow: hidden;
                background-color: #333;
            }
            
            .topnav a {
        
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }
            
            .topnav a:hover {
        
                background-color: #ddd;
                color: black;
            }
        </style>
    </head>
    
    <body>
        <div class="topnav">
            <a class="active" href="#student">student</a>
            <a href="#staff">staff</a>
            <a href="#dean">dean</a>
        </div>
        <div style="padding-left:16px">
            <p>Some content..</p>
        </div>
    </body>
    
    </html>

**Output**

**输出量**

![Navigation bar using CSS | Example 4][Navigation bar using CSS _ Example 4]

In the above example, the navigation stays at top even when we scroll the page.

在上面的示例中，即使我们滚动页面，导航也位于顶部。

> 翻译自: [https://www.includehelp.com/code-snippets/navigation-bar-using-css.aspx][https_www.includehelp.com_code-snippets_navigation-bar-using-css.aspx]

css导航栏

[Navigation bar using CSS _ Example 1]: /images/20230208/6571692f2167462cb848f62b90e2406a.png
[Navigation bar using CSS _ Example 2]: /images/20230208/d6bb858acc5e465a85904ca269e35ac3.png
[Navigation bar using CSS _ Example 3]: /images/20230208/6ba60b1d24e5420fb1e746698c38e2ee.png
[Navigation bar using CSS _ Example 4]: /images/20230208/38a3f32841b44b2c9f355ab65906124b.png
[https_www.includehelp.com_code-snippets_navigation-bar-using-css.aspx]: https://www.includehelp.com/code-snippets/navigation-bar-using-css.aspx