Trang chủ
CSS
CSS nổi
Ví dụ
Tryit: Sử dụng float khi tạo trang web
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> <style> * { box-sizing: border-box; } nội dung { màu nền: trắng; } .header, .footer { màu nền: xám; màu trắng; phần đệm: 15px; } .column { float: left; phần đệm: 15px; } .clearfix::after { nội dung: ""; rõ ràng: cả hai; hiển thị: bảng; } .menu { chiều rộng: 25%; } .content { chiều rộng: 75%; } .menu ul { list-style-type: none; lề: 0; phần đệm: 0; } .menu li { phần đệm: 8px; lề dưới: 8px; màu nền: #33b5e5; màu sắc: #ffffff; } .menu li:hover { màu nền: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="clearfix"> <div class="column menu"> < ul> <li>Chuyến bay</li> <li>Thành phố</li> <li>Đảo</li> <li>Ẩm thực</li> </ul> </div> <div class= "nội dung cột"> <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>Bạn sẽ tìm hiểu thêm về bố cục web và các trang web phản hồi trong chương sau.</p> </div> </ div> <div class="footer"> <p>Văn bản chân trang</p> </div> </body> </html>