Perhaps the simplest solution to creating a CSS style text navigation bar is to put all links in one line of text. This method looks reasonable and intuitive. But the problem is that it is difficult to control the gaps between links and between the front and back of links by placing all links in one line of text. Therefore, in order to prevent all links from being crowded together, you usually have to insert some blank characters or non-wrap characters to separate them, so that these words are separated and not mixed together.
Now, we can use ul and li tags to identify links as unordered Lists. Then apply the CSS style to control it and display it in the container as expected. The use of unordered lists for navigation bar does not seem intuitive, because we are used to using unordered lists as a list project pushed up vertically, each with a pre-configured list mark. This does not seem to conform to the horizontal direction of the navigation bar. However, the list logical structure of an independent list item set can be applied to links in the navigation bar. CSS rules allow you to forcibly replace the default representation of a list item, to remove them and arrange the list items in the container in the horizontal direction, rather than the top-down rules. Now let's take a look at the instance and create a horizontal navigation menu for CSS styles and XHTML labels based on the unordered list.
CSS code
<Div id = "nav">
<Ul>
<Li> <a href = "http://www.52css.com/"> HomePage </a> </li>
<Li> <a href = "http://www.52css.com/"> Div + CSS tutorial </a> </li>
<Li> <a href = "http://www.52css.com/"> CSS layout instance </a> </li>
<Li> <a href = "http://www.52css.com/"> CSS2.0 tutorial </a> </li>
<Li> <a href = "http://www.52css.com/"> CSS online manual </a> </li>
<Li> <a href = "http://www.52css.com/"> Web standards </a> </li>
<Li> <a href = "http://www.52css.com/"> XHTML tutorial </a> </li>
</Ul>
</Div>
Let's take a look at the CSS code:
CSS code
# Nav {
Height: 30px;
Width: 100%;
Background-color: # c00;
}
# Nav ul {
Margin: 0 0 0 30px;
Padding: 0px;
Font-size: 12px;
Color: # FFF;
Line-height: 30px;
Whitewhite-space: nowrap;
}
# Nav li {
List-style-type: none;
Display: inline;
}
# Nav li {
Text-decoration: none;
Font-family: Arial, Helvetica, sans-serif;
Padding: 7px 10px;
Color: # FFF;
}
# Nav li a: hover {
Color: # ff0;
Background-color: # f00;
}
Let's take a look at the complete HTML of the above Code and copy it to an HTML page. You can see the effect:
XML/HTML code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> www.52css.com </title>
<Style type = "text/css">
<! --
# Nav {
Height: 30px;
Width: 100%;
Background-color: # c00;
}
# Nav ul {
Margin: 0 0 0 30px;
Padding: 0px;
Font-size: 12px;
Color: # FFF;
Line-height: 30px;
White-space: nowrap;
}
# Nav li {
List-style-type: none;
Display: inline;
}
# Nav li {
Text-decoration: none;
Font-family: Arial, Helvetica, sans-serif;
Padding: 7px 10px;
Color: # FFF;
}
# Nav li a: hover {
Color: # ff0;
Background-color: # f00;
}
-->
</Style>
</Head>
<Body>
<Div id = "nav">
<Ul>
<Li> <a href = "http://www.52css.com/"> HomePage </a> </li>
<Li> <a href = "http://www.52css.com/"> Div + CSS tutorial </a> </li>
<Li> <a href = "http://www.52css.com/"> CSS layout instance </a> </li>
<Li> <a href = "http://www.52css.com/"> CSS2.0 tutorial </a> </li>
<Li> <a href = "http://www.52css.com/"> CSS online manual </a> </li>
<Li> <a href = "http://www.52css.com/"> Web standards </a> </li>
<Li> <a href = "http://www.52css.com/"> XHTML tutorial </a> </li>
</Ul>
</Div>
</Body>
</Html>
Next we will parse the above Code:
The xhtml code first defines a container div id = "nav ". This container is used to place the content of the horizontal navigation menu of this unordered list, but some people think that this container is redundant and define ul id = "nav" directly. We do not recommend that you do this. You need to know that our site is scalable. We need to leave enough room for future expansion. If our navigation style design is more complex, only ul cannot meet your needs. The definition of such a container is more in line with our coding habits.
# Nav defines the width and height of the window and the background color. # Nav ul includes the margin and padding declarations, font and color declarations. Line-height: 30px; is a very important definition. If the line height definition is removed, vertical center of link text may be affected. White-space: nowrap; you may not understand what the function is. It defines that all texts are forcibly displayed in the same row until the text ends or br objects are encountered.
# List-style-type: none in nav li; Removes the default tag used by the list item. Make it more like plain text without the list tag. The display: inline statement allows the list items to float from left to right on the page, instead of displaying each item in a separate row, from top to bottom. These two statements are the key to implementing the unordered list navigation menu.
# Nav li a and # nav li a: hover defines the link style. The content will not be further discussed. The only thing to talk about is: padding: 7px 10px; it is used to control the gap between the link text. You can try to change the value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
