این برچسب به طور فعال در طراحی وب برای ایجاد بلوک در صفحات HTML استفاده می شود ، در داخل آنها می توانید از هر نوع محتوایی - متن ، عکس ، جدول و غیره استفاده کنید.
دستورالعمل ها
مرحله 1
در صورت استفاده ، برچسب نهایی لازم است. با ویژگی های زیر قابل استفاده است:
- align - تراز بندی (چپ ، مرکز ، راست ، توجیه) ، به عنوان مثال ، متن ؛
- کلاس - نام کلاس (متن) ؛
- id - نام شناسه برچسب html ؛
- سبک - جهت سبک
- عنوان - راهنمای ابزار
گام 2
هنگام استفاده از بلوک ، توصیه می شود از یک ورق سبک استفاده کنید. به عنوان مثال ، اگر می خواهید دو بلوک مختلف با محتوا در یک صفحه ایجاد کنید ، کد به شکل زیر خواهد بود:
.block1 {
عرض: 500 پیکسل
ارتفاع: 200 پیکسل
زمینه: زرد؛
بالشتک: 0px؛
padding-right: 0px؛
حاشیه: جامد 0px سیاه؛
شناور به سمت چپ؛
}
.block2 {
عرض: 200 پیکسل
قد: 500؛
زمینه: سبز؛
بالشتک: 0px؛
padding-right: 0px؛
حاشیه: جامد 0px سیاه؛
شناور: درست؛
}
بلوک زرد اولین مورد با عرض 500 پیکسل و طول 200 پیکسل است.
بلوک سبز اولین بلوک با عرض 200 پیکسل و طول 500 پیکسل است.
مرحله 3
تراز بندی بلوک های سمت راست / سمت چپ را می توان با استفاده از سبک ها تنظیم کرد:
.leftimg {
شناور به سمت چپ؛
حاشیه: 5 پیکسل 15 پیکسل 7 پیکسل 0؛
}
.rightimg {
شناور: درست؛
حاشیه: 7px 0 7px 7px؛
}
مرحله 4
با کمک برچسب ، می توانید تغییر متناوب تصاویر را سازماندهی کنید.
div # rotator {موقعیت: نسبی؛ ارتفاع: 150 پیکسل margin-left: 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 ('چرخش ()' ، 5000)؛
}
عملکرد چرخش () {
var current = ($ ('div # rotator ul li.show')؟ $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'))؛
var 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 ('نمایش')
متحرک ({opacity: 1.0}، 1000)؛
current.animate ({تیرگی: 0.0} ، 1000)
.removeClass ('نمایش') ؛
};
$ (سند). آماده (تابع () {
theRotator ()؛
});
