Το πιο κάτω οριζόντιο μπλοκ μιας διάταξης σελίδας αναφέρεται συχνά ως "υποσέλιδο". Σε αυτό, όπως και σε άλλα τμήματα της σελίδας, τοποθετούνται στοιχεία σχεδίασης, αλλά σε αντίθεση με άλλα, συχνά προκύπτουν συγκεκριμένα προβλήματα με την τοποθέτηση αυτού του συγκεκριμένου μπλοκ. Συνδέονται με το γεγονός ότι διαφορετικά προγράμματα περιήγησης κατανοούν τα πρότυπα της γλώσσας CSS διαφορετικά και μπορεί να είναι πολύ δύσκολο να φτάσετε το υποσέλιδο στο κάτω άκρο του παραθύρου του προγράμματος περιήγησης. Παρακάτω είναι ο κωδικός για μία από τις λύσεις σε αυτό το πρόβλημα.
Απαραίτητη
Βασικές γνώσεις CSS και HTML
Οδηγίες
Βήμα 1
Στην πρώτη γραμμή του πηγαίου κώδικα της σελίδας, τοποθετήστε μια αναφορά στην XHTML 1.0 Μεταβατική προδιαγραφή:
Βήμα 2
Τοποθετήστε τα κύρια μπλοκ της δομής της σελίδας μέσα στο σώμα του εγγράφου (μεταξύ των ετικετών και). Το μπλοκ στο οποίο θα τοποθετηθεί το κύριο περιεχόμενο πρέπει να αποτελείται από δύο ένθετα επίπεδα. Για παράδειγμα, αφήστε το εξωτερικό να έχει το αναγνωριστικό OuterDiv και το εσωτερικό - InnerDiv:
Εδώ θα είναι το κύριο περιεχόμενο της σελίδας.
Πίσω από αυτά τοποθετήστε ένα μπλοκ υποσέλιδου με ένα αναγνωριστικό, για παράδειγμα, FooterDiv:
Υποσέλιδο της σελίδας.
Βήμα 3
Τοποθετήστε στο αρχικό μέρος του κώδικα HTML (μεταξύ των ετικετών και) έναν σύνδεσμο προς ένα εξωτερικό αρχείο με περιγραφή των στυλ css:
@import "footerStyle.css";
Βήμα 4
Αποθηκεύστε τον πλήρη κώδικα της αρχικής σελίδας σε ένα αρχείο με την επέκταση html. Μπορεί να μοιάζει με αυτό:
Πιεσμένο υποσέλιδο
@import "footerStyle.css";
Εδώ θα είναι το κύριο περιεχόμενο της σελίδας.
Υποσέλιδο της σελίδας.
Βήμα 5
Δημιουργήστε ένα αρχείο στυλ φύλλου - ένα αρχείο απλού κειμένου που πρέπει να αποθηκευτεί με την επέκταση css και το όνομα που καθορίσατε στον κώδικα HTML (footerStyle.css). Γράψτε σε αυτό το αρχείο τις ακόλουθες περιγραφές στυλ για τα μπλοκ που χρησιμοποιούνται στη σελίδα:
* {περιθώριο: 0; επένδυση: 0}
html, body {ύψος: 100%;}
σώμα {
θέση: σχετική
χρώμα: # 222222;
}
# Εξωτερική διατροφή {
περιθώριο: 0;
ελάχιστο ύψος: 100%;
φόντο: #aaaaaa;
χρώμα: # 222222;
}
* html #OuterDiv {ύψος: 100%;}
#FooterDiv {
θέση: σχετική
σαφές: και τα δύο?
margin-top: -60 εικονοστοιχεία;
ύψος: 60px;
πλάτος: 100%;
χρώμα φόντου: DarkBlue;
text-align: center;
χρώμα: #eeeeff;
}
. InnerDiv {
πλάτος: 100%;
float: αριστερά;
}
