Tämä on opetusohjelma käytöstä CSS luoda yksinkertainen kolme saraketta asettelu.
Pohjapiirrokseltaan koostuu otsikko tärkein sisältö sarake, joka on sivupalkissa, ja alatunnisteeseen. A melko perus ulkoasu, eikä lainkaan vaikea luoda kanssa CSS kerran osaat käsitellä väistämätöntä Internet Explorer vikoja.


STREP ensin: me luoda html-rakenne

 > <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 = "#"> Etusivu </ a> </ li> <li> <a href = "#"> Meistä </ a> </ li> <li> <a href = "#"> Palvelut </ a> </ li> <li> <a href = "#"> Tuotteet </ a> </ li> <li> <a href = "#"> Sivukartta </ a> </ li> <li> < yksi href = "#"> Ota yhteyttä </ a> </ li> </ ul> </ div> <div id = "content"> <div id = "sub-content"> <div id = "sarake1" > <h2> About Us </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui muualle risus. Vuonna eu neque yksi tortor lacinia rhoncus.  Vuonna 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 muualle risus. Vuonna eu neque yksi tortor lacinia rhoncus.  Vuonna 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 > Palvelut </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui muualle risus. Vuonna eu neque yksi tortor lacinia rhoncus.  Vuonna 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 muualle risus. Vuonna eu neque yksi tortor lacinia rhoncus.  Vuonna 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 > Yhteystiedot Tiedot </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui muualle risus. Vuonna eu neque yksi tortor lacinia rhoncus.  Vuonna 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 muualle risus. Vuonna eu neque yksi tortor lacinia rhoncus.  Vuonna 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> 

Toinen vaihe: luomme perusasetuksen css rakenne

 ; 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; kirje-etäisyys: 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: häilyä (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% normaalia "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 ; } # sivu (background: # 323232; width: 971px; margin: 0 auto; korkeus: 100%; raja-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; korkeus : 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; näyttö: block; color: # fff; text-transform: uppercase; kirje-etäisyys: 2px;) # nevigation li a: häilyä (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 ; } # content (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 ; } # sarake1 (width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px; float: left;) # sarake2 (width: 302px; background: # 424242; margin: 0 1px 0 0; padding: 5px ; float: left;) # sarake3 (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 ; } # alhaalta (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; korkeus: 50 px; color: # fff; text-align: center; text-transform: uppercase; kirje-etäisyys: 2px;) 

Lopuksi meidän on luonut kolme sarakkeen css layout. View Esimerkki ja Lataa tämä tiedosto.

Olisin kiitollinen, jos voisitte ottaa toisen edistää blogiin ja jakaa tätä linkkiä kanssa mitään asemassa verkottumisen sivustot käyttämällä alla olevaa linkkiä ...

Filed under: css, Tutorials by admin