Պիտակը ակտիվորեն օգտագործվում է վեբ ձևավորման մեջ html էջերում բլոկներ ստեղծելու համար, որոնց ներսում կարող եք տեղադրել ցանկացած բնույթի բովանդակություն ՝ տեքստ, նկար, աղյուսակ և այլն:
Հրահանգներ
Քայլ 1
Օգտագործման ժամանակ պահանջվում է վերջնական պիտակ: Այն կարող է օգտագործվել հետևյալ հատկանիշներով.
- հավասարեցում - հավասարեցում (ձախ, կենտրոն, աջ, արդարացնել), օրինակ, Տեքստ;
- դաս - դասի անվանումը (Տեքստ);
- id - html պիտակի նույնացուցիչի անունը;
- ոճ - ոճի ուղղություն;
- վերնագիր - գործիքագրեր
Քայլ 2
Բլոկներ օգտագործելիս ցանկալի է օգտագործել ոճաթերթ: Օրինակ, եթե ուզում եք էջում պարունակությամբ երկու տարբեր բլոկ ստեղծել, ապա կոդը նման կլինի այսպիսի բան.
.բլոկ 1 {
լայնությունը `500px;
բարձրությունը `200px;
ֆոն ՝ դեղին;
լիցքավորում ՝ 0px;
լրացնելով աջ ՝ 0px;
եզրագիծ ՝ պինդ 0px սև;
բոց `ձախ;
}
.block2 {
լայնությունը `200px;
բարձրությունը `500;
ֆոն `կանաչ;
լիցքավորում ՝ 0px;
լրացնելով աջ ՝ 0px;
եզրագիծ ՝ ամուր 0px սև;
բոց `աջ;
}
Դեղին բլոկը առաջինն է ՝ 500 կտավ լայնությամբ և 200 կտոր երկարությամբ:
Կանաչ բլոկը առաջինն է `200 կտոր լայնությամբ և 500 հատ երկարությամբ:
Քայլ 3
Բլոկների աջ և ձախ կողմերի հավասարեցումը կարող է սահմանվել `օգտագործելով ոճերը.
.leftimg {
բոց `ձախ;
լուսանցք ՝ 5px 15px 7px 0;
}
.rightimg {
բոց `աջ;
լուսանցք ՝ 7px 0 7px 7px;
}
Քայլ 4
Պիտակի օգնությամբ դուք կարող եք կազմակերպել նկարների փոփոխական փոփոխություն:
div # rotator {դիրքը: հարաբերական; բարձրությունը `150px; լուսանցքից ձախ ՝ 15px;}
div # rotator ul li {float: ձախ; դիրքը ՝ բացարձակ; ցուցակի ոճ ՝ ոչ մեկը;}
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 ընթացիկ = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var հաջորդ = ((ընթացիկ. Հաջորդ (). երկարությունը)? ((ընթացիկ. Հաջորդ (). hasClass ('ցուցադրել')))? $ ('div # rotator ul li: first'): ընթացիկ: հաջորդ ()): $ ('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 («շոու»)
. կենդանի ({անթափանցիկություն ՝ 1.0}, 1000);
ընթացիկ. կենդանի ({անթափանցիկություն. 0.0}, 1000)
. RemoveClass («շոու»);
};
$ (փաստաթուղթ): պատրաստ (գործառույթ () {
theRotator ();
});
