Trang chủ
CSS
Chế độ xem lưới RWD
Dùng thử: Xây dựng chế độ xem lưới đáp ứng
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> * { box-sizing: border-box; } .row::after { nội dung: ""; rõ ràng: cả hai; hiển thị: bảng; } [class*="col-"] { float: left; phần đệm: 15px; } .col-1 {chiều rộng: 8,33%;} .col-2 {chiều rộng: 16,66%;} .col-3 {chiều rộng: 25%;} .col-4 {chiều rộng: 33,33%;} .col-5 { chiều rộng: 41,66%;} .col-6 {chiều rộng: 50%;} .col-7 {chiều rộng: 58,33%;} .col-8 {chiều rộng: 66,66%;} .col-9 {chiều rộng: 75%;} .col-10 {chiều rộng: 83,33%;} .col-11 {chiều rộng: 91,66%;} .col-12 {chiều rộng: 100%;} html { font-family: "Lucida Sans", sans-serif; } .header { màu nền: #9933cc; màu sắc: #ffffff; phần đệm: 15px; } .menu ul { list-style-type: none; lề: 0; phần đệm: 0; } .menu li { phần đệm: 8px; lề dưới: 7px; màu nền: #33b5e5; màu sắc: #ffffff; bóng hộp: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { màu nền: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 menu" > <ul> <li>Chuyến bay</li> <li>Thành phố</li> <li>Đảo</li> <li>Ẩm thực</li> </ul> </div> <div class="col-9"> <h1>Thành phố</h1> <p>Chania là thủ đô của vùng Chania trên đảo Crete. Thành phố có thể được chia thành hai phần, khu phố cổ và thành phố hiện đại.</p> <p>Thay đổi kích thước cửa sổ trình duyệt để xem nội dung phản hồi như thế nào với việc thay đổi kích thước.</p> </div> </div> </body> </html>