Why use the UL Li layout site navigation bar? Use of the UL Li Layout website web page navigation necessity

The layout of all know the site navigation bar layout is very important, may be a navigation bar final layout effect can sometimes use the UL Li List label layout, sometimes without the UL Li layout, but directly in a div box directly put anchor text hyperlink column name, can also be achieved, see.

If you want to lay out such a simple navigation bar effect

such as the following code:

1, can use the UL Li Layout navigation bar

<ul> <li><a href="http://www.divcss5.com/"> Home </a> <li><a href="http://www.divcss5.com/html/">html Tutorials </a> <li><a href="http://www.divcss5.com/htmlrumen/">html Getting Started </a> <li><a href="http://www.divcss5.com/html5/"&GT;HTML5 Tutorials </a> <li><a href="http://www.divcss5.com/rumen/">css Tutorials </a> <li><a href="http://www.divcss5.com/cssrumen/">css Getting Started </a></ul>

2, can also not use the UL Li layout

　　

<divclass= "NAV" > <a href="http://www.divcss5.com/"> Home </a> <a href="http://www.divcss5.com/html/">html Tutorials </a> <a href="http://www.divcss5.com/htmlrumen/">html Getting Started </a> <a href="http://www.divcss5.com/html5/"&GT;HTML5 Tutorials </a> <a href="http://www.divcss5.com/rumen/">css Tutorials </a> <a href="http://www.divcss5.com/cssrumen/">css Getting Started </a> </div>

The above two layouts can achieve the same navigation bar layout effect, but DIVCSS5 recommended the use of UL Li Layout, even a few more UL Li tag code is no harm.

This is why (recommended ul Li)?

Do not consider the site optimization seo layout situation, DIVCSS5 is recommended to save the HTML code without the UL Li layout, but the general site to consider search engine ranking factors (SEO), at this time if not UL Li instead of directly in a box anchor text hyperlink column name, Although the amount of HTML code is reduced, but such a search engine is easy to think that there is a stack of keywords suspected (intentionally piling keywords easily by the search engine has the risk of lowering the right).

If you use the UL Li List label layout, this time the search engine is easy to identify as organized list-type content (more friendly to search engine spiders).

Combined with the above description, it is not difficult to see that sometimes in the div CSS page layout to consider SEO search engine optimization When the page layout appropriate use H1, H2, H3, H4, B, strong and other tags necessary, if in the HTML CSS layout of different HTML tags flexible use, May get unexpected results. Of course the use of different labels is enough, do not misuse and become counterproductive.

How to use CSS styles to make the UL Li List label layout display side by line without wrapping

Default UL li layout vertical column display

Here DIVCSS5 describes the use of two CSS styles to make the Li label layout side-by, one using CSS display, and the other using CSS float float.

First, use display to show Li side-by-TOP

CSS style words:

Display:inline

The specific css+div code is as follows

1. Do not wrap the CSS code horizontally:

li{Display:inline}

2. HTML code snippet:

<ul> <li><a href="http://www.divcss5.com/">divcss5</a></li > <li><a href="http://www.css5.com.cn/">css production </a></li> < Li><a href="http://www.divcss5.com/"

3. Case effect

Use display to make the Li layout appear side-by

Second, use float floating style to show Li side-TOP

　

li{float: left;}

1. Resolve CSS Style code:

<style>float: left; list-/** *

2. HTML code snippet:

<ul> <li><a href="http://www.divcss5.com/">divcss5</a></li > <li><a href="http://www.css5.com.cn/">css production </a></li> <li><a href="http://www.divcss5.com/"

3. Case

　　

Using float to resolve horizontal displays

Third, Li side display summary-TOP

Here DIVCSS5 describes two situations to solve, of course, there are other ways to solve the implementation. Everyone down can practice the above two methods and grasp, flexible use.