Create css horizontal navigation menu using ul and li tags-CSS Tutorial-php.cn

Create css horizontal navigation menu using ul and li tags

高洛峰

Release： 2016-11-24 11:45:49

Original

2258 people have browsed it

Perhaps the simplest solution to create a CSS-style text navigation bar is to put all links in a line of text. This method seems reasonable and intuitive. But the problem is that putting all links in one line of text makes it difficult to control the white space between links and before and after them. So, in order to avoid all the links being crowded together, you usually end up having to insert something or a non-newline whitespace character as a separator to keep the text separated and not mixed together.

Our normal approach now is to use ul and li tags to identify links as an unordered list. Then apply CSS styles to control it and display it in the container as we expected. Using an unordered list for a navigation bar seems counterintuitive, because we are used to thinking of an unordered list as a list item pushed up vertically, with a list preset mark placed in front of each one. This seems inconsistent with the horizontal orientation of the navigation bar. But the logical structure of a list as a collection of independent list items can be applied to links in the navigation bar; and CSS rules allow you to force the default presentation of list items to eliminate them and arrange the list items to be arranged horizontally within the container. , rather than top-down rules. Now let's take a look at an example to create a horizontal navigation menu with CSS styles and XHTML tags based on an unordered list.

CSS code

 <div id="nav">   
  <ul>   
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>   
</div>

Copy after login

Let’s take a look at this CSS code again:

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 a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}

Copy after login

Let’s take a look at the complete HTML of the above code, copy it and put it into an HTML page, everyone 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 a {   
    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.php1.cn/">     <li><a href="http://www.php1.cn/">CSS教程</a></li>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>  
</div>  
</body>  
</html>

Copy after login

Let’s analyze the above code:

The xhtml code first defines a container div id="nav". This container is used to place the content of this unordered list horizontal navigation menu, but some people think that this container is redundant and just define ul id="nav". We do not recommend that you do this. You must know that our site is scalable and we need to leave enough room for future expansion. If our navigation style is designed to be more complex, only UL will not meet our needs. Our definition of such a container is also more in line with our coding habits.

　 #nav defines the width, height and background color of the window. #nav ul contains margin and padding declarations, font and color declarations. line-height: 30px; is a very important definition. If the definition of line height is cancelled, the vertical centering of our link text may be affected. white-space: nowrap; Maybe you don't understand what it does. It defines that all text is forced to be displayed in the same line until the text ends or the br object is encountered.

　List-style-type: none in #nav li removes the default tag used by list items. Make it more like plain text without list markup. The display: inline; statement allows the list items to float from left to right on the page, rather than having each item displayed in a separate line and arranged from top to bottom. These two statements are the key to our implementation of the unordered list horizontal navigation menu.
　#nav li a and #nav li a:hover define the style of the link. I won’t go into details about the content. The only thing I want to talk about is: padding: 7px 10px; it is used to control the blank space between link text. You can try changing the value and try it out.