התג משמש באופן פעיל בעיצוב אתרים ליצירת בלוקים בעמודי HTML, שבתוכם ניתן לשים תוכן מכל סוג שהוא - טקסט, תמונות, טבלאות וכו '.
הוראות
שלב 1
כאשר משתמשים בו, נדרש תג קצה. ניתן להשתמש בו עם התכונות הבאות:
- יישור - יישור (שמאל, מרכז, ימין, הצדק), למשל, טקסט;
- מחלקה - שם כיתה (טקסט);
- id - השם של מזהה תג html;
- סגנון - כיוון סגנון;
- כותרת - תיאור כלים.
שלב 2
בעת שימוש בבלוקים רצוי להשתמש בגיליון סגנונות. לדוגמה, אם ברצונך ליצור שני חסימות שונות עם תוכן בעמוד, הקוד יראה בערך כך:
.block1 {
רוחב: 500 פיקסלים;
גובה: 200 פיקסלים;
רקע: צהוב;
ריפוד: 0px;
ריפוד ימינה: 0px;
גבול: 0px מלא שחור;
לצוף: שמאלה;
}
.block2 {
רוחב: 200 פיקסלים;
גובה: 500;
רקע: ירוק;
ריפוד: 0px;
ריפוד ימינה: 0px;
גבול: 0px מלא שחור;
לצוף: מימין;
}
הבלוק הצהוב הוא הראשון שרוחבו 500 פיקסלים ואורכו 200 פיקסלים.
הבלוק הירוק הוא הראשון שרוחבו 200 פיקסלים ואורכו 500 פיקסלים.
שלב 3
ניתן להגדיר יישור של צד ימין / צד שמאל של בלוקים באמצעות סגנונות:
.leftimg {
לצוף: שמאלה;
שוליים: 5 פיקסלים 15 פיקסלים 7 פיקסלים 0;
}
.rightimg {
לצוף: מימין;
שוליים: 7 פיקסלים 0 7 פיקסלים 7 פיקסלים;
}
שלב 4
בעזרת התג תוכלו לארגן את החלפת התמונות לסירוגין.
div # rotator {position: relative; גובה: 150 פיקסלים; שוליים-שמאל: 15 פיקסלים;}
div # rotator ul li {float: left; עמדה: מוחלט; סגנון רשימה: אין;}
div # rotator ul li.show {z-index: 500;}
פונקציה theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 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 (). אורך)? ((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 הבא = $ (sibs [rndNum]);
next.css ({אטימות: 0.0})
.addClass ('הצג')
.animate ({אטימות: 1.0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass ('הצג');
};
$ (document).ready (function () {
theRotator ();
});
