Use UL and Li for horizontal navigation

Use UL and Li for horizontal navigation

1e.generate the site.css file (Note: You must set the file encoding format to UTF-8, otherwise IE6 may contain garbled characters)

/* Ul Li displays the UL style */DIV in the DIV with all classes as menu in a horizontal bar. menu ul {list-style: none;/* remove the symbol before ul */margin: 0px;/* distance from the external element is 0 */padding: 0px; /* The distance from the internal element is 0 */width: auto; /* adjust the width according to the element content */}/* Li style */DIV in UL of all Div whose class is menu. menu ul Li {float: Left;/* drift to left, change the vertical bar to the horizontal bar */}/* All the class as the style (including unclicked and clicked styles) in the UL of the menu Div */Div. menu ul Li a, Div. menu ul Li A: visited {background-color: # effecc71;/* Background Color */Border: 1px # 4e667d solid;/* border */color: # dde4ec;/* text color */display: block;/* this element is displayed as a block-level element, this element carries a line break */line-Height: 1.35em;/* line height */padding: 4px 20px;/* internal padding distance */Text-Decoration: none; /* do not show hyperlink underline */white-space: nowrap;/* for blank spaces in the text, the text will not wrap, and the text will continue on the same line, until the <br> label is encountered. * //}/* All the class is the style in UL In the DIV of menu (move the mouse to the style in the element) */Div. menu ul Li A: hover {background-color: # bfcbd6;/* Background Color */color: #465c71;/* text color */Text-Decoration: none; /* do not show hyperlink underline */}/* all class is menu. In the DIV, the style in UL (the style when you click the element) */Div. menu ul Li A: active {background-color: #465c71;/* Background Color */color: # cfdbe6;/* text color */Text-Decoration: none; /* do not show hyperlink underscores */}

2. reference the above CSS style file on the foreground

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />

3. Foreground Data

<Div class = "menu"> <ul> <li> <a href = "javascript: void (0 ); "> homepage </a> </LI> <li> <a href =" javascript: void (0 ); "> work log </a> </LI> <li> <a href =" javascript: void (0 ); "> device running records </a> </LI> <li> <a href =" javascript: void (0 ); "> others </a> </LI> </ul> </div>

Copy code