Simple 2 sarakkeen css taitto
Tämä on opetusohjelma käytöstä CSS luoda yksinkertaisen kahden sarakkeen asettelun.
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.
1. Perusrakenne
Ensinnäkin, me luomme HTML-rakenne:
Sen jälkeen me joitakin sisällön eri osat:> <div id = "page"> > <div id = "header"> <h1> Yrityksen nimi </ h1> <h4> Kirjoita iskulause </ h4> </ div> > <div id = "sidebar"> <h2> liikkuminen </ h2> <ul> > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> > About us </a> </li> <li> <a href = "#"> Meistä </ a> </ li> > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> > Contact </a> </li> <li> <a href = "#"> Yhteystiedot </ a> </ li> > Sitemap </a> </li> <li> <a href = "#"> Sivukartta </ a> </ li> </ ul> </ div> > <div id = "main"> <h2> sisältö </ h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing Elit. Cum DIS synnyttäjä Montes, nascetur ridiculus Mus. 1. tammikuuta 2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum DIS synnyttäjä Montes, nascetur ridiculus Mus. 1. tammikuuta 2002 </ p> </ div> > <div id = "footer"> <h2> alatunniste </ h2> </ div> </ div>
2. Css-koodi
Nyt me luomme css-koodi:
/ * tyyli kaksi saraketta ulkoasu * / ; padding : 0 ; } * (Margin: 0; padding: 0;) keho ( font-size: 100%; font-weight: normal; ; font-family: Arial, Helvetica, sans-serif; ) * Html, body ( korkeus: 100%; ; min-height: 100% / * firefox * /; )html, # page ( margin: 0; padding: 0; korkeus: 100%; ) # page ( ; Margin: 0 auto; Padding: 0; Width: 1009px; Korkeus: 100%; ); } a (text-decoration: none;) text-decoration :underline } a: häilyä (text-decoration: underline) ; padding : 0 ; } ul, ol, li (margin: 0; padding: 0;) h1, h2, h3, h4, h5, h6 ( margin: 0; 20px ; padding: 10px 0 0 20px; ) ; } h1 (font-size: 28px;) ; } h2 (font-size: 24px;) ; } h3 (font-size: 18px;) ; } h4 (font-size: 12px;) ; } h5 (font-size: 10px;) ; p (margin: 0; line-height: 18px; 10px 20px ; padding: 0 0 10px 20px; font-size: 12px; ) # page ( ; Margin: 0 auto; Padding: 0; Width: 1009px; Korkeus: 100%; ) # header ( margin: 0; padding: 0; width: 100%; height: 151px; näyttö: block; ; background-color: # eeeeee; ) # sidebar ( float: left; margin: 0; padding: 0; ; display: inline / * Internet Explorer * /; width: 200px; korkeus: 100%; ; background-color: # cccccc; ) # sidebar ul ; } (List-style-type: none;) display : inline /*internet explore*/ ; } # sidebar ul li (display: inline / * Internet tutkia * /;) # sidebar ul li yksi ( ; padding: 3px 4px; näyttö: block; 16px ; margin: 0px 0 0 16px; text-decoration: none; color: # 0000E8 ) # sidebar ul li a: häilyä : #CC0000 } (Color: # cc0000) # main ( margin: 0; padding: 0; float: left; näyttö: block; width: 809px; korkeus: 100%; background: # dddddd ) # footer ( margin: 0; padding: 0; näyttö: block; width: 100%; korkeus: 50 px; ; background: # eeeeee; overflow: hidden; )
Lopuksi olemme tehneet. Olemme luoneet yksinkertainen 2 sarakkeen css layout.Click tästä nähdäksesi esimerkki
Aiheeseen liittyvät artikkelit:
jos olet nauttinut käsittelyssä tämä artikkeli löytyy muita aiheeseen liittyviä artikkeleita alla:



















































ajay sanoo: Kesäkuu 16th, 2009 at 1:19 pm Said:
thanks for sharing tämä opetusohjelma:)