Η ετικέτα χρησιμοποιείται ενεργά στο σχεδιασμό ιστοσελίδων για τη δημιουργία μπλοκ σε σελίδες html, μέσα στις οποίες μπορείτε να βάλετε περιεχόμενο οποιασδήποτε φύσης - κείμενο, εικόνες, πίνακες κ.λπ.
Οδηγίες
Βήμα 1
Όταν χρησιμοποιείται, απαιτείται μια τελική ετικέτα. Μπορεί να χρησιμοποιηθεί με τα ακόλουθα χαρακτηριστικά:
- align - alignment (αριστερά, κέντρο, δεξιά, αιτιολόγηση), για παράδειγμα, Text;
- class - class name (Κείμενο) ·
- id - το όνομα του αναγνωριστικού ετικέτας html.
- στυλ - κατεύθυνση στυλ;
- τίτλος - επεξήγηση εργαλείου.
Βήμα 2
Όταν χρησιμοποιείτε μπλοκ, συνιστάται να χρησιμοποιήσετε ένα φύλλο στυλ. Για παράδειγμα, εάν θέλετε να δημιουργήσετε δύο διαφορετικά μπλοκ με περιεχόμενο σε μια σελίδα, τότε ο κώδικας θα έχει την εξής μορφή:
. μπλοκ1 {
πλάτος: 500px;
ύψος: 200px;
φόντο: Κίτρινο;
επένδυση: 0px;
επένδυση-δεξιά: 0px;
περίγραμμα: στερεό 0px μαύρο;
float: αριστερά;
}
. μπλοκ2 {
πλάτος: 200px;
ύψος: 500;
φόντο: πράσινο;
επένδυση: 0px;
επένδυση-δεξιά: 0px;
περίγραμμα: στερεό 0px μαύρο;
επιπλέουν: δεξιά;
}
Το κίτρινο μπλοκ είναι το πρώτο με πλάτος 500px και μήκος 200px.
Το πράσινο μπλοκ είναι το πρώτο με πλάτος 200px και μήκος 500px.
Βήμα 3
Η ευθυγράμμιση των μπλοκ δεξιά-αριστερή πλευρά μπορεί να ρυθμιστεί χρησιμοποιώντας στυλ:
.leftimg {
float: αριστερά;
περιθώριο: 5px 15px 7px 0;
}
.rightimg {
επιπλέουν: δεξιά;
περιθώριο: 7px 0 7px 7px;
}
Βήμα 4
Με τη βοήθεια της ετικέτας, μπορείτε να οργανώσετε την εναλλασσόμενη αλλαγή εικόνων.
div # rotator {θέση: σχετικός; ύψος: 150px; περιθώριο αριστερά: 15 εικονοστοιχεία;}
div # rotator ul li {float: αριστερά; θέση: απόλυτη; list-style: κανένα;}
div # rotator ul li.show {z-index: 500;}
συνάρτηση theRotator () {
$ ('div # rotator ul li'). css ({αδιαφάνεια: 0,0});
$ ('div # rotator ul li: first'). css ({αδιαφάνεια: 1.0});
setInterval ('περιστροφή ()', 5000);
}
περιστροφή συνάρτησης () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: first'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({αδιαφάνεια: 0,0})
.addClass ('εμφάνιση')
.animate ({αδιαφάνεια: 1.0}, 1000);
current.animate ({αδιαφάνεια: 0,0}, 1000)
.removeClass ('εμφάνιση');
};
$ (έγγραφο). ήδη (συνάρτηση () {
ο ρότορας ();
});
