Cascading Style Sheets Tutorial

  List of the use of the production menu <li> 

  The study began before this section, make sure you have the light before the contents of the sections into a DIV, CSS to index.htm and css.css document. 

  This section I will tell you how to list <li> to create the menu. 

  <div Id="menu"> 
<ul>
  <li> <a Href="#"> Home </ a> </ li> 
  <li Class="menuDiv"> </ li> 
  <li> <a Href="#"> blog </ a> </ li> 
  <li Class="menuDiv"> </ li> 
  <li> <a Href="#"> design </ a> </ li> 
  <li Class="menuDiv"> </ li> 
  <li> <a Href="#"> Album </ a> </ li> 
  <li Class="menuDiv"> </ li> 
  <li> <a Href="#"> Forum </ a> </ li> 
  <li Class="menuDiv"> </ li> 
  <li> <a Href="#"> on </ a> </ li> 
  </ Ul> 
  </ Div> 

  The above is this part of the structure, on <ul> </ ul>, <li> </ li> HTML these two elements you to make reference to relevant content bar, their most important role is in HTML to List in the form of some of the information to display. 

  Another point that we need to have to distinguish very clearly, when in HTML defined as id = "divID", in the corresponding CSS syntax is set divID () # if defined in the HTML class = "divID", in the corresponding CSS syntax settings yes. divID. 

  If id = "divID" This layer includes a <img> </ img>, then img in the corresponding CSS syntax settings should be # divID img (), the same, if it is included in the class = "divID" layer, it should be set up grammar yes. divID img () This is the hope that we have to clear. 

  In addition, all the elements in HTML can be defined, for example, table, tr, td, th, form, img, input … and so on, if you want to set up in the CSS them directly into the elements of the name of Canada on the one pair of braces () on it.    All the CSS code should be written in large () brackets. 

  In line with the above, we first css.css writes the following code: 

  # Menu ul (list-style: none; margin: 0px;) 
  # Menu ul li (float: left;) 

  Explain: 

  # Menu ul (list-style: none; margin: 0px;) 
  List-style: none, this one is to abolish the list before, because we do not need these points. 
  Margin: 0px, this one is the deletion of UL indentation, it can make a list of all the contents are not indented. 

  # Menu ul li (float: left;) 
  Float here: the left is about to content on the same line, the use of a floating attributes (float). 

  With this step, we first proposed to preserve preview effects, we have to add the following text, the effect is as follows: 

  At this time, the list is arranged in his party, we have # menu ul li () to add code margin: 0 10px 

  # Menu ul (list-style: none; margin: 0px;) 
  # Menu ul li (float: left; margin: 0 10px) 

  Margin: 0 10px role is to list the contents between a 20-pixel distance (Left: 10 px, and the right: 10 px), preview the effect of the following: 

  Now, the prototype has been out, we come back the location of the fixed menu, the code changed as follows: 

  # Menu (padding: 20px 20px 0 0) 
  / * Use padding: 20px 20px 0 0 menu to the fixed location * / 
  # Menu ul (float: right; list-style: none; margin: 0px;) 
  / * Add the float: right makes menu at the right pages * / 
  # Menu ul li (float: left; margin: 0 10px) 

  At this time, location have been identified, but concept map, the menu options are between a Shuxian, how do? 
  After all, we have already had a good stay in the air <li class = "menuDiv"> </ li>, in order to join the Shuxian to use it. 
  In accordance with the above said, we will add the following code: 

  . MenuDiv (width: 1px; height: 28px; background: # 999) 

  Preview to preserve, Shuxian have been out?    On the code not speak, and it should be very easy to understand. 

  However, the menu options at the top of the text but, we further amendments into the following code: 

  # Menu ul li (float: left; margin: 0 10px; display: block; line-height: 28px) 

  On display: block; line-height: 28px we can to see this manual, I do not speak of. 

  Basically, the effect has been achieved, and the rest of the menu is modified form of hyperlinks, css.css, add the following code: 

  # Menu ul li a: link, # menu ul li a: visited (font-weight: bold; color: # 666) 
  # Menu ul li a: hover () 

  This is to say, not speak, the final results are as follows: 

  This section here on the end, the way the material available to everyone: 
  Figure idea: Download 
  HTML and CSS source file: Download 

Tags: CSS DIV, div class, div css, div css Guide, div css layout, div location

Releated Posts

• CSS + DIV analysis in the reconstruction process of the significance of SEO
• CSS DIV resolve unknown high vertical center
• CSS + DIV website effects appreciate: very cool angle BANNER
• Based on the standard XHTML + CSS DIV layout of the impact of SEO
• Easily learn DIV Guide (css layout div +)

This entry was posted on Monday, December 31st, 2007 at 12:00 am and is filed under Css+Div Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  4, pages produced (1) - making good use of border and clear 

  As找房子looking for work reasons, can be separated for so long began to write curriculum, and my heart felt very sorry this site has been concerned about a friend, today is the day to find the house, so quickly to write curriculum. 

  This section inside, is mainly want to tell you how to use good border and clear both attributes. 

  First, if you have used the table creating homepages, and you should know that if in the form of drawing a dotted line to find things that need to produce a small picture to fill, in fact, we are more simple approach, as long as the <td> </ td> adding such a can, and you can try: 
  <div Style="border-bottom:1px dashed #ccc"> </ div> 

  We can once again reference manual, and then you can see that dashed, solid, dotted … such as the role of using them you can produce many results, the solid line, dotted line, the two-lane, shadow line, and so on. 
  <div Id="banner"> </ div> 

  Above code will be able to achieve a sketch design of the banner, in css.css in style by adding the following: 
  # Banner ( 
  Background: url (banner.jpg) 0 30px no-repeat; / * background images * / 
  Width: 730px; / * set the width of the * / 
  Margin: auto; / middle layer * * / 
  Height: 240px; / * set high * / 
  Border-bottom: 5px solid # EFEFEF; / * painted a light grey solid line * / 

  Clear: both / * remove floating * / 
  ) 

  Through the border is very easy to draw a solid line, and reduce the download occupied by the network resources and make pages load faster has become faster. 

  Another note is clear: both that the removal of the left and right all the floating, the layout of the next, we will also use this attribute: clear: left / right.    Add clear here: both due before the ul, li elements set up a floating, if not removed will affect the banner of the location of the set. 
  <div Id="pagebody"> <! - The main page -> 
  <div Id="sidebar"> <! - Side column -> 
  </ Div> 
  <div Id="mainbody"> <! - The main content -> 
  </ Div> 
  </ Div> 

  These are some of the main pages, we css.css add the following style: 
  (# Pagebody 
  Width: 730px; / * width settings * / 
  Margin: 8px auto; / center * * / 
  ) 
  (# Sidebar 
  Width: 160px; / * width settings * / 
  Text-align: left; / * Text left alignment * / 
  Float: left; / Habitat left floating * * / 
  Clear: left; / * does not allow the existence left floating * / 
  Overflow: hidden; / * beyond the width of the hidden * / 
  ) 
  (# Mainbody 
  Width: 570px; 
  Text-align: left; 
  Float: right; / * Habitat floating right * / 
  Clear: right; / * does not allow the existence of floating right * / 
  Overflow: hidden 
  ) 
  In order to see the results, we recommend # # sidebar mainbody and add the following code, preview after the completion of this code can be deleted: 
  Border: 1px solid # E00; 
  Height: 200px 

  Preservation preview effects, which can be found floating two perfect layer, we have reached the requirements of the layout, and the actual width of the two should be 160 +2 (border) +570 +2 = 734px, have already exceeded the Father of the width, as the reasons for the clear, the two layers will not appear misplaced, so we can make the layout of the pages will not be too long because as a result of dislocation. 
  And add the overflow: hidden so that the contents can be automatically part of the long been hidden.    Usually, we will see some Web pages load, due picture too, led by distracting layout until completion download pages to return to normal, by adding overflow: hidden this problem can be solved. 

  CSS attributes of each used properly, we can solve many problems, perhaps they are with you in the layout of the page and there is no significant relationship, but you need to know the role of these attributes, in the face of difficulties, we can try to use these attributes to solve the problem. 

Tags: CSS DIV, div class, div css, div css Guide, div css layout, div location

Releated Posts

• CSS + DIV analysis in the reconstruction process of the significance of SEO
• CSS DIV resolve unknown high vertical center
• CSS + DIV website effects appreciate: very cool angle BANNER
• Based on the standard XHTML + CSS DIV layout of the impact of SEO
• Easily learn DIV Guide (css layout div +)

This entry was posted on Wednesday, October 24th, 2007 at 12:00 am and is filed under Css+Div Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.