επιχειρηματικές και εργασιακές ρυθμίσεις

Εκπαίδευση διάταξης CSS διάταξης χωρίς πίνακα

Δημιουργήστε τις δικές σας σταθερές ή υγρές διατάξεις CSS για ιστότοπους, ιστολόγια και λογισμικό. Η βασική μορφή για τη διάταξη CSS ξεκινά με τις ρυθμίσεις του κοντέινερ, μετά την κεφαλίδα, μια οριζόντια ενότητα πλοήγησης, την κύρια ενότητα περιεχομένου, μια πλευρική γραμμή και το υποσέλιδο. Τα δοχεία DIV χρησιμοποιούνται για την τοποθέτηση των διαφόρων τμημάτων, κατόπιν κάθε τμήμα προσαρμόζεται με χαρακτηριστικά όπως χρώματα και γραμματοσειρές. Χρησιμοποιήστε το Σημειωματάριο ή άλλο πρόγραμμα επεξεργασίας κειμένου για να δημιουργήσετε το κείμενο διάταξης CSS.

Το δοχείο DIV

1.

Ανοίξτε ένα νέο έγγραφο σημειωματάριου ή άλλο έγγραφο επεξεργασίας κειμένου. Αποθηκεύστε το ως αρχείο TXT με όνομα όπως "csslayout.txt".

2.

Δημιουργήστε τη βασική διάταξη δοχείου DIV πληκτρολογώντας την ακόλουθη κωδικοποίηση HTML:

3.

Πληκτρολογήστε τον τίτλο κεφαλίδας και τις ετικέτες τίτλων μεταξύ των ετικετών "" και "". Η κωδικοποίηση πρέπει να έχει ως εξής:

Η επικεφαλίδα του ιστοτόπου μου

4.

Προσθέστε τη λίστα μη καταχωρημένων "

    και "
