Block list với image float trái và phải, dành cho thiết kế sole tạo ấn tượng.
Category: Chuyên đề HTML/CSS
Block list với float
Block list, Chuyên đề HTML/CSS | Gửi bình luậnMột kỹ thuật float đơn giản, giúp block list có cấu trúc gọn hơn.
Block list với image
Block list, Chuyên đề HTML/CSS | Gửi bình luậnCũng là block list, nhưng lần này sẽ trang trí cho block list đẹp hơn chút kèm với image.
Block list cơ bản
Block list | Gửi bình luậnDanh sách được thể hiện dưới dạng block các thành phần có nhiều nội dung.
Một nhóm list
Chuyên đề HTML/CSS, List | Gửi bình luậnMột nhóm list được dùng trong footer, được dùng để liên kêt nhanh đến nội dung liên quan.
List với link
Chuyên đề HTML/CSS, List | Gửi bình luậnThể hiện một list liên kết, chúng ta có thể tùy biến icon hay khu vực liên kết cho các item trong danh sách.
List với icon image
Chuyên đề HTML/CSS, List | Gửi bình luậnThể hiện icon trong list thường thấy nhiều trong bất kỳ trang web nào, với một số cách đơn giản sau chúng ta sẽ cho xuất icon xuất hiện ở bất kỳ vị trí nào.
List với icon
Chuyên đề HTML/CSS, List | Gửi bình luậnThể hiện list với icon, chúng ta có thể dùng định dạng bằng list-style, ở đây sẽ giới thiệu tới chúng ta cách thể hiện icon list với background image.
List đơn giản
Chuyên đề HTML/CSS, List | Gửi bình luậnThể hiện danh sách đơn giản theo các tag
- ,
Paragraph với background line
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnĐôi khi ta gặp các dạng background xen kẻ từng dòng văn bản, việc sử dụng background như thế nào cho phù hợp cũng là một vấn đề cần biết.
Background corner với 2 tag
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnVới việc sử lý background lặp conner, đôi khi không giải quyết được bằng CSS3 trong trường hợp background lặp là dạng image phức tạp, với cách sử dụng sau sẽ giúp ta giải quyết được vấn đề.
Background image với 3 tag
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnSử dụng 3 tag để tạo background corner, ưu điểm của phương pháp này có thể co giản theo chiều dọc vô tận, khuyết điểm là hạn chế co giản theo chiều ngang, sử dụng 3 thẻ.
Paragraph với image, headline và link
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnThêm các thành phần khác vào một đoạn văn bản, đây là dạng thường dùng trong hầu hết các trang web.
Paragraph với background image
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnViệc sử dụng background image hiệu quả sẽ giúp chúng ta hạn chế sử dụng html không cần thiết và có thể điều chỉnh vị trí background dễ dàng.
Paragraph với image tách biệt nhau
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnVẫn là văn bản với image, giới thiệu tới các bạn một dạng khác biệt về layout.
Paragraph đơn giản với image
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnĐoạn văn bản với một image đi kèm là dạng phổ biến, chuyên đề sau sẽ giúp chúng ta hiểu rõ cách điều khiển nội dung này.
Paragraph đơn giản
Chuyên đề HTML/CSS, Paragraph | Gửi bình luậnThể hiện một đoạn văn bản thông qua html là một trong những kiến thức đơn giản nhất, tuy nhiên không phải ai cũng hiểu rõ cách viết như thế nào cho đúng chuẩn.
Tiêu đề với background bo góc tròn
Tiêu đề | Gửi bình luậnTrong một số design có sử dụng image có góc tròn, hay có độ lặp lại, nếu dùng được border-radius thì tốt, nhưng nếu là design đặc biệt thì việc dùng background image cũng hết sức cần thiết.
Tiêu đề với background icon nằm bên phải
Tiêu đề | Gửi bình luậnViệc xử lý background icon như thế nào sẽ tác động đến bộ mặt của trang web, vì tiêu đề thường đưa thông tin quan trọng, và có nhiều dạng như nhau trong cùng một trang. Icon nằm bên phải cũng là một dạng thường dùng.
Tiêu đề với dòng text giải thích
Tiêu đề | Gửi bình luậnĐôi lúc việc giải nghĩa thêm cho một tiêu đề là cần thiết, giúp cho user hiểu rõ nghĩa hơn nội dung cần nói về cái gì.