Si të Krijo css Tre Column Layout
Ky eshte nje tutorial se si të përdorin CSS e thjeshtë për të krijuar një tre column layout.
The layout përbëhet nga një goditje e topit në kokë, një shtyllën kryesore të përmbajtjes, një sidebar, dhe një këmbësor. Një bazë pretty layout, dhe aspak e vështirë për të krijuar me CSS sapo ju e dini se si të merren me të pashmangshme Internet Explorer bugs.
Strep parë: ne krijimin e një strukture baze 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 "nevigation" id => <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Rreth nesh </ a> </ li> <li> <a href = "#"> Shërbimet </ a> </ li> <li> <a href = "#"> Produkte </ a> </ li> <li> <a href = "#"> Harta e web faqes </ a> </ li> <li> < a href = "#"> Na kontaktoni </ a> </ li> </ ul> </ div> <div "content" id => <div id = "sub-content"> <div id = "column1" > <h2> Rreth nesh </ h2> <p> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Ut viverra BDI Nec risus. Në një neque eu tortor lacinia rhoncus. Në interdum placerat purus. Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum ulem Amet dhembje, </ p> <p> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Ut viverra BDI Nec risus. Në një neque eu tortor lacinia rhoncus. Në interdum placerat purus. > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dhembje ulem Amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column2"> <h2 > Shërbimet </ h2> <p> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Ut viverra BDI Nec risus. Në një neque eu tortor lacinia rhoncus. Në interdum placerat purus. Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum ulem Amet dhembje, </ p> <p> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Ut viverra BDI Nec risus. Në një neque eu tortor lacinia rhoncus. Në 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 dhembje ulem Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dhembje ulem Amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column3"> <h2 > Kontakt Detail </ h2> <p> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Ut viverra BDI Nec risus. Në një neque eu tortor lacinia rhoncus. Në interdum placerat purus. Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum ulem Amet dhembje, </ p> <p> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Ut viverra BDI Nec risus. Në një neque eu tortor lacinia rhoncus. Në interdum placerat purus. > 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> Lorem ipsum dhembje ulem Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dhembje ulem Amet, <a href = "#"> Readmore </ a> </ p> </ div> </ div> </ div> <div id = "bottom"> <div "sub-bottom" id => <span> Copyright © Developer e Xhennetit Designed Nga Developer e Xhennetit </ span> </ div> </ div> </ div>
Hapi i dytë: ne krijimin e një strukture baze 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; mbushje: 0;) H1, h2, h3, h4 (font: 100% "Gjeorgji", Times New Roman, Times, shrift me dhëmbëza; color: # fff; text-transformojë: uppercase; letër-spacio: 2px) H1 (font-size: 400%; text-lidhur: center; mbushje: 35px 0 0 0;) h2 (font-size: 150%;) h3 (font-size: 137%;) h4 (font-size : 120%; text-lidhur: center; color: # 848484;) ul, ol, li (list-style-type: none;) a (text-ornament: none; color: # 00CCFF) a: luhatem (text - ornament: underline;) p (color: # fff; font-size: 12px; font-familjes: "Gjeorgji", Times New Roman, Times, shrift me dhëmbëza; color: # fff; mbushje: 0 0 10px 0; line-height: 22px;)% normal "Georgia" , Times New Roman, Times, serif ; background : # 191919 ; } organ (font: 100% normal "Gjeorgji", Times New Roman, Times, shrift me dhëmbëza; 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 ; } # faqe (background: # 323232; width: 971px; margin: 0 auto; height: 100%; kufirit-left: 1px solid # 353535; kufirit-right: 1px solid # 353535; mbushje: 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; kufitare: 1px solid # 424242;) # nën-header (margin: 1px; mbushje: 1px; background: # 333; mbushem plotë: hidden; height : 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: 0 auto auto 5px; width: 943px; background: # 222; kufitare: 1px solid # 424242;) nevigation # ul (margin: 1px; mbushje: 0px; background: # 333; mbushem plotë: hidden;) # nevigation li (display: Inline; / * ie * / # nevigation) (noton një li: la; margin: 0; mbushje: 7px 10px; display: block; color: # fff; text-transformojë: uppercase; letër-spacio: 2px;) # nevigation një li: luhatem (background: # 424242; text-furniturë: 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 ; } # përmbajtjen (width: 943px; margin: 0 auto auto 5px; background: # 222; kufitare: 1px solid # 424242;) # nën-content (margin: 1px; mbushje: 1px; background: # 333; mbushem plotë: 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 ; } # column1 (width: 302px; background: # 424242; diferencë: 0 1px 0 0; mbushje: 5px; noton: la;) # column2 (width: 302px; background: # 424242; diferencë: 0 1px 0 0; mbushje: 5px ; noton: la; # column3) (width: 303px; background: # 424242; margin: 0; mbushje: 5px; noton: la;)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 ; } # fund (width: 943px; margin: 0 auto auto 5px; background: # 222; kufitare: 1px solid # 424242;) # sub (margin-bottom: 1px; mbushje: 20px 0 0 0px; background: # 333; mbushem plotë: fshehur; height: 50px; color: # fff; text-lidhur: center; text-transformojë: uppercase; letër-spacio: 2px;)
Së fundi kemi krijuar tre css column layout. View Shembull dhe Shkarko këtë fotografi.
Do të jem mirënjohës nëse ju mund të marrë një të dytë për të ndihmuar në promovimin e mi blog dhe ndajnë këtë lidhje me ndonjë nga faqet tuaja të preferuara rrjetin duke përdorur lidhjen e mëposhtme ...
Artikuj të ngjashme:
nëse ju gëzuar e lexuar këtë artikull, ju lutem shikoni të tjera lidhur me artikuj më poshtë:
Submit a Comment