"ετικέτες μεταξύ των ετικετών" "και" "κάθε στυλ"
  • "στην αόριστη λίστα με τα ονόματα των στοιχείων στη γραμμή πλοήγησης.Η κωδικοποίηση μοιάζει με αυτή:

    • Στοιχείο 1
    • Στοιχείο 2

        • 5.

        Προσθέστε τα στοιχεία ετικετών τίτλων και παραγράφων στις ετικέτες "" και "". Αυτό είναι το κύριο περιεχόμενο. Η κωδικοποίηση μοιάζει με αυτό:

        Βασική κεφαλίδα περιεχομένου

        Εδώ είναι το περιεχόμενό μου για το μεγάλο κύριο τμήμα.

        Προσθέστε την ίδια κεφαλίδα περιεχομένου και κωδικοποίηση περιεχομένου μέσα στις ετικέτες "και" ".

        6.

        Προσθέστε το κείμενο υποσέλιδου μέσα στις ετικέτες "" και "". Η κωδικοποίηση μοιάζει με αυτό:

        Πνευματικά πνευματικά δικαιώματα. Ολα τα δικαιώματα διατηρούνται.

        Το περιεχόμενο HTML του δοχείου DIV έχει ολοκληρωθεί.

        Χαρακτηριστικά CSS

        1.

        Πληκτρολογήστε ένα διάστημα κάτω από την τελική ετικέτα του δοχείου DIV. Πληκτρολογήστε το όνομα κάθε "" από το δοχείο DIV ακολουθούμενο από δύο αγκύλες CSS. Κάθε όνομα πρέπει να έχει "#" μπροστά. Η κωδικοποίηση μοιάζει με αυτή:

        σώμα { }

        wrap {

        }}

        κεφαλίδα {

        }}

        2.

        Ορίστε το πλάτος και τη θέση για κάθε στοιχείο CSS. Το πλάτος "#wrap" είναι ολόκληρο το πλάτος του ιστότοπου και τα πλάτη για τα "#sidebar" και "#main" προστιθέμενα μαζί ισούνται με ολόκληρο το πλάτος. Χρησιμοποιήστε το "float: αριστερά / δεξιά". χαρακτηριστικό για να επιπλεύσει το κύριο περιεχόμενο και την πλευρική γραμμή στα αριστερά ή δεξιά. Ένα παράδειγμα μοιάζει με αυτό:

        main {

        πλάτος: 600px; float: δεξιά? }}

        3.

        Ορίστε τα περιθώρια, την επένδυση, το χρώμα φόντου και το χρώμα κειμένου για κάθε στοιχείο CSS. Χρησιμοποιήστε "περιθώρια: Xpx Xpx Xpx Xpx"; και "padding: Xpx Xpx Xpx Xpx". κωδικοποίηση. Προσθέστε το "φόντο: # XXXXXX;" και "χρώμα: # XXXXXX;" επισης. Ένα παράδειγμα μοιάζει με αυτό:

        κεφαλίδα { 

        width: 900px; float: left; margins: 0px 5px 15px 20px; padding: 0px 0px 5px 5px; color: #eeeeee; background: #FFFFFF;

        }}

        4.

        Καταργήστε την κωδικοποίηση "float" από το υποσέλιδο και χρησιμοποιήστε το "clear: both". για να σπρώξετε το υποσέλιδο προς τα κάτω στο κάτω μέρος της ιστοσελίδας. Μοιάζει με αυτό:

        footer {

        πλάτος: 900px; σαφής: και οι δύο? background: #eeeeee}

        5.

        Διαχωρίστε το στοιχείο "#nav {" σε δύο χωριστά στοιχεία: "#nav ul {" και "#nav li {" για κάθε στυλ. Προσθέστε "style-list: none". στην κωδικοποίηση στοιχείων "#nav ul" και "εμφάνιση: καμία". για την κωδικοποίηση #nav li "Μοιάζει με αυτό:

        nav ul {

        style-λίστας: κανένας. }}

        nav li {

        οθόνη: καμία · }}

        Αυτή η επιδιόρθωση καθιστά την γραμμή πλοήγησης οριζόντια και δεν εμφανίζει τη γραμμή πλοήγησης ως λίστα.

        Προώθηση CSS

        1.

        Ξεχωρίστε το στοιχείο κλάσης και στυλ με τα χαρακτηριστικά CSS. Για παράδειγμα, για να αλλάξετε τον τίτλο κεφαλίδας η κωδικοποίηση μοιάζει με αυτή:

        κεφαλίδα h2 {

        χρώμα: # 000000; γραμματοσειρά-οικογένεια: Arial, Trebuchet, sans-serif; }}

        2.

        Σχεδιάστε συνδέσμους στο κείμενο με διαφορετικό χρώμα και υπογραμμίστε τους. Το χαρακτηριστικό "μετασχηματισμού κειμένου" μπορεί να υπογραμμιστεί, κεφαλαία ή πεζά. Για παράδειγμα, η κωδικοποίηση μοιάζει με αυτή:

        main a {

        χρώμα: # 000000; κείμενο-διακόσμηση: υπογράμμιση; }}

        3.

        Προσθέστε ένα περιθώριο σε οποιοδήποτε στοιχείο χρησιμοποιώντας το "border: Xpx #XXXXXX;" Χαρακτηριστικό. Το περιθώριο μπορεί να βρίσκεται στην κορυφή ως "ανώτατο όριο" ή κάτω ως "σύνορο κάτω".

        4.

        Καθορίστε μια γραμματοσειρά χρησιμοποιώντας το "font-family: font;" Χαρακτηριστικό. Αλλαγή του μεγέθους της γραμματοσειράς χρησιμοποιώντας το χαρακτηριστικό "font-size: Xpx". Μεταβείτε σε έντονους ή πλάγιους χαρακτήρες χρησιμοποιώντας το χαρακτηριστικό "font-weight: bold / italics;" Για παράδειγμα:

        main p { 

         font-family: Times New Roman, serif; font-size: 12px; font-weight: italics;

        }}

        Πράγματα που χρειάζονται

        • Σημειωματάριο ή άλλο πρόγραμμα επεξεργασίας κειμένου

        Υπόδειξη

        • Σχεδιάστε την επιθυμητή διάταξη πριν δημιουργήσετε τον κώδικα ως χρήσιμο οπτικό.

    • none

    Συνιστάται