Thiết kế web HTML5: Hướng dẫn tạo Columns bằng CSS3

Thảo luận trong 'HTML vs Browser' bắt đầu bởi seoweb24h, 26/1/13.

  1. seoweb24h

    seoweb24h Lính mới

    Tham gia ngày:
    16/3/12
    Bài viết:
    28
    Đã được thích:
    0
    Điểm thành tích:
    1
    [h=2]Bài viết hướng dẫn các bạn phương pháp tạo cột bằng CSS3 với công nghệ thiết kế web HTML5. Những columns đơn giản ta không cần đến đoạn code rắc rối của table nữa mà chỉ cần một thuộc tính.[/h]Tính năng CSS3 Multiple Columns: cho phép khai báo số lượng cột, chiều rộng, khoảng cách từng cột và khoảng cách đường viền. Các thuộc tính cho tag như sau:

    • column-count: số cột
    • column-width: chiều rộng cột
    • column-gap: khoảng cách giữa các cột
    • column-rule: đường phân cách giữa các cột
    Các bạn lưu ý là phải thêm định dạng browser trước các thuộc tính trên nhé (-webkit-, -moz-, …)
    VÍ dụ:
    Đoạn văn bản chia 3 cột từ trái sang phải sau:

    Thiết kế Web HTML5 cung cấp gói Website tiêu chuẩn nhất với công nghệ HTML5 và CSS3 giúp tối ưu hóa tốc độ duyệt web, đạt chuẩn W3C, chuẩn hóa SEO giúp website quảng cáo hiệu quả nhất.


    Do forum không hỗ trợ html: các bạn vào đây link web để xem hiệu ứng nha

    Với đoạn thuộc tính như sau:

    -webkit-column-count: 3;
    -webkit-column-width: 110px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #d6d6d6;
    -moz-column-count: 3;
    -moz-column-width: 110px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #d6d6d6;
    -o-column-count: 3;
    -o-column-width: 110px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #d6d6d6;


    Chúc các bạn thành công với hiệu ứng của cộng nghệ thiết kế web mới HTML5 & CSS3 này.

    Nguồn: thietkewebhtml5.net
     
Đang tải...
Chủ đề tương tự - Thiết kế web
  1. friendntt10
    Trả lời:
    0
    Đọc:
    1,196
  2. ntclick
    Trả lời:
    2
    Đọc:
    1,588
  3. friendntt10
    Trả lời:
    3
    Đọc:
    1,142
  4. doind
    Trả lời:
    0
    Đọc:
    881
  5. ntclick
    Trả lời:
    14
    Đọc:
    3,466

Chia sẻ trang này