Egyszerű 2 oszlop css layout, css, design, css alaprajz |

Egyszerű 2 oszlop css layout

Ez egy bemutató arról, hogy hogyan használja a CSS, hogy hozzanak létre egy egyszerű két oszlop elrendezés.

Az elrendezés áll a fejléc, a fő tartalmi oszlop, a sidebar és láblécet. Egy szép alapvető elrendezését, és egyáltalán nem nehéz, hogy a CSS-t, ha tudja, hogyan kezelje az elkerülhetetlen Internet Explorer hibát.

1. Alapvető szerkezete

Először is létre az alapvető 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> 


  Után, hogy mi egy kis tartalmat a különböző szakaszból áll: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> cég neve </ h1> 
  <h4> Írja be a szlogen </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigáció </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Magunkról </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Kapcsolat </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> tartalma </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum dis vajúdást Montes, nascetur ridiculus mus.  Január 1.  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum dis  
  vajúdást Montes, nascetur ridiculus mus.  Január 1., 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> footer </ h2> 
  </ div> 
  </ div>

2. Css kód

Most létre css kódja:


  / * stílus két oszlop elrendezés * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  test 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  magasság: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  magasság: 100%; 
  ) 
  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Magasság: 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; 
  Magasság: 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; 
  magasság: 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)  

  # main 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  display: block; 
  width: 809px; 
  magasság: 100%; 
  background: # DDDDDD 
  ) 
  # Footer 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  height: 50px; 
 background : #eeeeee ; 
  overflow: hidden; 
  )