Din hija tutorja dwar kif tuża CSS li jinħoloq sempliċi tliet kolonna tqassim.
Il-format jikkonsisti minn header, a kontenut prinċipali kolonna, a sidebar, u footer. A pretty-tqassim bażiku, u mhux fil kollha diffiċli li jinħolqu mal CSS darba tafu kif tittratta l-inevitabbli Internet Explorer bugs.


Strep ewwel: we tinħoloq struttura bażika html

 > <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 = "#"> About us </ a> </ li> <li> <a href = "#"> Servizzi </ a> </ li> <li> <a href = "#"> Prodotti </ 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 id-disposizzjonijiet ta sit amet, consectetur adipiscing elit.  Ut Viverra DUI nec risus. Fil eu neque a tortor lacinia rhonchus.  Fil interdum placerat purus.  Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum id-disposizzjonijiet ta sit amet, </ p> <p> Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit.  Ut Viverra DUI nec risus. Fil eu neque a tortor lacinia rhonchus.  Fil interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum id-disposizzjonijiet ta sit amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column2"> <h2 > Servizzi </ h2> <p> Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit.  Ut Viverra DUI nec risus. Fil eu neque a tortor lacinia rhonchus.  Fil interdum placerat purus.  Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum id-disposizzjonijiet ta sit amet, </ p> <p> Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit.  Ut Viverra DUI nec risus. Fil eu neque a tortor lacinia rhonchus.  Fil 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 id-disposizzjonijiet ta sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum id-disposizzjonijiet ta sit amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column3"> <h2 > Kuntatt Dettall </ h2> <p> Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit.  Ut Viverra DUI nec risus. Fil eu neque a tortor lacinia rhonchus.  Fil interdum placerat purus.  Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum id-disposizzjonijiet ta sit amet, </ p> <p> Lorem ipsum id-disposizzjonijiet ta sit amet, consectetur adipiscing elit.  Ut Viverra DUI nec risus. Fil eu neque a tortor lacinia rhonchus.  Fil 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 id-disposizzjonijiet ta sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum id-disposizzjonijiet ta sit amet, <a href = "#"> Readmore </ a> </ p> </ div> </ div> </ div> <div id = "bottom"> <div id = "sub-bottom"> <span> Copyright © Developer's Paradise Designed Permezz Developer's Paradise </ span> </ div> </ div> </ div> 

It-tieni pass: we tinħoloq struttura bażika css

 ; 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; test jittrasformaw: kbar; ittra-ispazjar: 2px) h1 (font-size: 400%; test tallinja: center; padding: 35px 0 0 0;) h2 (font-size: 150%; H3) (font-size: 137%; H4) (font-size : 120%; test tallinja: center; color: # 848484;) ul, ol, li lista (-style-type: none;) a (text-decoration: none; color: # 00CCFF) a: imbagħad jerġgħu (test - decoration: jenfasizzaw;) p (color: # FFF; font-size: 12px; font-familja: "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 ; } korp (font: 100% normali "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%; transkonfinali-left: 1px solidu # 353535; transkonfinali-lemin: 1px solidu # 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 auto 0; width: 943px; background: # 222; fruntiera: 1px solidu # 424242;) # sub-header (margin: 1px; padding: 1px; background: # 333; overflow: moħbija; għoli : 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 auto 0; width: 943px; background: # 222; fruntiera: 1px solidu # 424242;) # nevigation ul (margin: 1px; padding: 0px; background: # 333; overflow: moħbija;) # nevigation li (display: inline; / * ie * /) # nevigation li a (float: xellug; margin: 0; padding: 7px 10px; display: block; color: # FFF; test jittrasformaw: kbar; ittra-ispazjar: 2px;) # nevigation li a: imbagħad jerġgħu (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 ; } # (kontenut width: 943px; marġini: 5px auto auto 0; background: # 222; fruntiera: 1px solidu # 424242;) # sub-kontenut (margin: 1px; padding: 1px; background: # 333; overflow: moħbija;) 
 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 ; } # (column1 width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px; float: xellug;) (# column2 width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px ; float: xellug;) (# column3 width: 303px; background: # 424242; margin: 0; padding: 5px; float: xellug;) 
 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; marġini: 5px auto auto 0; background: # 222; fruntiera: 1px solidu # 424242;) # sub-qiegħ (margin: 1px; padding: 20px 0 0 0px; background: # 333; overflow: moħbija; għoli: 50px; color: # FFF; test tallinja: center; test jittrasformaw: kbar; ittra-ispazjar: 2px;) 

Finalment ħloqna tliet kolonna css layout. View Eżempju u Download dan il-fajl.

Inkun nafulek jekk tista 'tieħu t-tieni li jgħin jippromwovi blog tiegħi u jaqsmu din ir-rabta ma' kwalunkwe minn networking siti favoriti tiegħek billi tuża l-link hawn taħt ...

Iffajljati taħt: css, tutorials by admin