Simple 2 columna css layout, css, deseño, css layout |

Simple 2 columna css layout

Este é un tutorial sobre como usar o CSS para crear unha simple dúas columna esquema.

O esquema é composto por unha cabeceira, un contido principal columna, unha barra lateral, e un rodapé. Unha fermosa esquema básico, e non a todos os difícil crear coa CSS, unha vez que vostede sabe como se xestione os inevitáveis erros Internet Explorer.

1. Estructura básica

Primeiro de todo, crear a estrutura básica 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> 


  Despois de facelo, poñer algúns contidos nas diferentes seco: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Nome da Empresa </ h1> 
  <h4> Introduza seu slogan </ h4> 
  </ Div> 

  > <div id = "sidebar"> 
  <h2> navegación </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ td> 
  > About us </a> </li> <li> <a href = "#"> Quen somos </ a> </ td> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ td> 
  > Contact </a> </li> <li> <a href = "#"> Contacto </ a> </ td> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ td> 
  </ Ul> 
  </ Div> 

  > <div id = "main"> 
  <h2> Contido </ h2> 
  <p> lorem ipsum Dolores sit amet, consectetuer dipiscing 
  Elit.  Cum dis parturient montes, nascetur ridiculus mus.  1 º de xaneiro de  
  2002 lorem ipsum Dolores sit amet, consectetuer adipiscing elit.  Cum dis  
  parturient montes, nascetur ridiculus mus.  1. En xaneiro de 2002 </ p> 
  </ Div> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ Div> 
  </ Div>

2. Css Código

Agora imos crear css código:


  / * Estilo dúas columna layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  corpo 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * HTML, body 
  ( 
  height: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  height: 100%; 
  ) 
  # Page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 


  ; } a (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;  
  ) 

  # Page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 

  # Header 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 151px; 
  display: block; 
  ; background-color: # eeeeee; 
  ) 

  # Sidebar 
  ( 
  float: left; 
  margin: 0; 
  padding: 0; 
  ; display: inline / * Internet Explorer * /; 
  width: 200px; 
  height: 100%; 
  ; background-color: # cccccc; 
  ) 

  # Sidebar ul 
  ; } (List-style-type: none;) 

  display : inline /*internet explore*/ ; } # Sidebar ul li (display: inline / * Internet Explorer * /;) 

  # Sidebar ul li a 
  (  
  ; padding: 3px 4px; 
  display: block; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

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

  # Principal 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  display: block; 
  width: 809px; 
  height: 100%; 
  background: # dddddd 
  ) 
  # Footer 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )