Thẻ được sử dụng tích cực trong thiết kế web để tạo các khối trên các trang html, bên trong đó bạn có thể đặt nội dung thuộc bất kỳ tính chất nào - văn bản, hình ảnh, bảng, v.v.
Hướng dẫn
Bước 1
Khi được sử dụng, thẻ kết thúc là bắt buộc. Nó có thể được sử dụng với các thuộc tính sau:
- align - căn lề (trái, giữa, phải, căn đều), ví dụ, Văn bản;
- class - tên lớp (Văn bản);
- id - tên của định danh thẻ html;
- style - hướng phong cách;
- tiêu đề - chú giải công cụ.
Bước 2
Khi sử dụng các khối, nên sử dụng bảng định kiểu. Ví dụ: nếu bạn muốn tạo hai khối khác nhau với nội dung trên một trang, thì mã sẽ trông giống như sau:
.block1 {
chiều rộng: 500px;
chiều cao: 200px;
nền: Màu vàng;
đệm: 0px;
padding-right: 0px;
border: solid 0px đen;
float: trái;
}
.block2 {
chiều rộng: 200px;
chiều cao: 500;
nền: Màu xanh lá cây;
đệm: 0px;
padding-right: 0px;
border: solid 0px black;
float: phải;
}
Khối màu vàng là khối đầu tiên có chiều rộng 500px và chiều dài 200px.
Khối màu xanh lá cây là khối đầu tiên có chiều rộng 200px và chiều dài 500px.
Bước 3
Căn chỉnh bên phải / bên trái của các khối có thể được đặt bằng cách sử dụng các kiểu:
.leftimg {
float: trái;
lề: 5px 15px 7px 0;
}
.rightimg {
float: phải;
lề: 7px 0 7px 7px;
}
Bước 4
Với sự trợ giúp của thẻ, bạn có thể sắp xếp thay đổi xen kẽ các hình ảnh.
div # rotator {vị trí: tương đối; chiều cao: 150px; margin-left: 15px;}
div # rotator ul li {float: left; vị trí: tuyệt đối; list-style: none;}
div # rotator ul li.show {z-index: 500;}
function theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('xoay ()', 5000);
}
chức năng xoay () {
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 ({opacity: 0.0})
.addClass ('show')
.animate ({opacity: 1.0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass ('show');
};
$ (tài liệu).ready (function () {
theRotator ();
});
