Trang chủ
CSS
Giới thiệu RWD
Dùng thử: Giới thiệu thiết kế web đá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; } html { họ phông chữ: "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; } .aside { màu nền: #33b5e5; phần đệm: 15px; màu sắc: #ffffff; căn chỉnh văn bản: giữa; cỡ chữ: 14px; bóng hộp: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { màu nền: #0099cc; màu sắc: #ffffff; căn chỉnh văn bản: giữa; cỡ chữ: 12px; phần đệm: 15px; } /* Dành cho điện thoại di động: */ [class*="col-"] { width: 100%; } @media only screen và (min-width: 600px) { /* Dành cho máy tính bảng: */ .col-s-1 {width: 8,33%;} .col-s-2 {width: 16,66%;} .col- s-3 {chiều rộng: 25%;} .col-s-4 {chiều rộng: 33,33%;} .col-s-5 {chiều rộng: 41,66%;} .col-s-6 {chiều rộng: 50%;} . col-s-7 {chiều rộng: 58,33%;} .col-s-8 {chiều rộng: 66,66%;} .col-s-9 {chiều rộng: 75%;} .col-s-10 {chiều rộng: 83,33%; } .col-s-11 {width: 91,66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* Dành cho máy tính để bàn: */ .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 {width: 83,33%;} .col-11 {width: 91,66%;} .col-12 {width: 100%;} } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 col-s-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-6 col-s-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> </div> <div class="col-3 col-s-12"> <div class="aside"> <h2 >Gì?</h2> <p>Chania là một thành phố trên đảo Crete.</p> <h2>Ở đâu?</h2> <p>Crete là một hòn đảo của Hy Lạp ở Địa Trung Hải.</p> <h2>Bằng cách nào?</h2> <p>Bạn có thể đến sân bay Chania từ khắp Châu Âu.</p> </div> </div> </div> <div class="footer"> <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> </body> </html>