Тег веб-дизайнда 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 {өзгермелі: сол жақта; позиция: абсолютті; тізім стилі: жоқ;}
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 ('шоу');
};
$ (document).ready (function () {
theRotator ();
});
