Тег веб-дизайнда HTML барактарында блокторду түзүү үчүн активдүү колдонулат, анын ичине каалаган мүнөздөгү мазмунду - текстти, сүрөттөрдү, таблицаларды ж.б.
Нускамалар
1 кадам
Колдонулганда, аяктоо теги талап кылынат. Аны төмөнкү атрибуттар менен колдонсо болот:
- тегиздөө - тегиздөө (сол, борбор, оң, негиздөө), мисалы, Текст;
- класс - класстын аталышы (Текст);
- id - html тегинин идентификаторунун аталышы;
- стиль - стиль багыты;
- аталышы - кеңеш.
2-кадам
Блокторду колдонууда стилдер таблицасын колдонуу туура болот. Мисалы, баракчадагы эки башка блокту түзгүңүз келсе, анда код төмөнкүдөй болот:
.block1 {
туурасы: 500px;
бийиктиги: 200px;
фон: сары;
толтуруу: 0px;
оң толтуруу: 0px;
чек: катуу 0px кара;
калкуу: сол;
}
.block2 {
туурасы: 200px;
бийиктиги: 500;
өбөлгөлөрү: Жашыл;
толтуруу: 0px;
оң толтуруу: 0px;
чек: катуу 0px кара;
калкуу: оң;
}
Сары блок - бул туурасы 500px жана узундугу 200px болгон биринчи блок.
Жашыл блок - бул туурасы 200px жана узундугу 500px болгон биринчи блок.
3-кадам
Блоктордун оң / сол жагына тегиздөө стилдерди колдонуу менен коюлушу мүмкүн:
.leftimg {
калкуу: сол;
маржа: 5px 15px 7px 0;
}
.rightimg {
калкуу: оң;
маржа: 7px 0 7px 7px;
}
4-кадам
Тегдин жардамы менен, сүрөттөрдү алмаштырып турууну уюштура аласыз.
div # rotator {абалы: салыштырмалуу; бийиктиги: 150px; маржа-сол: 15px;}
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 ('rotate ()', 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 ('show')
.animate ({тунуктук: 1.0}, 1000);
current.animate ({тунуктук: 0.0}, 1000)
.removeClass ('show');
};
$ (document).ready (function () {
theRotator ();
});
