Dette er en tutorial om hvordan man bruger CSS til at skabe en enkel tre kolonne layout.
Indretningen består af en overskrift, en hovedindhold kolonne, en sidebjælke, og en sidefod. Et ganske grundlæggende layout, og slet ikke svært at skabe med CSS, når du ved, hvordan man skal håndtere den uundgåelige Internet Explorer bugs.


STREP første: Vi skaber en grundlæggende 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 = "#"> Hjem </ a> </ li> <li> <a href = "#"> Om os </ a> </ li> <li> <a href = "#"> Services </ a> </ li> <li> <a href = "#"> Produkter </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> < en href = "#"> Kontakt os </ a> </ li> </ ul> </ div> <div id = "content"> <div id = "sub-content"> <div id = "kolonne1" > <h2> Om os </ h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian 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 ian 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 > Services </ h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian 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 ian 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 > Kontakt info </ h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian 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 ian 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 designet af Developer's Paradise </ span> </ div> </ div> </ div> 

Andet trin: vi skaber en grundlæggende 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: store bogstaver, brev-afstand: 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;) 
  % 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: skjulte; højden : 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: skjulte;) # nevigation li (display: inline; / * IE * /) # nevigation li a (float: left; margin: 0; padding: 7px 10px; sprogudgaven: blok; color: # FFF; text-transform: store bogstaver, brev-afstand: 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 ; } # indhold (width: 943px; margin: 5px auto 0 auto; background: # 222; border: 1px solid # 424242;) # sub-indhold (margin: 1px; padding: 1px; background: # 333; overflow: skjulte;) 
 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 ; } # kolonne1 (width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px; float: left;) # kolonne2 (width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px ; float: left;) # kolonne3 (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: skjulte; height: 50px; color: # FFF; text-align: center; text-transform: store bogstaver, brev-afstand: 2px;) 

Endelig har vi oprettet tre kolonne css layout. View Eksempel og Hent denne fil.

Jeg ville være taknemmelig, hvis De kunne tage en anden til at hjælpe med at fremme min blog og dele dette link til en af dine foretrukne netværk websteder ved hjælp af nedenstående link ...

Filed under: Css, Tutorials af admin