Aktibong ginagamit ang tag sa disenyo ng web upang lumikha ng mga bloke sa mga pahina ng html, sa loob kung saan maaari kang maglagay ng nilalaman ng anumang kalikasan - teksto, larawan, talahanayan, atbp.
Panuto
Hakbang 1
Kapag ginamit, kailangan ng end tag. Maaari itong magamit sa mga sumusunod na katangian:
- pagkakahanay - pagkakahanay (kaliwa, gitna, kanan, bigyang katwiran), halimbawa, Text;
- klase - pangalan ng klase (Teksto);
- id - ang pangalan ng identifier ng tag na html;
- estilo - direksyon ng istilo;
- pamagat - tooltip.
Hakbang 2
Kapag gumagamit ng mga bloke, ipinapayong gumamit ng isang style sheet. Halimbawa, kung nais mong lumikha ng dalawang magkakaibang mga bloke na may nilalaman sa isang pahina, ang code ay magmumukhang ganito:
.block1 {
lapad: 500px;
taas: 200px;
background: Dilaw;
padding: 0px;
padding-kanan: 0px;
hangganan: solidong 0px itim;
lumutang pakaliwa;
}
.block2 {
lapad: 200px;
taas: 500;
background: berde;
padding: 0px;
padding-kanan: 0px;
hangganan: solidong 0px itim;
lumutang: kanan;
}
Ang dilaw na bloke ay ang una na may lapad na 500px at isang haba ng 200px.
Ang berdeng bloke ay ang una na may lapad na 200px at isang haba na 500px.
Hakbang 3
Maaaring maitakda ang pagkakahanay sa kanang bahagi / kaliwang bahagi ng mga bloke gamit ang mga istilo:
.leftimg {
lumutang pakaliwa;
margin: 5px 15px 7px 0;
}
. Rightimg {
lumutang: kanan;
margin: 7px 0 7px 7px;
}
Hakbang 4
Sa tulong ng tag, maaari mong ayusin ang alternating pagbabago ng mga larawan.
div # rotator {posisyon: kamag-anak; taas: 150px; margin-left: 15px;}
div # rotator ul li {float: left; posisyon: ganap; list-style: wala;}
div # rotator ul li.show {z-index: 500;}
i-andar angRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('paikutin ()', 5000);
}
paikutin ang pagpapaandar () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). haba)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: una'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
susunod.css ({opacity: 0.0})
.addClass ('show')
.animate ({opacity: 1.0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass ('show');
};
$ (dokumento). handa na (pagpapaandar () {
theRotator ();
});
