Tämä on opetusohjelma käytöstä CSS luoda yksinkertaisen kahden sarakkeen asettelun.

Pohjapiirrokseltaan koostuu otsikko tärkein sisältö sarake, joka on sivupalkissa, ja alatunnisteeseen. A melko perus ulkoasu, eikä lainkaan vaikea luoda kanssa CSS kerran osaat käsitellä väistämätöntä Internet Explorer vikoja.

1. Perusrakenne

Ensinnäkin, me luomme HTML-rakenne:

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


  Sen jälkeen me joitakin sisällön eri osat: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Yrityksen nimi </ h1> 
  <h4> Kirjoita iskulause </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> liikkuminen </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Meistä </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Yhteystiedot </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sivukartta </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> sisältö </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum DIS synnyttäjä Montes, nascetur ridiculus Mus.  1. tammikuuta  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum DIS  
  synnyttäjä Montes, nascetur ridiculus Mus.  1. tammikuuta 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> alatunniste </ h2> 
  </ div> 
  </ div> 

2. Css-koodi

Nyt me luomme css-koodi:

  / * tyyli kaksi saraketta ulkoasu * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  keho 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  korkeus: 100%; 
  ; min-height: 100% / * firefox * /; 
  ) 


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


  ; } a (text-decoration: none;) 

   text-decoration :underline } a: häilyä (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; 
  Korkeus: 100%; 
  ) 

  # header 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 151px; 
  näyttö: block; 
  ; background-color: # eeeeee; 
  ) 

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

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

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

  # sidebar ul li yksi 
  (  
  ; padding: 3px 4px; 
  näyttö: block; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

  # sidebar ul li a: häilyä 
  : #CC0000 } (Color: # cc0000)  

  # main 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  näyttö: block; 
  width: 809px; 
  korkeus: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  näyttö: block; 
  width: 100%; 
  korkeus: 50 px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  ) 

Lopuksi olemme tehneet. Olemme luoneet yksinkertainen 2 sarakkeen css layout.Click tästä nähdäksesi esimerkki

Filed under: css, Tutorials by admin