+ Div to use css page layout

Posted by john
6/8/2007
Related Tags:
CSS DIV  div css  div css Guide  div css layout  div class  div location  div borders  div position  div positioning  div height  div align  div layer  not-for-div trip div span  div background  div layout  div rolling  div select  div effects  div around div width  div ul  div flash  div nbsp  div manuals  div usage  div site  div parameters  div interface  div nested  div top  div width  div border  div style  div onmouseover  div visibility  the body div  div skills  div framework  css layout  layout examples  div css tutorial  css layout Record website  css map download div 

  + Div to use css page layout just contact css layout, and really a bit不适应compared with the traditional table layout, css is more difficult to use.    But this is a web page produced by a new revolution, is designed to meet the needs of different terminals, followed by improving the speed display.    As for other benefits, I feel that is still. 

  How to conduct css layout?    In the layout, I need to mention the "content, structure, performance, acts of separation," this ideology.    We use div to the structure of production; use ul, ol, li, table, p, described span, and other content with font, pading, such as control performance; behaver to describe acts.    These elements separately, that is, we were writing these things in a different documents inside (the time being, I understand this), rather than as traditional html documents, mixed up together. 

  First, to understand the common control div css elements: 
  As follows: 
  # head ( 
  Margin: 10px 10px 10px 10px; 
  Padding-left: 20px; 
  Padding-top: 20px; 
  Padding-right: 20px; 
  Padding-bottom: 20px; 

  Border-right: # CCCC 2px solid; 
  Border-left: # CCCC 2px solid; 
  ) Border-top: # CCCC 2px solid; 
  Border-bottom: # CCCC 2px solid; 

  Background: url (images / bg.gif) # ffccdd no-repeat right bottom; 
  Color: # 6666; 
  Text-align: center; 
  Line-height: 150%; 
  Width: 60%; 
  / / Height: 20px; 
  ) 
  1, the name of the head, used in the pages <div id = "sample"> can call this style.    However, I feel that in order to reuse high-class than by class. 

  2, Margin means to stay outside of the borders of the blank for the page margins or with other layers to create a distance.    "10px 10px 10px 10px" on behalf of "the right lower left" (clockwise direction) four border, if we, can be abbreviated as "MARGIN: 10px;."    If the margins to zero, as the "MARGIN: 0px;."    NOTE: When the value is zero, in addition to RGB Color values from 0% Percent must be other circumstances behind can not with the unit "px."    MARGIN is transparent elements and can not be defined colours. 

  3, Padding layer refers to the borders of the gap between the content.    "PADDING-LEFT" refers to the contents of the left frame distance, and so on.    If all the same, can be abbreviated as "PADDING: 0px."    PADDING is transparent elements and can not be defined colours. 

  4, Border refers to the borders of the "BORDER-RIGHT: # CCC 2px solid," a definition of the color box to the right to "CCC #" Width "px" style as "solid" line.    If the dotted line styles can be used to "dotted." 

  5, Background definition of the background.    The two definitions, the definition picture background to the adoption of the "url (.. / images / bg_logo.gif)" to designate the background picture path followed by the definition Background Color "# FEFEFE."    "On-repeat" means the background picture need not repeat, repeat if necessary horizontal "repeat-x", vertical repeat of "repeat-y", repeated covered the entire background of "repeat."    Behind the "right bottom" refers to a background picture from the lower right corner of the beginning.    If there is no background images can only define the background color BACKGROUND: # FEFEFE. 

  6, COLOR used to define Font color, we should all know. 

  7, TEXT-ALIGN to define the content of the arrangement, the center middling, left Habitat left and right of abode right. 

  8, LINE-HEIGHT to high definition, 150% refers to the Height of standard height of 150 per cent, can be written as: LINE-HEIGHT: 1.5 or LINE-HEIGHT: 1.5em, are the same meaning. 

  9, WIDTH definition of the width of a fixed value can be used, for example, 500 px, the percentage can also be used, like here, "60 percent."    It should be noted that: the width means you only the width of the content, not including margin, border and padding.    Therefore, this relatively table set up in the border areas is not very good control, but they can also consider using div borders to achieve. 

  10, HEIGHT is a high degree of definition, but generally do not need to set, it will lead to the contents inside pages overflow. 

  Div These are the most Basic form of the commonly used. 

  Second, layer and control layer between the first layer to everyone layout may feel uncomfortable.    In fact no difficulty, as long as the original layout of how to form ideas into use on the floor. 

  We used the following three lines of a common two examples to describe the layer and the layer between the location settings: 
  Step 1: create a static definition of a good use of the overall framework of the code: 
  <div Id="contenter"> 

  <div Id="top"> 
  <h1> Head </ h1> 
  </ Div> 

  <div Id="leftnav"> 
  </ Div> 

  <div Id="content"> 
  </ Div> 

  <div Id="footer"> 
  </ Div> 
  </ Div> 

  Step 2: In order to control the entire page in the browser shows that the width of the need for contenter width: 100%, if less than 100 percent, will have to specify whether the middle margin: 10px auto (Note auto may not supported in IE , it would set up text-align: center) 
  Css code: 
  # Container 
  ( 
  Width: 90%; 
  Margin: 10px auto; 
  Background-color: # fff; / / used to set the background color 
  Color: # 333; 
  Border: 1px solid gray; / / used to set borders 
  Line-height: 130%; 
  ) 
  Margin which refers to the body and the surrounding distance; background-color refers to the background color; border that frames the size.    But under normal circumstances not set up the parameters.    Because of the wide would be affected. 
  In order to increase the readability of pages, accessibility can increase line-height attributes, set up after the end of the other will be inherited. 

  The third step Top definition of the style.    We defined as follows 
  Css code: 
  # Top 
  ( 
  Padding: 5px; 
  Background-color: # ff0000; 
  Border-bottom: 1px solid # ffffff; 
  ) 
  In the top of the css h1 us to have a definition of the style of it 
  # Top h1 
  ( 
  Padding: 0; 
  Margin: 0; 
  ) 

  Step 4: To set the left menu Pai way, we applied to float, float: left. 
  When a div is set to float, it is necessary to set the width of the width: 160px.    In addition, we need to set padding for content far more from the border. 
  # Leftnav 
  ( 
  Float: left; 
  Width: 160px; 
  Margin: 0px; 
  Padding: 5px; 
  ) 
  When the padding used to pay special attention to when if the layer is floating, making it easy for content overflow situation.    For example, I left a wide menu settings for 160 px, 10 px padding, then the middle-left content on the margin must be greater than 170 px, so that left only the content of the menu will not appear in the outside layer.    As em px between what is and conversion rules, I will later on. 

  Step 5: is the most important step for setting the content of the location.    Margin-left is necessary.    And then left for a line.    Border-left: 1px solid # ffffff; padding used to designate the current contents of the distance and borders; background-color background to the current designation of the color specified height is not possible to scroll. 
  Css code: 
  # Content 
  ( 
  Margin-left: 200px; 
  Border-left: 1px solid gray; 
  Padding: 1em; 
  ) 
  Attention to the content of the padding in some circumstances it is quite important. 

  Step 6: Setting bottom, and this step should be performed first clear: both. Purpose is to Float in all the layers below. 
  Code as follows: 
  # Footer 
  ( 
  Clear: both; 
  Margin: 0; 
  Padding: .5 em; 
  Color: # 333; 
  Background-color: # ddd; 
  Border-top: 1px solid gray; 
  ) 

  Two of this three lines layout completed. 

  Third, added that the common css body set up to provide margins for 0 px; 
  Body ( 
  Margin: 0; 
  Padding: 0; 
  ) 


