Απλή στήλη 2 css layout, css, design, css διάταξη |

Απλή στήλη 2 css layout

Αυτό είναι ένα tutorial για τη χρήση CSS για να δημιουργήσετε μια απλή διάταξη δύο στηλών.

Η διάταξη αποτελείται από μια κεφαλίδα, ένα κύριο περιεχόμενο στήλη, μια sidebar, και υποσέλιδο. Μια πολύ βασική διάταξη και δεν σε όλα δύσκολο να δημιουργηθεί μία φορά με CSS γνωρίζετε πώς να αντιμετωπίσουν την αναπόφευκτη Internet Explorer σφάλματα.

1. Βασική δομή

Πρώτα από όλα, να δημιουργήσουμε το βασικό HTML δομή:


 > <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 = "footer "> </ div> </ div> 
  Μετά από αυτό, έχουμε θέσει κάποιο περιεχόμενο στις διάφορες ενότητες:  > <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> Όνομα εταιρείας </ h1> <h4> Πληκτρολογήστε το σύνθημα </ h4> </ div> <div "sidebar" id => <h2> Πλοήγηση </ h2> <ul> <li> <a href = "#"> Αρχική </ a> </ li> <li> <a href = "#"> Σχετικά με εμάς </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Επικοινωνία </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Περιεχόμενο </ h2> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetuer dipiscing Elit.  Cum DIS ετοιμόγεννος Montes, nascetur ridiculus MUS.  1η Ιανουαρίου 2002 Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetuer adipiscing Elit.  Cum DIS ετοιμόγεννος Montes, nascetur ridiculus MUS.  > <h2> Footer </h2> </div> </div> 1 Ιανουαρίου 2002 </ p> </ div> <div id = "footer"> <h2> Υποσέλιδο </ h2> </ div> </ div>

2. Css Κωδικός

Τώρα που δημιουργούμε css κωδικός:


 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*/ ; } / * στυλ δύο στήλη διάρθρωση * / (* περιθώριο: 0? padding: 0?) (σώματος font-size: 100%? γραμματοσειρά-βάρος: κανονικός? γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif?) * html, (σώμα ύψος: 100%? min-ύψος: 100% / * Firefox * /?) 
  margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html, σελίδα # (περιθώριο: 0? padding: 0? ύψος: 100%?) (# σελίδα περιθώριο: 0 auto? padding: 0? πλάτος: 1009px? ύψος: 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 ; } ένα (text-decoration: ΚΑΝΕΝΑ?) α: φτερουγίζω (text-decoration: υπογραμμίζουν) ul, ol, li (περιθώριο: 0? padding: 0?) H1, H2, H3, H4, H5, H6 (περιθώριο: 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) (περιθώριο: 0? γραμμή-ύψος: 18px? padding: 0 0 10px 20px? font-size: 12px? σελίδα #) (περιθώριο: 0 auto? padding: 0? πλάτος: 1009px? ύψος: 100%? # header) (περιθώριο: 0? padding: 0? πλάτος: 100%? ύψος: 151px? απεικόνιση: block? υπόβαθρο-χρώμα: # eeeeee?) # sidebar (float: αριστερά? περιθώριο: 0? padding: 0? απεικόνιση: inline / * Internet Explorer * /? πλάτος: 200px? ύψος: 100%? υπόβαθρο-χρώμα: # cccccc?) # sidebar ul (list-style-type: ΚΑΝΕΝΑ?) # sidebar ul li (απεικόνιση: inline / * διερευνήσει Διαδίκτυο * /?) # sidebar ul li ένα (padding: 3px 4px? απεικόνιση: block? περιθώριο: 0px 0 0 16px? text-decoration: ΚΑΝΕΝΑ? χρώμα: # 0000E8) # sidebar ul li a: φτερουγίζω (color: # CC0000) # κύρια (περιθώριο: 0? padding: 0? float: αριστερά? απεικόνιση: block? πλάτος: 809px? ύψος: 100%? φόντο: # # dddddd) (υποσέλιδο περιθώριο: 0? padding: 0? απεικόνιση: block? πλάτος: 100%? ύψος: 50px? φόντο: # eeeeee? overflow: hidden?)