Có hai kiểu bố trí trang web: dạng bảng và dạng khối. Và trong khi cái trước thuận tiện hơn để tạo các trang html đơn giản, thì cái sau là lý tưởng nếu bạn cần thêm các phần tử riêng lẻ ở dạng khối.
Hướng dẫn
Bước 1
Có hai kỹ thuật cho phép bạn tự phát triển thiết kế khối: bằng cách nhúng các biểu định kiểu xếp tầng vào một tài liệu hoặc bằng cách kết nối chúng từ một tài nguyên bên ngoài. Cả hai đều cho cùng một kết quả, vì vậy không có sự khác biệt cơ bản giữa chúng. Trong trường hợp đầu tiên, hãy dán đoạn mã sau vào bất kỳ đâu trong tệp style.css:
.block1 {
}
Block1 - tên của khối, bạn có thể viết bất kỳ cái nào khác. Giữa các dấu ngoặc nhọn, chỉ định các tham số theo định dạng sau: tên thuộc tính> dấu hai chấm> giá trị> dấu chấm phẩy (kể cả được đặt trước dấu ngoặc nhọn). Các yếu tố sau thường được sử dụng:
- width - chiều rộng (500px, 100%, v.v.);
- height - chiều cao (200px, 25%, v.v.);
- background - màu nền (Vàng, Đỏ, # 000000);
- padding - đệm xung quanh nội dung bên trong khối (0px, 20%);
- margin - lề bên ngoài từ khối (15px, 40%);
- border - frame (border: solid 0px black;);
- float - căn lề (trái, phải);
- bán kính đường viền - làm tròn các góc (bán kính đường viền: 10px;).
Bước 2
Trong lần sử dụng CSS thứ hai, hãy thêm kiểu giữa các thẻ và:
.block1 {
}
Và thêm các thông số bạn muốn.
Bước 3
Chèn khối vào vị trí mong muốn trên trang web bằng lệnh:
Khối 1
Lưu và làm mới trang, nó sẽ xuất hiện. Hãy nhớ rằng căn chỉnh độ cao có thể khác nhau tùy thuộc vào mức độ đầy đủ của nội dung. Ví dụ: nếu bạn đặt 300px, nhưng chỉ viết một dòng văn bản, nó sẽ không được hiển thị đầy đủ. Điều này có thể được sửa chữa, ví dụ, bằng cách sử dụng một bảng với các tham số bắt buộc, sẽ được đặt bên trong khối, tức là giữa các thẻ và. Và để các đường viền không hiển thị, hãy chèn thuộc tính
