Simple columna 2 css disseny, css, disseny, maquetació CSS |

Simple columna 2 css disseny

Aquest és un tutorial sobre com utilitzar el CSS per crear un disseny senzill de dues columnes.

El disseny consta d'una capçalera, una columna de contingut principal, una barra lateral, i un peu de pàgina. Un disseny molt bàsic, i no en tots els difícil crear amb CSS una vegada que saben com fer front als inevitables errors d'Internet Explorer.

1. Estructura bàsica

En primer lloc, crear l'estructura bàsica en HTML:


  > <div id = "page"> 
  > </div> <div id = "header"> </ div> 
  > </div> <div id = "sidebar"> </ div> 
  > </div> <div id = "main"> </ div> 
  > </div> <div id = "footer"> </ div> 
  </ Div> 


  Després d'això, posar el contingut en les diferents seccions: 

  > <div id = "page"> 
  > <div id = "header"> 
  <H1> Nom de l'empresa </ h1> 
  <h4> Escrigui el seu lema </ h4> 
  </ Div> 

  > <div id = "sidebar"> 
  <h2> Navegació </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Inici </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Sobre nosaltres </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Contacte </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mapa del lloc </ a> </ li> 
  </ Ul> 
  </ Div> 

  > <div id = "main"> 
  <h2> contingut </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum parteres dis montes, nascetur ridiculus mus.  1 de gener de  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum discriminació  
  parteres montes, nascetur ridiculus mus.  1 de gener de 2002 </ p> 
  </ Div> 
  > <div id = "footer"> 
  <h2> peu de pàgina </ h2> 
  </ Div> 
  </ Div>

2. Codi css

Ara anem a crear el codi css:


  / * Estil de dues columnes * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  cos 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, el cos 
  ( 
  height: 100%; 
  ; min-height: 100% / * firefox * /; 
  ) 


  html, pàgina # 
  (  
  margin: 0; 
  padding: 0; 
  height: 100%; 
  ) 
  # Pàgina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Ample: 1009px; 
  Height: 100%; 
  ) 


  ; } un (text-decoration: none;) 

   text-decoration :underline } a: hover (text-decoration: underline) 

  ; padding : 0 ; } ul, ol, li (margin: 0; padding: 0;) 


  H1, H2, H3, H4, H5, H6 
  ( 
  margin: 0; 
  20px ; padding: 10px 0 0 20px; 
  ) 

  ; } h1 (font-size: 28px;) 
  ; } h2 (font-size: 24px;) 
  ; } h3 (font-size: 18px;) 
  ; } h4 (font-size: 12px;) 
  ; } h5 (font-size: 10px;) 

  ; p (margin: 0; 
  line-height: 18px; 
  10px 20px ; padding: 0 0 10px 20px; 
  font-size: 12px;  
  ) 

  # Pàgina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Ample: 1009px; 
  Height: 100%; 
  ) 

  # Capçalera 
  ( 
  margin: 0; 
  padding: 0; 
  ample: 100%; 
  alçada: 151px; 
  pantalla: bloc; 
  ; background-color: # eeeeee; 
  ) 

  # Sidebar 
  ( 
  flotador: esquerra; 
  margin: 0; 
  padding: 0; 
  ; pantalla: "inline" / * Internet Explorer * /; 
  ample: 200px; 
  height: 100%; 
  ; background-color: # CCCCCC; 
  ) 

  # Lateral ul 
  ; } (Llista-estil-type: none;) 

  display : inline /*internet explore*/ ; } # Sidebar ul li (display: en línia / Internet explorar * * /;) 

  # Sidebar ul li un 
  (  
  ; padding: 3px 4px; 
  pantalla: bloc; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

  # Sidebar ul li a: hover 
  : #CC0000 } (Color: # CC0000)  

  # Principal 
  ( 
  margin: 0; 
  padding: 0; 
  flotador: esquerra; 
  pantalla: bloc; 
  ample: 809px; 
  height: 100%; 
  de fons: # DDDDDD 
  ) 
  # Peu de pàgina 
  ( 
  margin: 0; 
  padding: 0; 
  pantalla: bloc; 
  ample: 100%; 
  Alçada: 50 px; 
  ; de fons: # eeeeee; 
  desbordament: ocult; 
  )