The production of the banner navigation bar, combined with CSS properties, code no more than 30 lines

This article, small series to lead you together to make a use of CSS technology to implement the navigation bar. Through the production of this navigation bar, I hope that you can learn the previous articles in the CSS properties can have a whole understanding, and can achieve the degree of flexibility to use.

To undertake the article: flexible control block-level elements in a row display,CSS Floating Properties, know the principle is very simple

Technical Level: Beginner | For the front-end development of beginners reading learning.

If you are a beginner of front-end development, it is strongly recommended to follow the steps in the article to do it yourself. The steps are not many, the idea is simple, cannot occupy everybody too much time, oneself does again, certainly will harvest many.

First, the navigation bar display:

Today we are going to do the navigation bar effect as shown.

Navigation Bar Show

Web Front End/HTML5 Learning Group: 250777811

Welcome to this public number → "web front-end edu" With the big guy to learn the front end! Welcome message to discuss together with the forwarding

This effect is mainly used by the <ul></ul> tag pair and the <a></a> tag pair are implemented together.

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

• Width

• Height

• Background-color

• List-style-type

• Display

• Float

• Margin

• Line-height

Second, achieve the page effect:

First set up a <div> container for the navigation bar and set the value of its ID property to NAV. This container is used to control the navigation bar's banner position. The width of the banner should be set to 100%, where the height is set to 40px and the color is #a72f2e. The implementation code looks like this:

<div id= "NAV" ></div>

#nav {

width:100%; height:40px;

Background-color: #a72f2e;

}

Because a fixed-width 1000px navigation bar body is displayed in the banner's container, a <div> container is created inside the container to hold the real navigation bar code. We value its Class property to Navcontent. The width of this container is set to 1000px, the height of the #nav is high, and is centered horizontally inside the #nav container. The implementation code looks like this:

<div class= "Navcontent" ></div>

#nav. navcontent{

width:1000px; height:40px;

margin:0 Auto;

}

Next, write the individual entries for the navigation bar inside 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 the page, the <a></a> tag pair is used inside <li></li>.

It is important to note that because the <li></li> tag pair is a block-level element, the,<a></a> tag pair is an inline element, so that the <li></li> tag pair package <a> </a> tag pairs, do not use <a></a> mark to package <li></li> tag pairs.

Here, for example, the navigation bar entry "Home" and "Introduction to the Web", the following HTML code shows the contents of the navigation bar entries.

<ul>

<li><a href= "index.html" > Home </a></li>

<li><a href= "#" > Website Introduction </a></li>

...

</ul>

More navigation bar entries are required, and you can repeat <li></li> and <a></a> code formats within the <ul> tag pair.

third, the CSS to write the entire navigation bar Style:

The entire navigation bar is implemented using the <ul></ul> tag pair, so you need to write a CSS style for the <ul></ul> tag pair.

Because the bulleted list item has a small dot to the left of the list items, you need to remove the bullet. So the CSS code for the <ul></ul> tag pair looks like this:

#nav. Navcontent ul{

List-style-type:none;

}

iv. CSS for writing navigation bar entries Style:

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

Since the <li></li> tag pair is a block-level element, even if the left bullet is removed, all entries remain in their own row, so they need to be displayed in one line, which requires all <li></li> Marks the left float. The CSS code looks like this:

#nav. Navcontent ul li{

Float:left;

}

v. Writing a linked CSS in a navigation bar entry Style:

The links in the navigation bar entries are implemented using the <a></a> tag pair, so you need to write CSS styles for the <a></a> tag pair.

Because the <a></a> tag pairs are inline elements, you cannot set the width and height, and you cannot set the dimensions for each navigation bar entry. Therefore, you need to convert the <a></a> tag pair to a block-level element (the Display property), and then set the width and height (the Width property and the Heights property).

With width and height, you need to have the linked text centered horizontally (Text-align property) and vertically centered (Line-height property) in the container.

Finally, remove the underlined (Text-decoration property) of the link and set the text color (color property) of the link.

The CSS code that is linked in 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;

}

Vi. Writing CSS When the mouse passes the navigation bar entry Style:

When the mouse through the navigation column, even if you do not touch the text part of the link, you should be able to jump. So you need a CSS style for the <a></a> tag pair when you write the mouse pass.

When the mouse passes, you want the background color (Background-color property) and the text color (color property) to change.

The CSS code when the mouse is linked is as follows:

#nav. navcontent ul Li a:hover{

Background-color: #ff5857;

Color: #ffffff;

}

Seven, the whole code:

At this point, the simple navigation bar effect is fully implemented, the CSS overall use of about 30 lines of code. The HTML code that implements this navigation bar effect is shown in.

Web Front End/HTML5 Learning Group: 250777811

HTML overall Code

The CSS code that implements this navigation bar effect is shown.

Web Front End/HTML5 Learning Group: 250777811

Welcome to this public number → "web front-end edu" With the big guy to learn the front end! Welcome message to discuss together with the forwarding

The production of the banner navigation bar, combined with CSS properties, code no more than 30 lines