Simple 2 kolonnu css izkārtojumu, css, dizains, css izkārtojums |

Simple 2 kolonnu css izkārtojums

Šī ir apmācība, kā izmantot CSS izveidot vienkāršu divas kolonna izkārtojumu.

Izkārtojums sastāv no galvenes, galvenais saturs ailē, a sānjoslas, un kājeni. A pretty pamata izkārtojumu, un ne visos grūti radīt ar CSS pēc tam, kad jūs zināt, kā rīkoties ar nenovēršamo Internet Explorer bugs.

1. Basic struktūra

Pirmkārt, mēs radīt HTML struktūra:


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


  Pēc tam mēs dažas saturs dažādās iedaļās: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Uzņēmuma nosaukums </ h1> 
  <h4> Tips jūsu saukli </ H4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigation </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Sākums </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Par mums </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Kontakti </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Lapas karte </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> saturs </ h2> 
  <p> Lorem ipsum bēdas sit amet, consectetuer dipiscing 
  Elit.  Cum DIS parturient Montes, nascetur ridiculus mus.  1.janvāra  
  2002 Lorem ipsum bēdas sit amet, consectetuer adipiscing elit.  Cum DIS  
  parturient Montes, nascetur ridiculus mus.  1.janvāra 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ div> 
  </ div>

2. Css Kods

Tagad mēs veidojam css kods:


  / * style divas kolonna izkārtojums * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  ķermenis 
  ( 
  font-size: 100%; 
  font-weight: normāla; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  augums: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  augums: 100%; 
  ) 
  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Augums: 100%; 
  ) 


  ; } a (text-decoration: none;) 

   text-decoration :underline } a: savilkties (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; 
  Augums: 100%; 
  ) 

  # header 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  augstums: 151px; 
  Rādīt: block; 
  ; background-color: # eeeeee; 
  ) 

  # sidebar 
  ( 
  Pluds: left; 
  margin: 0; 
  padding: 0; 
  ; Rādīt: inline / * Internet Explorer * /; 
  width: 200px; 
  augums: 100%; 
  ; background-color: # cccccc; 
  ) 

  # sidebar ul 
  ; } (Saraksta style-type: none;) 

  display : inline /*internet explore*/ ; } # sidebar ul li (displejs: inline / * interneta izpētīt * /;) 

  # sidebar ul li a 
  (  
  ; padding: 3px 4px; 
  Rādīt: block; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

  # sidebar ul li a: savilkties 
  : #CC0000 } (Color: # CC0000)  

  # galveno 
  ( 
  margin: 0; 
  padding: 0; 
  Pluds: left; 
  Rādīt: block; 
  width: 809px; 
  augums: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  Rādīt: block; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  pārplūdes: slēpta; 
  )