Paprasta 2 skiltyje css išdėstymą, css, design, css išdėstymas |

Paprasta 2 skiltyje css išdėstymas

Tai yra pamoka apie tai, kaip naudoti CSS sukurti paprastą dviejų skiltyje išdėstymą.

Išdėstymo sudaro antraštė, pagrindinės turinio skiltyje, šoninis skydelis, ir poraštės. A Pretty pagrindinio išdėstymo, o ne visus sunku kurti su CSS, kai jūs žinote, kaip elgtis su neišvengiama Internet Explorer klaidų.

1. Pagrindinis struktūra

Visų pirma, mes sukurti paprasto HTML struktūrą:


 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div id = "page"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main"> </ div> <div id = "stopkę "> </ div> </ div> 
  Po to, kai mes kelis į skirtingas dalis:  > <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> Pavadinimas </ h1> <h4> Įveskite savo šūkį </ h4> </ div> <div id = "sidebar"> <h2> Patikrinkite </ h2> <ul> <li> <a href = "#"> Pradžia </ a> </ li> <li> <a href = "#"> Apie mus </ a> </ li> < Li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Kontaktai </ a> </ li> <li> <a href = "#"> Svetainės medis </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Turinys </ h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing elit.  Cum dis Gimdymo Montes, nascetur ridiculus mus.  January 1, 2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum dis Gimdymo Montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> Sausio 1 d., 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>

2. Css kodas

Dabar mes sukursime css kodas:


 margin : 0 ; padding : 0 ; } body { font-size : 100 %; font-weight :normal ; font-family :Arial , Helvetica, sans-serif ; } * html, body { height : 100 %; min-height : 100 % /*firefox*/ ; } / * stilius dvi skiltis išdėstymo * / * (margin: 0; padding: 0;) body (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 # page (margin: 0; padding: 0; height: 100%;) # page (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;) # page (margin: 0 auto; padding: 0; width: 1009px; height: 100%; ) # header (margin: 0; padding: 0; width: 100%; Aukštis: 151px; display: block; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; kalbomis: śródtekstowy / * Internet Explorer * /; width: 200px; aukštis: 100%; background-color: # CCCCCC;) # sidebar ul (list-style-type: none;) # sidebar ul li (display: inline / * interneto ištirti * /;) # 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; aukštis: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; plotis: 100%; aukštis: 50px; background: # eeeeee; overflow: hidden;)