Πώς να οικοδομήσουμε μια βασική διάταξη css
Σχεδιασμός χωρίς πίνακες με τη χρήση CSS διαγράμματα είναι όλο το νέο πρότυπο για το Διαδίκτυο, λόγω των οφελών που αναφέρονται στο προηγούμενο άρθρο μου. Web browsers που χρησιμοποιούνται στις μέρες μας είναι πλέον σε θέση να καθιστούν τις ιστοσελίδες proficiently. Στο άρθρο αυτό θα καταβάλει προσπάθεια για τη δημιουργία ενός βασικού 2 στήλη CSS διάταξης που μπορείτε να χρησιμοποιήσετε για τη μελλοντική σχεδίαση projects.Web Σελίδα: http://www.isitebuild.com/css/css-layout.html φύλλο στυλ: http://www.isitebuild.com/css/stylesheet.htm1. Χωρίστε τη σελίδα σας σε τμήματα - τις ετικέτες div id σας επιτρέπει να δημιουργήσετε ξεχωριστές διαιρέσεις στην ιστοσελίδα σας. Έχουν προσδιοριστεί με ένα μοναδικό αναγνωριστικό. Στη συνέχεια, μπορείτε να προσθέσετε ένα στυλ (css επιλογέα) που ισχύει για τα ειδικά div id του. Να θυμάστε ότι πρέπει να περιλαμβάνει το DOCTYPE (να καταστήσει τη σελίδα σας με ακρίβεια στην browsers) και meta tags (μηχανές αναζήτησης δίνει τη δυνατότητα να αράχνη σελίδες σας). Περιτύλιγμα: είναι div ότι το αναδιπλώνει κοντά όλα τα άλλα divs σαν ένα δοχείο για τα στοιχεία της σελίδας. κεφαλίδας: καθορίζει την αρχή του banner κύρια σελίδα: καθορίζει το βασικό περιεχόμενο της σελίδας nav: ορίζει την πλοήγηση της σελίδας υποσημείωση: ορίζει το υποσέλιδο και υπο-πλοήγησης της Σελίδας2. Δημιουργήστε το CSS κώδικα - το CSS κώδικα στυλ της σελίδας στο κέντρο 2 στήλη CSS διάταξη με μια γραμμή πλοήγησης και υποσέλιδο. Η div # wrapper στυλ δημιουργεί το κέντρο πλαίσιο το οποίο λειτουργεί ως ένα δοχείο για το υπόλοιπο της σελίδας. Το πλάτος: 80% κανόνας ορίζει το πλάτος του div. Το υπόβαθρο-χρώμα: # FFFFFF κανόνα δημιουργεί ένα λευκό φόντο για το div. Το περιθώριο-top: 50px και περιθώριο-κάτω: 50px κανόνες δημιουργούν ένα χώρο 50 εικονοστοιχεία για την άνω και κάτω περιθώρια για την div itself.The σωστό τρόπο κέντρο ένα μπλοκ επίπεδο στοιχείο με CSS είναι να θέσει περιθώριο-αριστερό: auto και περιθώριο-δικαίωμα: auto. Αυτό αναθέτει το πρόγραμμα για τον αυτόματο υπολογισμό των ίσων περιθώρια και για τις δύο πλευρές, με αποτέλεσμα το κεντράρισμα div. Τα σύνορα: λεπτή στερεών # 000000 κανόνας προσθέτει ένα πλαίσιο γύρω από την εξωτερική div. Το υπόλοιπο του κώδικα CSS στυλ της divs για την κεφαλίδα, υποσέλιδο, nav, και κύρια content.The div # # div κεφαλίδα και υποσέλιδο στυλ που padding περιθώρια και για εκείνους divs. Επιπλέον, div # header περιλαμβάνει το κείμενο-ευθυγραμμιστεί: κέντρο κανόνα σε κέντρο κεφαλίδα κείμενο, και div # footer περιλαμβάνει τα σύνορα-top: # 000000 στερεά λεπτό για να δημιουργήσετε ένα κανόνα συνόρων κατά μήκος το επάνω άκρο του div για την αντικατάσταση του κανόνα πάνω από το οριζόντιο υποσημείωση στον πίνακα που βασίζεται layout.The div # nav και div # κύρια στυλ δημιουργήσει τις δύο στήλες στη μέση του θέση στο κέντρο. Στο div # nav στυλ, το float: αριστερά κανόνα div να πιέσει την αριστερή πλευρά της μητρικής του στοιχείου (το περιτύλιγμα div), και το πλάτος: 25% κανόνας ορίζει το πλάτος της div σε 25 τοις εκατό της μητρικής στοιχείο. Με τη nav div floated προς τα αριστερά και περιορίζεται σε ένα σύνολο πλάτος, αφήνει περιθώριο για την κύρια div να κινηθεί προς τα επάνω προς τα δεξιά του nav div, δημιουργώντας έτσι τις δύο στήλη αποτέλεσμα. Το div # κύρια στυλ περιλαμβάνει το περιθώριο-αριστερά: 30% κανόνας να διατηρήσει το κείμενο ευθυγραμμίζεται με νοικοκυρεμένος στήλη αντί άπλωμα κάτω από τη nav στήλη. Ο κύριος div αριστερό περιθώριο της έχει οριστεί σε τιμή ελαφρώς υψηλότερη από την πλάτος του φύλλου nav div.Style http://www.isitebuild.com/css/stylesheet.htmIf συνδέσεις εντάσσονται σε κάποιο άλλο σημείο της σελίδας θα κληρονομούν τις ίδιες ιδιότητες όπως παραπάνω .. μια μπλε σύνδεση που αιωρείται στο κόκκινο. Κι αν θέλετε να δημιουργήσουν ένα άλλο σύνολο των δεσμών που έχουν διαφορετικό χρώμα και με το ποντίκι περνά πάνω τους είναι underlined.4. Δημιουργήστε το κάτω - να συμπεριληφθεί και αυτή στο τμήμα της σελίδας, να χρησιμοποιήσω div # υποσέλιδο και κωδικός κάθε σύνδεσμος ανάλογα. Για να κάνετε τη λίστα πάει οριζόντια χρησιμοποιώ: απεικόνιση: inline? Τώρα που έχω τελειώσει τη δημιουργία μου φύλλο στυλ που θέλω να ελαττώσει τον κώδικα στη σελίδα από τη σύνδεσή του με το εξωτερικό φύλλο στυλ. Να πώς: 4. Δημιουργήστε ένα εξωτερικό φύλλο στυλ - αντιγράψετε και να επικολλήσετε όλα τα css κώδικα (χωρίς αυτές τις ετικέτες:) σε notepad και σήματος είναι κάτι σαν "φύλλο στυλ". Τοποθετήστε αυτό το φύλλο στυλ μεταξύ των επικεφαλής των ετικετών σας web page.This θα μειώσει τον κώδικα στη σελίδα σας γι 'αυτό θα φορτώσει γρήγορα καθώς οι μηχανές αναζήτησης να μπορούν πιο εύκολα να σας αράχνη web page.4. Προσθήκη περιεχόμενο στη σελίδα σας - αφού έχετε τη σελίδα σας αναζητούν σωστά, μπορείτε να προσθέσετε περισσότερο περιεχόμενο σε αυτό. Προσαρμογές που μπορεί εύκολα να γίνει σε οποιοδήποτε στυλ για τη σελίδα (ή ολόκληρο το site σας) με μία απλή επεξεργασία στυλ sheet.5. Ανεβάστε τα αρχεία σας - να είστε βέβαιος να ανεβάσετε τις ιστοσελίδες σας και φύλλο στυλ για το ριζικό κατάλογο σας server.6. Επικυρώστε τον κωδικό σας - να είστε σίγουροι για την επικύρωση σας xhtml code: http://validator.w3.org/ και css κωδικός: http://jigsaw.w3.org/css-validator/ και εφόσον γίνουν διορθώσεις necessary.7. Έλεγχος συμβατότητας προγράμματος περιήγησης και οθόνης - ελέγχει ότι η σελίδα σας καθιστά πολύ δημοφιλή στο browser (IE6, NN7, Firefox) Αν αρχίζουν με CSS διαγράμματα, να εφαρμόζουν με αργό ρυθμό στη συνέχεια, κάνοντας μικρές αλλαγές στις σελίδες σας, δηλαδή τη δημιουργία ενός στυλ φύλλο για την κύρια και τις γραμματοσειρές μόνο κεφαλίδες. Όπως θα γίνει πιο εξοικειωμένοι με CSS σας μπορεί τελικά να αξιοποιήσει όλες τις μελλοντικές σας ιστοσελίδες με CSS layouts.Resources: Βασική διάταξη CSS http://www.isitebuild.com/css/css-layout.htmlCSS stylesheet http://www.isitebuild.com/css/stylesheet.htmBenefits των CSS http://www.isitebuild.com/css/index. htmHerman Drost είναι η Certified Internet Webmaster (CIW) ιδιοκτήτης και συντάκτης των http://www.iSiteBuild.com Affordable Web Site Design και Web Hosting. Εγγραφείτε για να του "Συμβουλές Μάρκετινγκ" ενημερωτικό δελτίο για πιο πρωτότυπα άρθρα. mailto: subscribe@isitebuild.com. Μπορείτε να διαβάσετε
Αρθρο Πηγη: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Webmaster παίρνει τον κώδικα HTML
Προσθεστε αυτο το αρθρο στον ιστοτοπο σας τωρα!
Webmaster υποβάλλει τα άρθρα σας
Εγγραφή που απαιτείται καμία! Συμπληρώστε τη μορφή και το άρθρο σας είναι στον κατάλογο Messaggiamo.Com
