แท็กนี้ถูกใช้อย่างแข็งขันในการออกแบบเว็บเพื่อสร้างบล็อกบนหน้า html ซึ่งคุณสามารถใส่เนื้อหาในลักษณะใดก็ได้ เช่น ข้อความ รูปภาพ ตาราง ฯลฯ
คำแนะนำ
ขั้นตอนที่ 1
เมื่อใช้ จำเป็นต้องมีแท็กปิดท้าย สามารถใช้กับแอตทริบิวต์ต่อไปนี้:
- align - การจัดตำแหน่ง (ซ้าย, กึ่งกลาง, ขวา, จัดชิดขอบ) เช่น Text;
- คลาส - ชื่อคลาส (ข้อความ);
- id - ชื่อของตัวระบุแท็ก html;
- สไตล์ - ทิศทางสไตล์;
- ชื่อเรื่อง - เคล็ดลับเครื่องมือ
ขั้นตอนที่ 2
เมื่อใช้บล็อก แนะนำให้ใช้สไตล์ชีต ตัวอย่างเช่น หากคุณต้องการสร้างบล็อกที่แตกต่างกันสองช่วงที่มีเนื้อหาในหน้า โค้ดจะมีลักษณะดังนี้:
.block1 {
ความกว้าง: 500px;
ความสูง: 200px;
พื้นหลัง: สีเหลือง;
ช่องว่างภายใน: 0px;
ช่องว่างภายใน-ขวา: 0px;
เส้นขอบ: ทึบ 0px สีดำ;
ลอย: ซ้าย;
}
.block2 {
ความกว้าง: 200px;
ความสูง: 500;
พื้นหลัง: สีเขียว;
ช่องว่างภายใน: 0px;
ช่องว่างภายใน-ขวา: 0px;
เส้นขอบ: ทึบ 0px สีดำ;
ลอย: ขวา;
}
บล็อกสีเหลืองเป็นบล็อกแรกที่มีความกว้าง 500px และยาว 200px
บล็อกสีเขียวเป็นบล็อกแรกที่มีความกว้าง 200px และยาว 500px
ขั้นตอนที่ 3
การจัดตำแหน่งบล็อกด้านขวา / ด้านซ้ายสามารถตั้งค่าได้โดยใช้รูปแบบ:
.leftimg {
ลอย: ซ้าย;
ระยะขอบ: 5px 15px 7px 0;
}
.rightimg {
ลอย: ขวา;
ระยะขอบ: 7px 0 7px 7px;
}
ขั้นตอนที่ 4
ด้วยความช่วยเหลือของแท็ก คุณสามารถจัดระเบียบการเปลี่ยนรูปภาพได้
div # rotator {ตำแหน่ง: ญาติ; ความสูง: 150px; ระยะขอบซ้าย: 15px;}
div # rotator ul li {ลอย: ซ้าย; ตำแหน่ง: แน่นอน; รายการสไตล์: none;}
div # rotator ul li.show {ดัชนี z: 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 next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): ปัจจุบัน.next ()): $ ('div # rotator ul li: first'));
// var sibs = ปัจจุบันพี่น้อง ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (พี่น้อง [rndNum]);
next.css ({ความทึบ: 0.0})
.addClass ('แสดง')
.animate ({ความทึบ: 1.0}, 1000);
current.animate ({ความทึบ: 0.0}, 1000)
.removeClass ('แสดง');
};
$ (เอกสาร).ready (ฟังก์ชัน () {
theRotator ();
});