Dùng CSS Boxs làm đẹp website

Thứ tư - 26/12/2007 13:53

Dùng CSS Boxs làm đẹp website

Thông thường khi chúng ta duyệt Web, chúng ta sẽ không để ý tới cách trình bày của trang Web đó, mà chỉ để ý đến thông tin của nó. Nhưng nếu chúng ta để ý một chút thì nhận thấy rằng, nếu Website nào biết vận dụng các kiểu trình bày hợp lý thì sẽ giúp người đọc phân biệt các mức độ thông tin rất nhanh. Điều đó sẽ có tác động tốt đối với người đọc

Để giúp các bạn có thói quen áp dụng các kiểu Typography vào trong Website của mình. Trong bài viết này tôi xin hướng dẫn các bạn làm một kiếu bubble đơn giản

Dạng bubble thường được sử dụng trong việc trích dẫn lời nói của một tác giả nào đó, hoặc trong các lời bình luận trong các blog.

1. Định dạng HTML

<div class="bubblewrapper">
<div class="comment">
Đây là ví dụ của một kiểu bubble đơn giản, các bạn có thể ứng dụng chúng vào ngay trong site của mình. Chúc các bạn thành công! </div>
<div class="commentfooter">
<span class="author">Tác giả: CSSYeah.com
</div>
</div>

Để làm kiểu bublle đơn giản này chúng ta sẽ sử dụng hai thẻ <div>. Thẻ

chứa lời bình luận, còn thẻ
< sẽ được dùng chứa thông tin tác giả.

 

Thẻ <div class="bubblewrapper"> trong trường hợp này có tác dụng giới hạn kích thước cho hai thẻ

bên trong. Khi đưa vào trong Website bạn có thể thay đổi kích thước của nó để cho phù hợp với nội dung Website.

 

2. Định dạng CSS

Ta có định dạng CSS của kiểu bublle trên như sau: 

#wrapper {
 width: 400px;
 margin: 0 auto;
 padding: 0;
}
 
div.comment {
 margin: 0;
 padding: 10px;
 background: #E8ECEF;
}
 
div.commentfooter {
 padding: 8px 0 0 22px;
 background: url(arrow-down.gif) no-repeat 20px 0 #FFFFFF;
}
 
span.author {
 padding-left: 15px;
 background: url(author.gif) no-repeat left center;
 font-weight: bold;
}
 
div.commentfooter a {
 color: #CC0000;
}
 
div.commentfooter a:hover,
div.commentfooter a:active {
 text-decoration: none;
}

Trong phần nội dung do chúng ta có thể dùng nhiều lần đạng bubble này, do vậy chúng ta định dạng thuộc tính class cho thẻ <div>

Các bạn có thể tải ví dụ mẫu ở đây!

Nguồn tin: 3CdotCom

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

Theo dòng sự kiện

Xem tiếp...

Những tin mới hơn

Những tin cũ hơn

Logo và tên gọi NukeViet

Tên gọi: NukeViet phát âm là [Nu-Ke-Việt], đây là cách đọc riêng, không phải là cách phát âm chuẩn của tiếng Anh. Ý nghĩa: NukeViet là từ ghép từ chữ Nuke và Việt Nam. Sở dĩ có tên gọi này là vì phiên bản 1.0 và 2.0 của NukeViet được phát triển từ mã nguồn mở PHP-Nuke. Mặc dù từ phiên bản 3.0,...

Thăm dò ý kiến

Bạn biết gì về NukeViet 4?

Thống kê truy cập
  • Đang truy cập163
  • Máy chủ tìm kiếm23
  • Khách viếng thăm140
  • Hôm nay31,627
  • Tháng hiện tại554,290
  • Tổng lượt truy cập107,328,318
Thông tin mời thầu

  • Đầu tư thiết bị đầu cuối hội nghị truyền hình cho Trung tâm Chăm sóc Khách hàng

      Thứ ba - 21/10/2025 13:58

    Số TBMT: IB2500463726-00. Bên mời thầu: CHI NHÁNH TỔNG CÔNG TY ĐIỆN LỰC MIỀN NAM TNHH - CÔNG TY CÔNG NGHỆ THÔNG TIN ĐIỆN LỰC MIỀN NAM. Đóng thầu: 08:00 31/10/25

  • Hóa chất miễn dịch máy VIDAS

      Thứ ba - 21/10/2025 13:30

    Số TBMT: IB2500466225-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 08:00 31/10/25

  • Test nhanh

      Thứ ba - 21/10/2025 13:18

    Số TBMT: IB2500466224-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 08:00 31/10/25

  • Hóa chất huyết học máy Midray

      Thứ ba - 21/10/2025 13:02

    Số TBMT: IB2500466223-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 08:00 31/10/25

  • Vật tư tiêu hao khác

      Thứ ba - 21/10/2025 12:49

    Số TBMT: IB2500466218-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 16:00 30/10/25

  • Thi công xây lắp công trình

      Thứ ba - 21/10/2025 12:41

    Số TBMT: IB2500466210-00. Bên mời thầu: Sở Xây dựng Tây Ninh. Đóng thầu: 08:00 30/10/25

  • Hóa chất điện giải

      Thứ ba - 21/10/2025 12:31

    Số TBMT: IB2500466217-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 16:00 30/10/25

  • Phim Xquang

      Thứ ba - 21/10/2025 12:30

    Số TBMT: IB2500466212-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 16:00 30/10/25

  • Dây truyền dịch, sonde, kim tiêm các loại

      Thứ ba - 21/10/2025 12:29

    Số TBMT: IB2500466204-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 16:00 30/10/25

  • Chỉ khâu các loại

      Thứ ba - 21/10/2025 12:28

    Số TBMT: IB2500466170-00. Bên mời thầu: Trung tâm Y tế Ninh Giang. Đóng thầu: 16:00 30/10/25
Left-column advertisement
Tin từ NukeViet.vn
Kế hoạch lựa chọn nhà thầu
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây