ტეგი აქტიურად გამოიყენება ვებდიზაინში html გვერდებზე ბლოკების შესაქმნელად, რომელთა შიგნით შეგიძლიათ განათავსოთ ნებისმიერი ხასიათის შინაარსი - ტექსტი, სურათები, ცხრილები და ა.შ.
ინსტრუქციები
Ნაბიჯი 1
როდესაც გამოიყენება, საჭიროა დასასრული ტეგი. ის შეიძლება გამოყენებულ იქნას შემდეგი ატრიბუტებით:
- გასწორება - გასწორება (მარცხნივ, ცენტრიდან, მარჯვნივ, გასამართლებლად), მაგალითად, ტექსტი;
- კლასი - კლასის სახელი (ტექსტი);
- id - html ტეგის იდენტიფიკატორის სახელი;
- სტილი - სტილის მიმართულება;
- სათაური - მინიშნებები.
ნაბიჯი 2
ბლოკების გამოყენებისას სასურველია გამოიყენოთ სტილის ფურცელი. მაგალითად, თუ გსურთ შექმნათ ორი განსხვავებული ბლოკი შინაარსით გვერდზე, მაშინ კოდი ასე გამოიყურება:
.ბლოკი 1 {
სიგანე: 500 პიქსელი;
სიმაღლე: 200 პიქსელი;
ფონი: ყვითელი;
შევსება: 0px;
padding- მარჯვნივ: 0px;
საზღვარი: მყარი 0px შავი;
ათწილადი: მარცხენა;
}
.ბლოკი 2 {
სიგანე: 200px;
სიმაღლე: 500;
ფონი: მწვანე;
შევსება: 0px;
padding- მარჯვნივ: 0px;
საზღვარი: მყარი 0px შავი;
ათწილადი: მარჯვნივ;
}
ყვითელი ბლოკი პირველია, რომლის სიგანეა 500 პიქსელი და სიგრძეა 200 პიქსელი.
მწვანე ბლოკი პირველია, რომლის სიგანეა 200px და სიგრძე 500px.
ნაბიჯი 3
ბლოკების მარჯვენა და მარცხენა მხარეს გასწორება შეიძლება განისაზღვროს სტილის გამოყენებით:
.leftimg {
ათწილადი: მარცხენა;
მინდორი: 5px 15px 7px 0;
}
.rightimg {
ათწილადი: მარჯვნივ;
მინდორი: 7px 0 7px 7px;
}
ნაბიჯი 4
თეგის დახმარებით შეგიძლიათ ორგანიზება მოაწყოთ სურათების მონაცვლეობით.
div # rotator {პოზიცია: ნათესავი; სიმაღლე: 150 პიქსელი; ზღვარი მარცხნივ: 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 ({opacity: 1.0});
setInterval ('როტაცია ()', 5000);
}
ფუნქცია rotate () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((მიმდინარე. შემდეგი (). სიგრძე)? ((მიმდინარე. შემდეგი (). hasClass ('შოუ')) $ ('div # rotator ul li: first'));
// var sibs = current.siblings ();
// var rndNum = მათემატიკა. სართული (მათემატიკა. სათაური () * ძმების სიგრძე);
// var next = $ (sibs [rndNum]);
next.css ({გაუმჭვირვალობა: 0.0})
.addClass ('შოუ')
.ცოცხალი ({გაუმჭვირვალობა: 1.0}, 1000);
მიმდინარე. ცხოველი ({გაუმჭვირვალობა: 0,0}, 1000)
.removeClass ('შოუ');
};
$ (დოკუმენტი). მზად (ფუნქცია () {
theRotator ();
});
