Enkelt 2 kolonne css layout
Dette er en tutorial på hvordan du bruker CSS til å lage en enkel to kolonne layout.
Oppsettet består av en overskrift, en hovedinnhold kolonne, et sidefelt, og bunntekst. En ganske enkel layout, og ikke i det hele tatt vanskelig å lage med CSS når du vet hvordan man skal håndtere den uunngåelige Internet Explorer bugs.
1. Grunnleggende struktur
Først av alt, vi skaper den forenklede HTML-struktur:
Etter det vi legger noe av innholdet i de forskjellige delene:> <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing elit. <div id = "page"> <div id = "header"> <h1> Firmanavn </ h1> <h4> Skriv slagord </ h4> </ div> <div id = "sidebar"> <h2> Navigering </ h2> <ul> <li> <a href = "#"> Hjem </ a> </ li> <li> <a href = "#"> Om oss </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> <li> <a href = "#"> områdekartet </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Content </ h2> <p> Lorem Ipsum dolor sit amet, consectetuer dipiscing Elit. Cum dis parturient Montes, nascetur ridiculus mus. 1. januar 2002 Lorem Ipsum dolor sit amet, consectetuer adipiscing Elit. Cum dis parturient Montes, nascetur ridiculus mus. > <h2> Footer </h2> </div> </div> 1. januar 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>
2. Css Code
Nå oppretter vi css kode:
/ * style to kolonne layout * / ; padding : 0 ; } * (Margin: 0; padding: 0;) kropp ( font-size: 100%; font-weight: normal; ; font-family: Arial, Helvetica, sans-serif; ) * Html, body ( height: 100%; ; min-height: 100% / * firefox * /; )margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ; padding : 0 ; width : 1009px ; height : 100 %; } html, # side (margin: 0; padding: 0; height: 100%;) # side (margin: 0 auto; padding: 0; width: 1009px; height: 100%;); } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; 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 ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ; padding : 0 ; width : 1009px ; height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } a (text-decoration: none;) a: hover (text-decoration: underline) ul, ol, li (margin: 0; padding: 0;) h1, h2, h3, h4, h5, h6 (margin: 0; 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; padding: 0 0 10px 20px; font-size: 12px;) # side (margin: 0 auto; padding: 0; width: 1009px; height: 100%; ) # header (margin: 0; padding: 0; width: 100%; height: 151px; display: block; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; displayet: inline / * Internet Explorer * /; width: 200px; height: 100%; background-color: # cccccc;) # sidebar ul (list-style-type: none;) # sidebar ul li (display: inline / * internett utforske * /;) # sidebar ul li a (padding: 3px 4px; display: block; margin: 0px 0 0 16px; text-decoration: none; color: # 0000E8) # sidebar ul li a: hover (color: # cc0000) hoved # (margin: 0; padding: 0; float: left; display: block; width: 809px; height: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; bredde: 100%; height: 50px; background: # eeeeee; overflow: hidden;)
Endelig er vi ferdig. Vi har opprettet en enkel 2 kolonne css layout.Click her for å se eksempel
Relaterte artikler:
hvis du likte å lese denne artikkelen, kan du sjekke ut andre relaterte artiklene nedenfor:
Send inn en kommentar