Related articles:

Dreamweaver MX 2004 Video Collection Guide (2)
  Article 02 sets: Web site with a summary of    Curriculum objectives: page of the website and the concept of a basic understanding.    Curriculum points: You will often hear these two Web sites and popular vocabulary, then you know what links and differences between the ...
Dreamweaver MX 2004 Video Collection Guide (89)
  Section 89 sets: the Navigator browser object object    Curriculum objectives: learning object browser in the Navigator object    Curriculum points: including properties and methods.    This section describes the object browser Navigator object.    [...
TextInput, RadioButton, CheckBox, Combobox and examples of the use of components
  1.    TextInput component is the text input box, parameter 1.    Editable, the default is true, the text can be edited, false, as an input text editor.    2.    Password, whether as a password field, defaults to false, and not, if it is true, is the pa...
"Love" a new advertising Xplus profitable advertising model
  "And the previous biggest difference between media advertising in that Xplus let you take the initiative to look at the target of your advertising, 'love' your advertising." March 30, the domestic network service platform magazine Xplus the new operators - Company CEO, in t...
CSS syntax Manual (1) font attributes
  1, font-family    Features: HTML for signs or change the font elements, you can set up a list of available fonts.    Browser used by the former backwards font.    Grammar: (font-family: 1 fonts, font 2, ..., n) fonts    Examples:    Font&...