New FAMILUG

The PyMiers

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

1 comment:

  1. Bài viết không nên quá dài khi chỉ để trình bày những thứ lặp đi lặp lại, nhìn đã không muốn đọc rồi.

    Những cái nào chung nhất thì viết lại 1 bài thôi, các bài sau có thể link đến bài đấy để khỏi nói nữa. Ví dụ về cái thẻ head title ...
    code nào cũng có thì có thể bỏ qua, ghi vào là mất gàn chục dòng rồi.

    Về div layout. Nên viết về nó là cái gì, dùng làm gì, thay cho cái gì, khi nào, hơn là đưa vào 1 đống cú pháp (vì nếu cần tra cú pháp thì vào trang khác tra còn hơn)

    Nếu code quá dài (như trên) có thể ghi nhữn đoạn nổi bật trực tiếp vào bài, còn lại để link

    Cố gắng ngắn gọn, trọng tâm nhất có thể.

    ReplyDelete