Πώς να φτιάξετε ένα καουτσούκ καπάκι

Πίνακας περιεχομένων:

Πώς να φτιάξετε ένα καουτσούκ καπάκι
Πώς να φτιάξετε ένα καουτσούκ καπάκι

Βίντεο: Πώς να φτιάξετε ένα καουτσούκ καπάκι

Βίντεο: Πώς να φτιάξετε ένα καουτσούκ καπάκι
Βίντεο: 20 ΧΡΉΣΙΜΕΣ ΙΔΈΕΣ ΜΕ ΚΑΠΆΚΙΑ ΦΙΑΛΏΝ 2024, Ενδέχεται
Anonim

Το πάνω μέρος του ιστότοπου, που ονομάζεται επίσης κεφαλίδα, αντικατοπτρίζει συνήθως το θέμα του πόρου και μπορεί να περιέχει μια γραμμή πλοήγησης. Εάν η κεφαλίδα του ιστότοπου έχει ένα ορισμένο πλάτος, τότε στις οθόνες των χρηστών με διαφορετικές αναλύσεις, αυτό το μέρος του ιστότοπου θα φαίνεται διαφορετικό. Προκειμένου η κεφαλίδα του ιστότοπου να έχει την ίδια εμφάνιση σε οποιαδήποτε οθόνη, είναι απαραίτητο να τεντώνονται ή να συρρικνώνονται ορισμένες από τις ενότητες, ανάλογα με το μέγεθος της οθόνης. Ένα τέτοιο ελαστικό πώμα μπορεί να κατασκευαστεί χωρίς να καθορίζεται το πλάτος του σε εικονοστοιχεία.

Πώς να φτιάξετε ένα καουτσούκ καπάκι
Πώς να φτιάξετε ένα καουτσούκ καπάκι

Απαραίτητη

έχετε τον δικό σας ιστότοπο

Οδηγίες

Βήμα 1

Για να φτιάξετε ένα καουτσούκ καπάκι, σχεδιάστε πρώτα στο Photoshop. Στη συνέχεια, χωρίστε 3 μέρη της εικόνας: 2 πλευρές και τη μέση. Αυτά τα κομμάτια πρέπει να έχουν πλάτος περίπου 10-20 pixel και περίπου το ύψος της κεφαλίδας που θέλετε. Αποθηκεύστε κάθε στοιχείο έτσι ώστε να έχετε 3 διαφορετικά αρχεία: 1.gif, 2.gif, 3.gif. Υποβάλετε αυτές τις εικόνες στον ιστότοπο.

Βήμα 2

Στη συνέχεια, δημιουργήστε έναν πίνακα που θα κρατά τα στοιχεία στην κορυφή του ιστότοπου. Για να το κάνετε αυτό, γράψτε στον κώδικα HTML:

Ένας πίνακας με πλάτος 100% θα τεντωθεί ή θα συρρικνωθεί ανάλογα με το μέγεθος της οθόνης του χρήστη.

Βήμα 3

Δημιουργήστε μια γραμμή στον πίνακα, στο κελί του οποίου τοποθετείτε την αριστερή πλευρά της κεφαλίδας του ιστότοπου 1.gif:

Βήμα 4

Δημιουργήστε μια μεσαία ενότητα της κεφαλίδας του ιστότοπου που αποτελείται από μια επαναλαμβανόμενη εικόνα 2.gif. Για να το κάνετε αυτό, γράψτε τα ακόλουθα στον κώδικα CSS:

.header {background-image: url ('images / 2.gif');}

Βήμα 5

Τώρα, σε μια σειρά του πίνακα, δημιουργήστε ένα άλλο κελί και τοποθετήστε το μεσαίο στοιχείο της κορυφής του ιστότοπου σε αυτό, δείχνοντας την κεφαλίδα του ονόματος στον κώδικα CSS:

Όνομα του ιστότοπου

>

Βήμα 6

Αφού δημιουργήσατε το τρίτο κελί στη σειρά πίνακα, τοποθετήστε τη δεξιά πλευρά της κεφαλίδας του ιστότοπου 3

Όνομα του ιστότοπου

Συνιστάται: