Create a navigation bar using CSS attributes. The Code consists of up to 30 lines and 30 lines of CSS.

Create a navigation bar using CSS attributes. The Code consists of up to 30 lines and 30 lines of CSS.

In this article, Xiao Bian leads everyone to build a navigation bar using CSS technology. Through the creation of this navigation bar, we hope that you will have a general understanding of the CSS attributes learned in the previous articles and be able to use them flexibly.

Undertaking articles:Flexibly control the display of block-level elements in one row,CSSFloating attributes, it is easy to know the principle

Technical Level: elementary | suitable for beginners of front-end development.

If you are a beginner in front-end development, we strongly recommend that you follow the steps described in the article to do it yourself. There are not many steps, and the idea is simple. It cannot take too much time for everyone. If you do it yourself, you will surely get a lot.

I. navigation bar display:

Shows the effect of the navigation bar.

Navigation bar display

 

Web Front-end/html5 Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.

This effect mainly applies to the <ul> </ul> tag pair and <a> </a> tag pair.

The CSS attributes involved in the entire instance are as follows:

• Width

• Height

• Background-color

• List-style-type

• Display

• Float

• Margin

• Line-height

Ii. Page effects:

First, set a <div> container for the navigation bar and set the value of its id attribute to nav. This container is used to control the navigation bar position. The container width of the link bar should be set to 100%. Here, the height is set to 40px and the color is # a72f2e. The implementation code is as follows:

<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}

To display a navigation bar subject with a fixed width of PX in the container, create a <div> container inside the container to hold the real navigation bar code. We can set its class attribute to navContent. The width of the container is set to 1000px, the height is high as the height of # nav, and is horizontally centered inside the # nav container. The implementation code is as follows:

<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}

Next, write the entries in the navigation bar in the. navContent container. The navigation bar is implemented using the <ul> </ul> tag pair, and its navigation bar entries are written using the <li> </li> tag pair. Because the navigation bar needs to be clicked to jump to the page, the <a> </a> tag pair is used in <li> </li>.

Here, we need to note that <li> </li> indicates that the pair is a block-level element, and <a> </a> indicates that the pair is an inline element, therefore, you must mark <li> </li> on the package <a> </a>, do not use <a> </a> to mark the <li> </li> of the package.

Here, the "Homepage" and "website Introduction" of the navigation bar are used as examples. The following HTML code shows the entries in the navigation bar.

<Ul>
<Li> <a href = "index.html"> homepage </a> </li>
<Li> <a href = "#"> website overview </a> </li>
...
</Ul>

For more navigation bar entries, you can click <ul> mark to repeatedly write <li> </li> and <a> </a> code formats.

3. Compile CSS for the entire navigation barStyle:

The entire navigation bar is implemented by marking <ul> </ul>. Therefore, you need to mark <ul> </ul> to write CSS styles.

Because the list item in the unordered list has a small dot on the left side, you need to remove the bullets. Therefore, the CSS Code marked by <ul> </ul> is as follows:

#nav .navContent ul{
list-style-type:none;
}

4. Write CSS for navigation bar entriesStyle:

The navigation bar entries are implemented using the <li> </li> tag pair. Therefore, you need to write CSS styles for the <li> </li> tag pair.

Because the <li> </li> tag pair is a block-level element, even if the project symbol on the left is removed, all entries are displayed on an exclusive line, therefore, you need to display them in one row. This requires that all <li> </li> labels float to the left. The CSS code is as follows:

#nav .navContent ul li{
float:left;
}

5. Write CSS links in navigation bar entriesStyle:

The link in the navigation bar entries is implemented using the <a> </a> tag pair, so you need to edit the CSS style for the <a> </a> tag pair.

Because the <a> </a> flag pair is an inline element, you cannot set the width and height, and you cannot set the size for each navigation bar entry. Therefore, you need to convert the <a> </a> tag to a block-level element (display attribute), and then set the width and height (width and height attributes ).

With the width and height, the link text needs to be horizontally centered (text-align attribute) and vertically centered (line-height attribute) in the container.

Finally, remove the underline (text-decoration attribute) of the link and set the text color (color attribute) of the link ).

The CSS code linked to the navigation bar entry is as follows:

#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}

6. Compile the CSS when the cursor passes through the navigation bar entryStyle:

When you move your mouse over the navigation column, you should be able to jump even if you haven't touched the text part of the link. Therefore, you need to mark the CSS style when the <a> </a> cursor is written.

When you move the cursor over, you want the background color (background-color attribute) and text color to change.

The CSS code when the mouse goes through the link is as follows:

#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}

VII. Overall code:

So far, this simple navigation bar is fully implemented, and CSS uses about 30 lines of code as a whole. Shows the HTML code for implementing the navigation bar effect.

Web Front-end/html5 Learning Group: 250777811

Overall HTML code

Shows the CSS code that implements the effect of this navigation bar.

Web Front-end/html5 Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.