A simple navigation of the CSS 

  Create CSS style text navigation of the most simple solution is perhaps all the links in the text are on the line, as in the case of A the same. 

  This approach also seems very reasonable intuitive.    But the problem is that all the links are on the line in the text difficult to control, as well as links between before and after the gap.    Therefore, in order to avoid all the links are crowded together, you usually have to insert the final pipeline (vertical) and non-newline character as a blank separators. 

  As shown in the code below, the result is very difficult to be clear, the structure of the marker. 

  <div Id="navbar1"> 
  <a Href="link1a.html"> Button 1 </ a> | <a 
  Href = "link2a.html"> Button 2 </ a> | <a href="link3a.html "> 
  Button 3 </ a> 
  </ Div> 

  Application button in order to create a rolling effect of the Background and need for additional CSS style, you have to join <span> labels, so marked will become even more confusing. 

  Based on the list of css navigation of the creation of the CSS navigation Another method is to use <ul li> and <> labels, as a disorder of the list of links (unordered list) Designation. 

  1 It appears that the use of the navigation of the disorder is not in line with the list seems to be intuitive feelings, because we have been accustomed to the list as a disorderly竖着pushed up a list of items, each are placed in front of a Bullet.    This does not seem to meet the navigation of the horizontal direction habits. 

  However, as a separate item on the set list can be applied to logic structure of the navigation links, and the CSS Rules so you can replace the mandatory default on the project of the manifestations, and arrangements to eliminate Bullet in the list of page on the surface rather than under floating. 

  Aware of this point, let us look at the case of B, according to create disorder List XHTML and css style of navigation marker. 

  Below is XHTML Designation: 

  <div Id="navbar2"> 
<ul>
  <li> <a Href="link1.html"> Button 1 </ a> </ li> 
  <li> <a Href="link2.html "> Button 2 </ a> </ li> 
  <li> <a Href="link3.html "> Button 3 </ a> </ li> 
  </ Ul> 
  </ Div> 

  The fixed readers of this column may Huirenchu this example I used in another css button on the same marker.    This technique attractive a place is that the marking of all buttons are the same, and whether they are a竖着Duicheng on the side of the main text, or on the level of the top of the page in the navigation. 

  Below is the text List of links into navigation of the CSS code: 

  (Div # navbar2 
  Height: 30px; 
  Width: 100%; 
  Border-top: 1px solid # 000; 
  Border-bottom: 1px solid # 000; 
  Background-color: # 336699; 
  ) 
  Div # navbar2 ul ( 
  Margin: 0px; 
  Padding: 0px; 
  Font-family: Arial, Helvetica, sans-serif; 
  Font-size: small; 
  Color: # FFF; 
  Line-height: 30px; 
  White-space: nowrap; 
  ) 
  Div # navbar2 li ( 
  List-style-type: none; 
  Display: inline; 
  ) 
  Div # navbar2 li a ( 
  Text-decoration: none; 
  Padding: 7px 10px; 
  Color: # FFF; 
  ) 
  Div # navbar2 lia: link ( 
  Color: # FFF: 
  ) 
  Div # navbar2 lia: visited ( 
  Color: # CCC; 
  ) 
  Div # navbar2 lia: hover ( 
  Font-weight: bold; 
  Color: # FFF; 
  Background-color: # 3366FF; 
  ) 

  Div # navbar2 pattern will set up includes navigation links div of the size and background. 

  Div # navbar2 ul style includes Margin and Padding a statement to replace the mandatory distribution list to the default blank disorder, and set the overall text format.    White-space: nowrap declaration will ensure that the list displayed in a horizontal line, even if the browser window is too narrow and not show the entire trip. 

  This technique in real secret div # navbar2 li style,.    List-style-type: none statement will delete the list is usually used to mark each item Bullet and the display: inline declaration will be able to list items to the page from left to right in the float, and not let each project shows in a separate row. 

  The other skills is a key Element navbar2 li a div # rules.    Text-decoration: none statement will be used to delete links underlined, and padding: 7px 10px statement will be used to control navigation in the link (between) the blank.    Gap left and the right to control the level spacing, and we need the top and Bottom space for them to a rolling effect (as well as regional button click) is the background Color of navigation.    You can also join the left and right blank value, if you want to add more in the gap between the buttons so. 

  Finally, the: link,: visited, and: hover pseudo-class (pseudoclasse) will set up the rules for the rolling effect of the color change. 

  You can change the Basic skills to create many different navigation of the results, including the popular "directory tab" style.