Antud 2 kolonn css layout, css, disain, css paigaldamine |

Antud 2 kolonn css layout

See on juhendaja kohta, kuidas kasutada CSS luua lihtne kahe veeru kujundus.

Planeering koosneb päisesse peamine sisu veerus on vasaku ja jalus. Päris põhi paigutus ja ei ole üldse raske luua koos CSS, kui sa tead, kuidas tulla toime vältimatu Internet Explorer vead.

1. Põhistruktuuri

Esiteks, me loome algmääruse HTML struktuur:


  > <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ärast seda oleme teinud mõningaid sisu eri osast: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Firma nimi </ h1> 
  <h4> Sisestage oma loosung </ H4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> navigeerimine </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Avaleht </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Meie </ 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 = "#"> kaart </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> sisu </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum DIS Tekitab Montes, nascetur ridiculus Mus.  1. jaanuarist  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing Elit.  Cum DIS  
  Tekitab Montes, nascetur ridiculus Mus.  1. jaanuar 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> jalus </ h2> 
  </ div> 
  </ div>

2. Css kood

Nüüd me loome css kood:


  / * style kahe veeru kujundus * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  keha 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  kõrgus: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  kõrgus: 100%; 
  ) 
  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Kõrgus: 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; 
  Kõrgus: 100%; 
  ) 

  # header 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 151px; 
  kuva: ploki; 
  ; background-color: # eeeeee; 
  ) 

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

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

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

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

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

  # main 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  kuva: ploki; 
  width: 809px; 
  kõrgus: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  kuva: ploki; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )