Το αυτοκόλλητο (ή ταινία) είναι αυτές οι εικόνες που βρίσκονται στην πάνω δεξιά ή πάνω αριστερά, και ότι συχνά αποτελούν μια μπάντα γωνία. Υπάρχουν διάφορα είδη, από απλές εικόνες με τις πιο θεαματικές ταινίες Flash. Μερικές φορές είναι κατασκευασμένα έτσι ώστε να διατηρήσουν τη θέση τους ακόμη και όταν το περιεχόμενο των μεταβείτε browser σας.
Εάν δεν θέλετε να βασίζονται σε υπηρεσίες όπως QuickRibbon.com, αλλά θέλουν να οικοδομήσουν μια ταινία από το δικό σας, εδώ είναι 3 απλά βήματα που θα ακολουθήσει.
1. Δημιουργούμε την εικόνα
Πρώτα από όλα να δημιουργήσουμε την εικόνα που θέλουμε να θέσουμε σε μια γωνία, δεξιά ή αριστερά. Η εικόνα παρακάτω, για να 163x163 pixels, ecostruita στην άνω αριστερή γωνία.

Για να κάνετε την πλήρη αποτελεσματικότητα των επικάλυψη πρέπει να επιλέξει κατά τη στιγμή της διάσωσης, μια μορφή που να υποστηρίζει τη διαφάνεια, όπως GIF ή PNG.
2. Η HTML κώδικα
Αποθηκ εικόνας μας μπορούμε να το θέσω με τις σελίδες μας, περιτύλιγμα την ετικέτα img με div δοχείο, το οποίο μπορείτε να χρησιμοποιήσετε για να τοποθετήσετε την εικόνα σε:
HTML: > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" > </div> <div κατηγορίας = "ribbon"> <img src = "ribbon.gif" τίτλος = "Ribbon Test" πλάτος = "163" ύψος = "163" συνόρων = "0"> </ div>
Αν αυτοκόλλητο μας θα πρέπει να έχει μια σχέση, μπορούμε να χρησιμοποιήσουμε το tag map για να ορίσετε μια ευαίσθητη περιοχή που δεν είναι ορθογώνια. Το αυτοκόλλητο που παρουσιάζονται σε αυτό το παράδειγμα, στην πραγματικότητα, έχετε μια κλίση και διαφάνεια δείχνει απόλυτα τα περιγράμματα. Κατά συνέπεια, θα ήταν άσκοπο να επιτραπεί να κάνουν κλικ σε μια κενή περιοχή με την απλή προσθήκη μιας ετικέτας a introno εικόνα. Τότε θα χρησιμοποιήσει αυτή την σύνταξη:
HTML: > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" > </div> <div κατηγορίας = "ribbon"> <img src = "ribbon.gif" τίτλος = "Ribbon Test" πλάτος = "163" ύψος = "163" συνόρων = "0" usemap = "#ribbonlink"> </ div> > <area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" > </map> <map όνομα = "ribbonlink"> <area σχήμα = "poly" Coords = "163,0,0163,0129129,0" href = "http://undolog.com"> </ map>
Το χαρακτηριστικό coords tag area καθορίζει τις συντεταγμένες μας ταινία.
3ος το CSS
Τώρα προσθέστε τους ορισμούς του στυλ που θα μας επιτρέψει αυτοκόλλητο στη σελίδα σας για την σωστή τους θέση:
CSS: div.ribbon (
; θέση: απόλυτη?
top: 0px? αριστερά: 0px?
ύψος: 163px? πλάτος: 163px?
;padding: 0 ; περιθώριο: 0? padding: 0?
; υπερχείλιση: ορατή?
; float: ΚΑΝΕΝΑ?
} z-index: 10000)
div.ribbonimg (
;padding: 0 ;margin: 0 ; σύνορα: 0? padding: 0? περιθώριο: 0?
} υπόβαθρο-εικόνα: ΚΑΝΕΝΑ)
Αν θέλουμε να παραμείνει η ταινία "κολλήσει" στο βίντεο, ακόμα και όταν την κύλιση του παραθύρου, απλώς να αλλάξει τον τύπο absolute στυλ position σε fixed
CSS: div.ribbon (
; θέση: σταθερό?
top: 0px? αριστερά: 0px?
ύψος: 163px? πλάτος: 163px?
;padding: 0 ; περιθώριο: 0? padding: 0?
; υπερχείλιση: ορατή?
; float: ΚΑΝΕΝΑ?
} z-index: 10000)
Σημείωση: ο τύπος fixed στο στυλ position μέχρι πρόσφατα δεν είχε υποστηριχθεί από όλα τα προγράμματα πλοήγησης. Για να κάνετε το αποτέλεσμα, στην πραγματικότητα, ήταν αναγκασμένοι να χρησιμοποιήσετε μια λειτουργία JavaScript ότι, σε τακτά χρονικά διαστήματα, ελέγχεται η ροή του το πιθανό περιεχόμενο του παραθύρου και θα αντικαταστήσει την ταινία για να δώσει την εντύπωση να παραμένουν ουσιαστικά ακίνητο. Ευτυχώς, σήμερα, με κάποια παλιά έκδοση του Explorer, όλα τα προγράμματα περιήγησης υποστηρίζει αυτό το είδος fixed
Σχετικές Post