Τα πολύ βασικά ενός ιστότοπου που βασίζεται σε Div: 7 βήματα

2025 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2025-01-13 06:57

Αυτό το διδακτικό θα σας δείξει τα βασικά για το πώς να δημιουργήσετε έναν ιστότοπο με divs. Επειδή οι πίνακες που χρησιμοποιούνται για τη διάταξη είναι κακοί!: pΓια να καταλάβετε αυτό το διδακτικό, θα πρέπει να γνωρίζετε βασικά html και css. Εάν δεν καταλαβαίνετε κάτι, μη διστάσετε να ρωτήσετε. Η προσωπική μου αρχική σελίδα χρησιμοποιεί επίσης αυτό το είδος δομής div.

Βήμα 1: Δημιουργήστε τα Βασικά αρχεία

Δημιουργήστε πρώτα το αρχείο html. Θα προσθέσουμε τα βασικά σε αυτό. Το αρχείο css θα είναι άδειο προς το παρόν. Το αρχείο html περιέχει τώρα: δοκιμή Αποθηκεύστε το αρχείο html ως κάτι.html. Μπορείτε να επιλέξετε μόνοι σας το όνομα. Το αρχείο css πρέπει να αποθηκευτεί ως.css. Βεβαιωθείτε ότι του δώσατε το ίδιο όνομα όπως αναφέρεται στο αρχείο html. Σε αυτήν την περίπτωση "style.css". Έχουμε τώρα μια απλή κενή σελίδα html όταν γίνεται προεπισκόπηση στο πρόγραμμα περιήγησής μας.

Βήμα 2: Επεξεργασία της ετικέτας σώματος για βασικά χρώματα, γραμματοσειρές,…

Θα αφήσουμε το αρχείο html ως έχει και θα επεξεργαζόμαστε μόνο το αρχείο css. Προσθέστε τον ακόλουθο κώδικα στο αρχείο css: body {background: #444444; font-family: verdana, arial, sans-serif; χρώμα: #444444; γραμματοσειρά: 12px; margin: 0px;} Με αυτό το κομμάτι κώδικα θα ορίσουμε όλες τις ιδιότητες της ετικέτας σώματος. Δεδομένου ότι όλο το περιεχόμενο βρίσκεται στην ετικέτα σώματος, αυτές οι ρυθμίσεις θα επηρεάσουν ολόκληρη τη σελίδα. Το φόντο και το χρώμα της γραμματοσειράς (χρώμα) έχουν οριστεί σε σκούρο γκρι. Η οικογένεια γραμματοσειρών (οικογένεια γραμματοσειράς) έχει οριστεί σε verdana. Εάν ο υπολογιστής που χρησιμοποιείται για την προβολή του ιστότοπού μας δεν έχει τη γραμματοσειρά "verdana", θα εμφανίσει τον ιστότοπό μας με τη γραμματοσειρά "arial". Μπορείτε να προσθέσετε περισσότερες γραμματοσειρές στη λίστα. Το "sans-serif" είναι ο γενικός τύπος που θα χρησιμοποιηθεί όταν δεν ήταν διαθέσιμη καμία γραμματοσειρά που δώσατε. Το μέγεθος της γραμματοσειράς (μέγεθος γραμματοσειράς) έχει οριστεί σε 12 εικονοστοιχεία. Αυτή είναι μια απόλυτη τιμή. Εάν θέλετε να επεξεργαστείτε άλλα μεγέθη γραμματοσειρών (όπως οι κεφαλίδες, οι παράγραφοι, τα στοιχεία μενού, …) μπορείτε να χρησιμοποιήσετε τη σχετική μονάδα "em" αντί του "px". Με αυτόν τον τρόπο, εάν θέλετε να αλλάξετε το μέγεθος του ιστότοπού σας, θα πρέπει να αλλάξετε μόνο το μέγεθος της γραμματοσειράς του σώματος. Το περιθώριο έχει οριστεί σε 0px και για τις τέσσερις πλευρές της ετικέτας σώματος. Αυτό γίνεται για να βεβαιωθείτε ότι ο ιστότοπος θα κολλήσει στο επάνω μέρος του παραθύρου.

Βήμα 3: Προσθήκη κοντέινερ με κεφαλίδα και περιεχόμενο

Τώρα θα προσθέσουμε το δοχείο. Αυτό είναι απλά ένα επίκεντρο div που θα περιέχει ολόκληρο τον ιστότοπό μας. Σε αυτό το κοντέινερ, θα προσθέσουμε δύο ακόμη div. ένα div περιεχόμενο και μια κεφαλίδα div. Το αρχείο html μας θα έχει τώρα την εξής μορφή: δοκιμή επικεφαλίδας περιεχομένου Θα προσθέσουμε τον ακόλουθο κώδικα στο αρχείο css: div#container {width: 800px; περιθώριο: 0px auto; φόντο: #FFFFFF; padding: 0px;} div#content {width: 800px; padding-top: 100px; φόντο: κίτρινο;} div#κεφαλίδα {πλάτος: 800px; ύψος: 100px; φόντο: μπλε θέση: απόλυτη? top: 0px;}. clearfix: after {content: "."; οθόνη: μπλοκ? ύψος: 0; σαφές: και τα δύο? ορατότητα: κρυμμένο;}. clearfix {display: inline-block;}/* Απόκρυψη από IE Mac \*/. clearfix {display: block;} div#container σημαίνει ότι έχουμε μια ετικέτα div με id "container". Θα προσθέσουμε μερικά χρώματα και ένα "περιθώριο: 0px auto;" για να βεβαιωθούμε ότι το κοντέινερ μας είναι κεντραρισμένο στη σελίδα. Πρέπει να δώσουμε στο περιεχόμενο μια επένδυση και στην κεφαλίδα μια απόλυτη τιμή με ένα "πάνω: 0px" για να βεβαιωθούμε ότι η κεφαλίδα είναι τοποθετημένη πάνω από το άλλο περιεχόμενο. τα άσχημα χρώματα. Είναι απλώς για να διευκολύνουμε την ανάγνωση των χρωμάτων και να δούμε τα διαφορετικά div. Θα χρειαστούμε αυτόν τον περίεργο κώδικα επιδιόρθωσης για να βεβαιωθούμε ότι τα divs πλοήγησης και περιεχομένου (που προστέθηκαν στο επόμενο βήμα) δεν πέφτουν από το περιβάλλον div.

Βήμα 4: Δημιουργήστε δύο διαχωριστικά στο τμήμα περιεχομένου για πλοήγηση και πραγματικό περιεχόμενο

Τώρα θα προσθέσουμε δύο ακόμη div στο περιεχόμενο div. Ένα για πλοήγηση και ένα για το πραγματικό περιεχόμενο. Μεταξύ της ετικέτας περιεχομένου. θα προσθέσετε τον νέο κωδικό:

Πλοήγηση Κύριο περιεχόμενο Θα προσθέσουμε κάποιο κώδικα css για να εμφανιστούν οι divs πλοήγησης και κύριου περιεχομένου. Div#nav {width: 200px; float: αριστερά? φόντο: πορτοκαλί;} div#maincontent {πλάτος: 600px; float: δεξιά? φόντο: ροζ;} Σημειώστε το γεγονός ότι αυτά τα δύο div είναι και τα δύο πλωτά. Αν δεν είχαμε βάλει τον επιπλέον κωδικό καθαρισμού στο προηγούμενο βήμα, τα div θα επιπλέουν έξω από το περιβάλλον div. Με τη μέθοδο clearfix, θα διασφαλίσουμε ότι αυτό δεν συμβαίνει.

Βήμα 5: Προσθέστε μερικά επιπλέον Divs για δομή στην πλοήγηση

Τώρα θα προσθέσουμε μερικά επιπλέον divs και στο div "nav" για να δημιουργήσουμε κάποιο είδος δομής στην ιστοσελίδα μας. Αλλάξτε το ακόλουθο κομμάτι κώδικα:

• Foo
• Μπαρ

Τώρα θα διαφημίσουμε ένα κομμάτι κώδικα για να καθορίσουμε πώς πρέπει να εμφανίζεται το div "navblock". Σημειώστε ότι το navblock έχει μια κλάση και όχι ένα αναγνωριστικό. Ο λόγος για αυτό είναι απλός. τα div με ένα αναγνωριστικό εμφανίζονται μόνο μία φορά (το μπλοκ πλοήγησης, η κεφαλίδα, το υποσέλιδο,…). Τα Divs με τάξεις μπορούν να εμφανίζονται περισσότερες από μία φορές. Εδώ θα χρησιμοποιήσουμε μια τάξη. Σε περίπτωση που θέλουμε να προσθέσουμε άλλο μπλοκ πλοήγησης αργότερα.div.navblock {width: 180px; περιθώριο: 5px auto; περίγραμμα: 1px σταθερό κόκκινο;} Αν θέλουμε να προσθέσουμε άλλο μπλοκ πλοήγησης, θα πρέπει απλώς να προσθέσουμε μια νέα… δομή. Ο κωδικός σας θα μοιάζει τώρα με αυτόν.

• Foo
• Μπαρ
• Γιούχα
• Μακριά

Βήμα 6: Προσθέστε μερικά επιπλέον Divs για δομή στο κύριο περιεχόμενο

Τώρα θα κάνουμε το ίδιο για το κύριο περιεχόμενο div. Ο κώδικας μοιάζει τώρα με αυτόν:

Lorem ipsum dolor sit amet,…

Και πάλι, θα προσθέσουμε ένα κομμάτι κώδικα στο αρχείο css για να καθορίσουμε τον τρόπο εμφάνισης του div: div.contentblock {width: 580px; περιθώριο: 5px auto; περίγραμμα: 1px σταθερό λευκό;} Μπορούμε τώρα να προσθέσουμε ένα άλλο μπλοκ περιεχομένου προσθέτοντας ένα άλλο "…" στο κύριο περιεχόμενο div όπως αυτό.

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Βήμα 7: Κάντε τον ιστότοπο λίγο λιγότερο άσχημο

Τώρα το διασκεδαστικό κομμάτι. χρώματα. Τώρα που έχουμε την κύρια δομή div, μπορούμε να αλλάξουμε τα χρώματα σε κάτι λιγότερο χαοτικό/άσχημο/… Απλά παίξτε με τα χρώματα στο αρχείο css. Εδώ είναι το πλήρες αρχείο html της ιστοσελίδας που εμφανίζεται στην εικόνα: δοκιμή

• Foo
• Μπαρ
• Γιούχα
• Μακριά

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Κεφαλίδα Και αυτό είναι το πλήρες αρχείο css: body {background: #444444; font-family: verdana, arial, sans-serif; χρώμα: #444444; γραμματοσειρά: 12px; margin: 0px;} div#container {width: 800px; περιθώριο: 0px auto; φόντο: #FFFFFF; padding: 0px;} div#content {width: 800px; padding-top: 100px; φόντο: #FFFFFF;} div #header {πλάτος: 800px; ύψος: 100px; φόντο: #888888; θέση: απόλυτη? επάνω: 0px;} div#nav {πλάτος: 200px; float: αριστερά? φόντο: #FFFFFF;} div #maincontent {πλάτος: 600px; float: δεξιά? φόντο: #DDDDDD;} div.navblock {πλάτος: 180px; περιθώριο: 5px auto; περίγραμμα: 1px solid #DDDDDD;} div.contentblock {πλάτος: 580px; περιθώριο: 5px auto; περίγραμμα: 1px solid #FFFFFF;}. clearfix: after {content: "."; οθόνη: μπλοκ? ύψος: 0; σαφές: και τα δύο? ορατότητα: κρυμμένο;}. clearfix {display: inline-block;}/* Απόκρυψη από IE Mac \*/. clearfix {display: block;} Λοιπόν, τώρα έχετε τα βασικά. Φυσικά, υπάρχουν ακόμη πολλά να επεξεργαστείτε, όπως χρώματα, μεγέθη γραμματοσειρών, ένα μπλοκ πλοήγησης με καλύτερη εμφάνιση,… Αλλά αυτό το εκπαιδευτικό πρόγραμμα αφορά μόνο τη δομή div. Εάν θέλετε να δείτε άλλες σχετικές οδηγίες, μπορείτε πάντα να ρωτήσετε. Θα δω αν θα βρω χρόνο.