Simple 2 haligi css layout, css, disenyo, layout css |

Simple 2 haligi css layout

Ito ay isang tutorial kung paano gamitin ang CSS na lumikha ng isang simpleng dalawang haligi ng layout.

Ang layout ay binubuo ng isang header, isang pangunahing nilalaman ng haligi, isang sidebar, at isang footer. Ang isang pretty basic layout, at hindi sa lahat ng mahirap na lumikha sa CSS kapag alam mo kung paano makitungo sa hindi mapigilan ang Internet Explorer bugs.

1. Basic na istraktura

Una sa lahat, kami ay gumawa ng basic HTML istraktura:


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


  Pagkatapos nito, naglagay kami ng ilang nilalaman sa iba't-ibang mga seksyon: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Pangalan ng Kumpanya </ h1> 
  <h4> I-type ang iyong bansag </ h4> 
  </ span> 

  > <div id = "sidebar"> 
  <h2> Nabigasyon </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Tungkol sa amin </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Makipag-ugnayan sa </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  </ ul> 
  </ span> 

  > <div id = "main"> 
  <h2> Nilalaman </ h2> 
  <p> Lorem ipsum pighati umupo amet, consectetuer dipiscing 
  Elit.  Cum di manganganak montes, nascetur ridiculus mus.  Enero 1,  
  2002 Lorem ipsum pighati umupo amet, consectetuer adipiscing elit.  Cum di  
  manganganak montes, nascetur ridiculus mus.  Ika-1 ng Enero, 2002 </ p> 
  </ span> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ span> 
  </ span>

2. Css Code

Ngayon kami gumawa ng css code:


  / * estilo ng dalawang haligi ng layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  katawan 
  ( 
  font-size: 100%; 
  font-weight: normal na; 
  ; font-family: Arial, Helvetica, walang-serif; 
  ) 
  * Html, katawan 
  ( 
  height: 100%; 
  ; min-height: 100% / * * Firefox /; 
  ) 


  html, # pahina 
  (  
  margin: 0; 
  padding: 0; 
  height: 100%; 
  ) 
  # pahina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 


  ; } isang (text-labor: none;) 

   text-decoration :underline } isang:-aligid (text-labor: 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;  
  ) 

  # pahina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 

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

  # sidebar 
  ( 
  lamo: kaliwa; 
  margin: 0; 
  padding: 0; 
  ; display: inline / * internet explorer * /; 
  width: 200px; 
  height: 100%; 
  ; background-color: # cccccc; 
  ) 

  # sidebar ul 
  ; } (Listahan-style-uri: none;) 

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

  # sidebar ul li ng isang 
  (  
  ; padding: 3px 4px; 
  display: block; 
  16px ; margin: 0px 0 0 16px; 
  text-labor: none; 
  color: # 0000E8 
  ) 

  # sidebar ul li ng: mag-agaw-buhay 
  : #CC0000 } (Color: # CC0000)  

  # pangunahing 
  ( 
  margin: 0; 
  padding: 0; 
  lamo: kaliwa; 
  display: block; 
  width: 809px; 
  height: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  taas: 50px; 
  ; background: # eeeeee; 
  overflow: nakatagong; 
  )