تُستخدم العلامة بنشاط في تصميم الويب لإنشاء كتل على صفحات html ، حيث يمكنك وضع محتوى من أي نوع بداخله - نصوص ، صور ، جداول ، إلخ.
تعليمات
الخطوة 1
عند استخدامها ، يجب وضع علامة نهاية. يمكن استخدامه مع السمات التالية:
- محاذاة - محاذاة (يسار ، وسط ، يمين ، ضبط) ، على سبيل المثال ، نص ؛
- فئة - اسم الفئة (نص) ؛
- id - اسم معرف علامة html ؛
- أسلوب - اتجاه النمط ؛
- العنوان - تلميح الأداة.
الخطوة 2
عند استخدام الكتل ، يُنصح باستخدام ورقة أنماط. على سبيل المثال ، إذا كنت ترغب في إنشاء كتلتين مختلفتين بمحتوى على صفحة ، فسيظهر الرمز بالشكل التالي:
.كتلة 1 {
العرض: 500 بكسل ؛
الارتفاع: 200 بكسل ؛
الخلفية: أصفر ؛
الحشو: 0 بكسل ؛
الحشوة اليمنى: 0 بكسل ؛
الحد: أسود ثابت 0 بكسل ؛
تعويم: اليسار؛
}
.block2 {
العرض: 200 بكسل ؛
الارتفاع: 500
الخلفية: أخضر ؛
الحشو: 0 بكسل ؛
المساحة المتروكة لليمين: 0 بكسل ؛
الحد: أسود ثابت 0 بكسل ؛
تعويم: صحيح ؛
}
الكتلة الصفراء هي الأولى التي يبلغ عرضها 500 بكسل وطولها 200 بكسل.
الكتلة الخضراء هي الأولى التي يبلغ عرضها 200 بكسل وطولها 500 بكسل.
الخطوه 3
يمكن ضبط محاذاة الجانب الأيمن / الجانب الأيسر للكتل باستخدام الأنماط:
.leftimg {
تعويم: اليسار؛
الهامش: 5 بكسل 15 بكسل 7 بكسل 0 ؛
}
.rightimg {
تعويم: صحيح ؛
الهامش: 7 بكسل 0 7 بكسل 7 بكسل ؛
}
الخطوة 4
بمساعدة العلامة ، يمكنك تنظيم التغيير المتناوب للصور.
div # rotator {position: النسبي؛ الارتفاع: 150 بكسل ؛ الهامش الأيسر: 15 بكسل ؛}
div # rotator ul li {float: left؛ الموقف: مطلق. نمط القائمة: لا شيء ؛}
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 ('rotate ()'، 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 ({opacity: 1.0} ، 1000) ؛
current.animate ({opacity: 0.0} ، 1000)
.removeClass ('show') ؛
};
$ (document).ready (function () {
theRotator () ؛
});
