Detta är en handledning om hur man använder CSS för att skapa en enkel tre kolumn layout.
Layouten består av ett huvud, en huvudinnehållet kolumn, en sidofältet och en sidfot. En ganska grundläggande layout, och inte alls svårt att skapa med CSS när du vet hur man handskas med det oundvikliga Internet Explorer buggar.


STREP första: vi skapar en grundläggande html struktur

 > <div id = "header" > <div id = "sub-header" > </div> </div> <div id = "nevigation" > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> </div> <div id = "content" > <div id = "sub-content" > <div id = "column1" > <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. <div id = "page"> <div id = "header"> <div id = "sub-header"> </ div> </ div> <div id = "nevigation"> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Om oss </ a> </ li> <li> <a href = "#"> Tjänster </ a> </ li> <li> <a href = "#"> Produkter </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> < en href = "#"> Kontakta oss </ a> </ li> </ ul> </ div> <div id = "content"> <div id = "sub-content"> <div id = "kolumn1" > <h2> About Us </ h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui Diverse risus. I eu neque en tortor lacinia rhoncus.  I interdum placerat purus.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui Diverse risus. I eu neque en tortor lacinia rhoncus.  I interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column2"> <h2 > Tjänster </ h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui Diverse risus. I eu neque en tortor lacinia rhoncus.  I interdum placerat purus.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui Diverse risus. I eu neque en tortor lacinia rhoncus.  I interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column3" > <h2> Contact Detail </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column3"> <h2 > Kontakta Detalj </ h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui Diverse risus. I eu neque en tortor lacinia rhoncus.  I interdum placerat purus.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui Diverse risus. I eu neque en tortor lacinia rhoncus.  I interdum placerat purus.  > Readmore </a> </p> </div> </div> </div> <div id = "bottom" > <div id = "sub-bottom" > <span> Copyright &copy; Developer's Paradise                    Designed By Developer's Paradise </span> </div> </div> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, <a href = "#"> Readmore </ a> </ p> </ div> </ div> </ div> <div id = "bottom"> <div id = "sub-bottom"> <span> Copyright © Developer's Paradise Designed by Developer's Paradise </ span> </ div> </ div> </ div> 

Andra steget: vi skapar en grundläggande css struktur

 ; padding : 0 ; } h1,h2,h3,h4 { font : 100 % "Georgia" , Times New Roman, Times, serif ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px } h1 { font-size : 400 %; text-align :center ; padding : 35px 0 0 0 ; } h2 { font-size : 150 %; } h3 { font-size : 137 %; } h4 { font-size : 120 %;text-align :center ; color : # 848484 ; } ul,ol,li { list-style-type :none ; } a { text-decoration :none ; color : #00CCFF } a :hover { text-decoration :underline ; } p { color : #fff ; font-size : 12px ; font-family : "Georgia" , Times New Roman, Times, serif ; color : #fff ; padding : 0 0 10px 0 ; line-height : 22px ; } * (Margin: 0; padding: 0;) h1, h2, h3, h4 (font: 100% "Georgia", Times New Roman, Times, serif; color: # fff; text-transform: uppercase; brev-avstånd: 2px) h1 (font-size: 400%; text-align: center; padding: 35px 0 0 0;) h2 (font-size: 150%;) h3 (font-size: 137%;) h4 (font-size : 120%; text-align: center; color: # 848484;) ul, ol, li (list-style-type: none;) en (text-decoration: none; color: # 00CCFF) a: hover (text - decoration: underline;) P (color: # fff; font-size: 12px; font-family: "Georgia", Times New Roman, Times, serif; color: # fff; padding: 0 0 10px 0; line-height: 22px;) 
  % normal "Georgia" , Times New Roman, Times, serif ; background : # 191919 ; } body (font: 100% normal "Georgia", Times New Roman, Times, serif; background: # 191919;) 
 background : # 323232 ; width : 971px ; margin : 0 auto ; height : 100 %; border-left : 1px solid # 353535 ; border-right : 1px solid # 353535 ; padding : 12px 0 12px 0 ; } # page (background: # 323232; width: 971px; margin: 0 auto; height: 100%; border-left: 1px solid # 353535; border-right: 1px solid # 353535; padding: 12px 0 12px 0;) 
  margin : 0px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #sub-header { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; height : 150px ; } # header (margin: 0px auto 0 auto; width: 943px; background: # 222; border: 1px solid # 424242;) # sub-header (margin: 1px; padding: 1px; background: # 333; overflow: hidden; höjd : 150px;) 
 margin : 5px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #nevigation ul { margin : 1px ; padding : 0px ; background : # 333 ; overflow :hidden ; } #nevigation li { display : inline ; /*ie*/ } #nevigation li a { float :left ; margin : 0 ; padding : 7px 10px ; display : block ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px ; } #nevigation li a :hover { background : # 424242 ; text-decoration :none ; color : #00CCFF ; } # nevigation (margin: 5px auto 0 auto; width: 943px; background: # 222; border: 1px solid # 424242;) # nevigation ul (margin: 1px; padding: 0px; background: # 333; overflow: hidden;) # nevigation li (display: inline; / * IE * /) # nevigation li a (float: left; margin: 0; padding: 7PX 10px; display: block; color: # fff; text-transform: uppercase; brev-avstånd: 2px;) # nevigation li a: hover (background: # 424242; text-decoration: none; color: # 00CCFF;) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-content { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; } # innehåll (width: 943px; margin: 5px auto 0 auto; background: # 222; border: 1px solid # 424242;) # sub-content (margin: 1px; padding: 1px; background: # 333; overflow: hidden;) 
 width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column2 { width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column3 { width : 303px ; background : # 424242 ; margin : 0 ; padding : 5px ; float :left ; } # kolumn1 (width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px; float: left;) # kolumn2 (width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px ; float: left;) # kolumn3 (width: 303px; background: # 424242; margin: 0; padding: 5px; float: left;) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-bottom { margin : 1px ; padding : 20px 0 0 0px ; background : # 333 ; overflow :hidden ; height : 50px ; color : #fff ; text-align :center ; text-transform :uppercase ; letter-spacing : 2px ; } # bottom (width: 943px; margin: 5px auto 0 auto; background: # 222; border: 1px solid # 424242;) # sub-bottom (margin: 1px; padding: 20px 0 0 0px; background: # 333; overflow: hidden; height: 50px; color: # fff; text-align: center; text-transform: uppercase; brev-avstånd: 2px;) 

Slutligen har vi skapat tre kolumn css layout. View Exempel och Ladda ner denna fil.

Jag skulle vara tacksam om du kunde ta en andra för att främja min blogg och dela den här länken med någon av dina gynnade nätverk webbplatser med hjälp av länken nedan ...

Filed under: Css, handledningar av admin