Υπάρχουν δύο τύποι διάταξης τοποθεσίας: πίνακας και αποκλεισμός. Και ενώ το πρώτο είναι πιο βολικό για τη δημιουργία απλών σελίδων html, το δεύτερο είναι ιδανικό αν πρέπει να προσθέσετε μεμονωμένα στοιχεία με τη μορφή μπλοκ.
Οδηγίες
Βήμα 1
Υπάρχουν δύο τεχνικές που θα σας επιτρέψουν να αναπτύξετε μόνοι σας ένα σχέδιο μπλοκ: ενσωματώνοντας επικαλυπτόμενα φύλλα στυλ σε ένα έγγραφο ή συνδέοντάς τα από εξωτερικό πόρο. Και τα δύο δίνουν το ίδιο αποτέλεσμα, οπότε δεν υπάρχει θεμελιώδης διαφορά μεταξύ τους. Στην πρώτη περίπτωση, επικολλήστε τον ακόλουθο κώδικα οπουδήποτε στο αρχείο style.css:
. μπλοκ1 {
}
Block1 - το όνομα του μπλοκ, μπορείτε να γράψετε οποιοδήποτε άλλο. Μεταξύ των σγουρών τιράντες, καθορίστε τις παραμέτρους με την ακόλουθη μορφή: όνομα χαρακτηριστικού> άνω και κάτω τελεία> τιμή> ερωτηματικό (συμπεριλαμβανομένων των τοποθετημένων πριν από το σγουρό στήριγμα). Τα ακόλουθα στοιχεία χρησιμοποιούνται συνήθως:
- πλάτος - πλάτος (500 εικονοστοιχεία, 100% κ.λπ.) ·
- ύψος - ύψος (200 εικονοστοιχεία, 25% κ.λπ.)
- φόντο - χρώμα φόντου (κίτρινο, κόκκινο, # 000000);
- επένδυση - επένδυση γύρω από το περιεχόμενο μέσα στο μπλοκ (0px, 20%).
- margin - εξωτερικά περιθώρια από το μπλοκ (15px, 40%)
- περίγραμμα - πλαίσιο (περίγραμμα: στερεό 0px μαύρο;);
- float - ευθυγράμμιση (αριστερά, δεξιά).
- ακτίνα περιγράμματος - στρογγυλοποίηση γωνιών (ακτίνα περιγράμματος: 10px;).
Βήμα 2
Στη δεύτερη χρήση του CSS, προσθέστε το στυλ μεταξύ των ετικετών και:
. μπλοκ1 {
}
Και προσθέστε τις παραμέτρους που θέλετε.
Βήμα 3
Τοποθετήστε το μπλοκ στην επιθυμητή θέση στον ιστότοπο χρησιμοποιώντας την εντολή:
Μπλοκ 1
Αποθηκεύστε και ανανεώστε τη σελίδα, θα πρέπει να εμφανίζεται. Λάβετε υπόψη ότι η ευθυγράμμιση ύψους μπορεί να διαφέρει ανάλογα με το πόσο πλήρες είναι το περιεχόμενο. Για παράδειγμα, αν ορίσετε 300 εικονοστοιχεία, αλλά έχετε γράψει μόνο μία γραμμή κειμένου, δεν θα εμφανίζεται πλήρως. Αυτό μπορεί να διορθωθεί, για παράδειγμα, χρησιμοποιώντας έναν πίνακα με τις απαιτούμενες παραμέτρους, οι οποίοι θα πρέπει να τοποθετηθούν μέσα στο μπλοκ, δηλ. μεταξύ ετικετών και. Για να μην είναι ορατά τα σύνορα, εισαγάγετε το χαρακτηριστικό
