Thursday, 13 June 2013

[CSS] Div layout

code HTML:



CSS:



Kết quả sẽ là:


Code CSS có sử dụng các thuộc tính:

  1. margin: chỉnh khoảng cách giữa đối tượng và lề
  2. float: giá trị là left thì đối tượng đó sẽ dồn về phía bên phải so với cha của nó, giá trị right đối tượng dồn sang phải
  3. height, width: chiều cao và chiều rộng: chú ý đến chiều rộng sao cho khớp và đủ khoảng cách giữa các thành phần, đảm bảo tổng chiều rộng. trong bài này chiều cao viết ra để dễ nhìn.
  4. border : đường viền của đối tượng các giá trị , kích cỡ, kiểu(solid, dotted, dashed), màu sắc. dùng trong bài viết để nhìn rõ layout.
Trên đây đã trình bày giao diện 3 cột. Ngoài ra còn có rất nhiều kiểu trình bày khác mà các bạn sáng tạo ra :3. Nếu có nội dung thì chúng ta sẽ bỏ thuộc tính border đi và dùng màu hoặc các nào đấy để phân chia nội dung cho phù hợp làm nổi rõ layout của trang web.

Các bạn có câu hỏi hay ghóp ý thì cmt nhé :3