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


STREP πρώτος: να δημιουργήσουμε μια βασική δομή html

 > <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 "nevigation" id => <ul> <li> <a href = "#"> Αρχική </ a> </ li> <li> <a href = "#"> Σχετικά με εμάς </ a> </ li> <li> <a href = "#"> Υπηρεσίες </ a> </ li> <li> <a href = "#"> Προϊόντα </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> < ένα href = "#"> Επικοινωνία </ a> </ li> </ ul> </ div> <div id = "content"> <div id = "sub-content"> <div id = "column1" > <h2> About Us </ h2> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit.  Ut viverra dui π.δ.κ.α. risus. Σε eu neque ένα tortor lacinia rhoncus.  Σε interdum placerat purus.  Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit. Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, </ p> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit.  Ut viverra dui π.δ.κ.α. risus. Σε eu neque ένα tortor lacinia rhoncus.  Σε interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit. Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column2"> <h2 > Υπηρεσίες </ h2> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit.  Ut viverra dui π.δ.κ.α. risus. Σε eu neque ένα tortor lacinia rhoncus.  Σε interdum placerat purus.  Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit. Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, </ p> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit.  Ut viverra dui π.δ.κ.α. risus. Σε eu neque ένα tortor lacinia rhoncus.  Σε 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 θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit. Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column3"> <h2 > Επικοινωνία Λεπτομέρειες </ h2> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit.  Ut viverra dui π.δ.κ.α. risus. Σε eu neque ένα tortor lacinia rhoncus.  Σε interdum placerat purus.  Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit. Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, </ p> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit.  Ut viverra dui π.δ.κ.α. risus. Σε eu neque ένα tortor lacinia rhoncus.  Σε 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 θλίψη κάθεται Οργανισμός, consectetur adipiscing Elit. Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, <a href = "#"> Readmore </ a> </ p> </ div> </ div> </ div> <div id = "κάτω"> <div id = "sub-bottom"> <span> Copyright © Developer της Paradise Designed By Developer της Παράδεισος </ span> </ div> </ div> </ div> 

Δεύτερο βήμα: να δημιουργήσουμε μια βασική δομή css

 ; 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 ; } * (Περιθώριο: 0? Padding: 0?) H1, H2, H3, h4 (font: 100% "Γεωργία", Times New Roman, Times, serif? Color: # FFF? Κείμενο-μετατροπή: κεφαλαία? Επιστολή-απόσταση: 2px) h1 (font-size: 400%? κείμενο-ευθυγραμμιστεί: κέντρο? padding: 35px 0 0 0?) h2 (font-size: 150%?) H3 (font-size: 137%?) h4 (font-size : 120%? κείμενο-ευθυγραμμιστεί: κέντρο? color: # 848484?) ul, ol, li (list-style-type: ΚΑΝΕΝΑ? ένα) (text-decoration: ΚΑΝΕΝΑ? color: # 00CCFF) α: φτερουγίζω (text - διακόσμηση: υπογραμμίζουν?) p (color: # FFF? font-size: 12px? γραμματοσειρά-οικογένεια: "Γεωργία", Times New Roman, Times, serif? color: # FFF? padding: 0 0 10px 0? γραμμή-ύψος: 22px?) 
  % normal "Georgia" , Times New Roman, Times, serif ; background : # 191919 ; } σώμα (font: 100% της κανονικής "Γεωργία", Times New Roman, Times, serif? φόντο: # 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 ; } # (σελίδα φόντο: # 323232? πλάτος: 971px? περιθώριο: 0 auto? ύψος: 100%? συνόρων-αριστερά: 1PX στερεών # 353535? συνόρων-δεξιά: 1PX στερεών # 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 (περιθώριο: 0px auto 0 auto? πλάτος: 943px? φόντο: 222 #? συνόρων: 1PX στερεών # 424242?) # υπο-header (περιθώριο: 1PX? padding: 1PX? φόντο: 333 #? overflow: hidden? ύψος : 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 (περιθώριο: 5px auto 0 auto? πλάτος: 943px? φόντο: 222 #? συνόρων: 1PX στερεών # 424242?) # nevigation ul (περιθώριο: 1PX? padding: 0px? φόντο: 333 #? overflow: hidden?) # nevigation Li (απεικόνιση: inline? / * δηλαδή * /) # nevigation που ένα (float: αριστερά? περιθώριο: 0? padding: 7px 10px? απεικόνιση: block? χρώμα: # FFF? κείμενο-μετατροπή: κεφαλαία? επιστολή-απόσταση: 2px?) # nevigation που α: (φτερουγίζω φόντο: # 424242? text-decoration: ΚΑΝΕΝΑ? χρώμα: 00CCFF #?) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-content { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; } # (περιεχόμενο πλάτος: 943px? περιθώριο: 5px auto 0 auto? φόντο: 222 #? συνόρων: 1PX στερεών # 424242?) # υπο-content (περιθώριο: 1PX? padding: 1PX? φόντο: 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 ; } # (column1 πλάτος: 302px? φόντο: # 424242? περιθώριο: 0 1PX 0 0? padding: 5px? float: αριστερά?) (# column2 πλάτος: 302px? φόντο: # 424242? περιθώριο: 0 1PX 0 0? padding: 5px ? float: αριστερά?) (# column3 πλάτος: 303px? φόντο: # 424242? περιθώριο: 0? padding: 5px? float: αριστερά?) 
 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 ; } # (κάτω πλάτος: 943px? περιθώριο: 5px auto 0 auto? φόντο: 222 #? συνόρων: 1PX στερεών # 424242?) # υπο-κάτω (περιθώριο: 1PX? padding: 20px 0 0 0px? φόντο: 333 #? υπερχείλιση: hidden? ύψος: 50px? color: # FFF? κείμενο-ευθυγραμμιστεί: κέντρο? κείμενο-μετατροπή: κεφαλαία? επιστολή-Απόσταση: 2px?) 

Τέλος, δημιουργήσαμε τρεις στήλη css layout. Προβολή Παράδειγμα και λήψη αυτού του αρχείου.

Θα ήμουν ευγνώμων εάν θα μπορούσε να λάβει μια δεύτερη, προκειμένου να προωθηθούν το ιστολόγιό μου και να μοιραστούν αυτό το δεσμό με οποιαδήποτε από τις ευνοημένες δικτύωση τόπων χρησιμοποιώντας το παρακάτω σύνδεσμο ...

Filed under: Css, Tutorials από admin