Trước đây những người thiết kế hay sử dụng bảng (table) trong việc thiết kế giao diện cho website. Nhưng để đúng với chuẩn web standard (theo chuẩn) thì kỹ thuật thiết kế giao diện với thẻ div kết hợp với CSS đã dần thay thế bới những ưu việt và hiểu quả do nó mang lại.
Bài viết này mình sẽ hướng dẫn các bạn cách thiết kế một giao diện với thẻ div kết hợp với 2 thuộc tính
Float và Clear trong CSS. Cấu trúc giao diện chúng ta sẽ thiết kế gồm có header, footer và 2 cột có kích thước cố định (fixed column) như hình bên dưới, bài viết hơi dài vì một số phần mình phải giải thích kỹ.
Đầu tiên chúng ta sẽ dựng mã HTML như sau:
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
03 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
05 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
06 | <title>Thiết kế giao diện với Div</title> |
07 | <link href="style.css" media="screen" rel="stylesheet" /> |
20 | <div class="clr"></div> |
Lưu lại với tên div.html vào một thư mục nào đó trên máy tính của bạn.
Trước tiên chúng ta sẽ tạo ra một thẻ div lớn bao quanh toàn bộ trang web với id=”mainWap”. Bên nên thực hiện việc này trong các thiết kế tiếp theo của mình. Ví dụ bây giờ bạn muốn toàn bộ trang web của bạn được canh bên phải màn hình, thay vì phải đi căn chỉnh từng thành phần sang phải thì bạn chỉ cần canh thẻ div này sang phải, toàn bộ các thành phần khác trong nó sẽ được canh phải theo thẻ div lớn. (Bạn cứ tưởng tượng rằng chúng ta có một cái hộp lớn và bỏ tất cả các hộp nhỏ vào bên trong và khi muốn thì chỉ cần di chuyển cái hộp lớn đi thôi). Đây cũng là cách để bạn quản lý độ lớn của Box tốt hơn.
Tiếp theo ta sẽ tạo các thành phần header, left, right, footer bên trong thẻ div lớn này với các id tương ứng.
Ta thêm vào thành phần <div class=”clr”></div> trước footer, ta sẽ xem phần này sau khi viết CSS.
Tạo một file style.css và lưu vào cùng thư mục chứa file div.html. chúng ta sẽ viết mã CSS trong file này.
Trong bài viết này có sử dụng đến Margin và Padding, tuy nhiên mỗi trình duyệt lại hiểu các giá trị này theo một kiểu, cho nên để tránh phiền toái việc đầu tiên chúng ta nên làm là reset 2 giá trị này về 0 với lệnh sau:
1 | *{ margin: 0; padding: 0 } |
Tiếp theo chúng ta sẽ quy định cho độ rộng của toàn bộ trang là 950px và canh giữa màn hình bằng các viết mã cho thẻ div lớn bao quanh mà chúng ta đã tạo ra ban đầu.
Khi ta sử dụng
Theo hình trên ta thấy, thành phần header cách thành phần left và right 1 khoảng 10px, đó chính là margin-bottom của header đối left và right. Và ta sẽ viết mã cho header như sau:
Nhận xét
Đăng nhận xét