To je Tutorial o tem, kako uporabljati CSS za oblikovanje enostavnega dva stolpca postavitev.

Načrt je sestavljen iz glave, a glavno vsebino stolpcu, a sidebar, in noga. A zal osnovno obliko, in ne na vseh težko oblikovati s CSS, ko veš, kako ravnati z neizogibnim Internet Explorer bugova.

1. Osnovna struktura

First of all, smo ustvarili osnovne strukture 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> 


  Po tem, da smo nekatere vsebine iz različnih področij: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Company Name </ h1> 
  <h4> Vnesite geslo </ H4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigation </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> O nas </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Kontakt </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Zemljevid </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> vsebine </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum dis Lindjes Montes, nascetur ridiculus mus.  1. januar  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum dis  
  Lindjes Montes, nascetur ridiculus mus.  1. januar 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ div> 
  </ div> 

2. CSS zakonik

Sedaj smo ustvarili css kodo:

  / * stil dva stolpca postavitev * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  telo 
  ( 
  font-size: 100%; 
  font-weight: normalno; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  višina: 100%; 
  ; min-višina: 100% / * Firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  višina: 100%; 
  ) 
  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Višina: 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-višina: 18px; 
  10px 20px ; padding: 0 0 10px 20px; 
  font-size: 12px;  
  ) 

  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Višina: 100%; 
  ) 

  # header 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  Višina: 151px; 
  izpis: block; 
  ; background-color: # eeeeee; 
  ) 

  # sidebar 
  ( 
  float: left; 
  margin: 0; 
  padding: 0; 
  ; izpis: inline / * internet explorer * /; 
  width: 200px; 
  višina: 100%; 
  ; background-color: # CCCCCC; 
  ) 

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

  display : inline /*internet explore*/ ; } # sidebar ul li (izpis: inline / * internet raziskati * /;) 

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

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

  # glavnih 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  izpis: block; 
  width: 809px; 
  višina: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  izpis: block; 
  width: 100%; 
  višina: 50px; 
  ; background: # eeeeee; 
  overflow: skrito; 
  ) 

Končno smo storili. Ustvarili smo preprost stolpcu 2 css layout.Click tukaj za prikaz primer

Pila pod: CSS, Tutorials z admin