Trang chủ
HTML
Bố cục HTML
Thử: Bố cục HTML
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 lang="vi"> <head> <title>Mẫu CSS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width ,init-scale=1"> <style> * { box-sizing: border-box; } body { họ phông chữ: Arial, Helvetica, sans-serif; } /* Tạo kiểu cho tiêu đề */ header { Background-color: #666; phần đệm: 30px; căn chỉnh văn bản: giữa; cỡ chữ: 35px; màu trắng; } /* Tạo hai cột/hộp nổi cạnh nhau */ nav { float: left; chiều rộng: 30%; chiều cao: 300px; /* chỉ để trình diễn, nên xóa */ nền: #ccc; phần đệm: 20px; } /* Tạo kiểu cho danh sách bên trong menu */ nav ul { list-style-type: none; phần đệm: 0; } bài viết { float: left; phần đệm: 20px; chiều rộng: 70%; màu nền: #f1f1f1; chiều cao: 300px; /* chỉ để trình diễn, nên xóa */ } /* Xóa phần nổi sau các cột */section::after { content: ""; hiển thị: bảng; rõ ràng: cả hai; } /* Tạo kiểu cho phần chân trang */ footer { màu nền: #777; phần đệm: 10px; căn chỉnh văn bản: giữa; màu trắng; } /* Bố cục đáp ứng - làm cho hai cột/hộp xếp chồng lên nhau thay vì cạnh nhau, trên màn hình nhỏ */ @media (max-width: 600px) { nav, Article { width: 100%; chiều cao: tự động; } } </style> </head> <body> <h2>CSS Layout Float</h2> <p>Trong ví dụ này, chúng ta đã tạo một tiêu đề, hai cột/hộp và một chân trang. Trên màn hình nhỏ hơn, các cột sẽ xếp chồng lên nhau.</p> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi (bạn sẽ tìm hiểu thêm về điều này trong chương tiếp theo của chúng tôi - HTML Responsive.)</p> <header> <h2>Thành phố</h2> </header> <section> <nav> <ul> <li><a href="#">London</a></li> <li><a href ="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London< /h1> <p>London là thủ đô của nước Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị hơn 13 triệu dân.</p> <p>Nằm bên sông Thames, London là một khu định cư lớn trong hai thiên niên kỷ, lịch sử của nó bắt nguồn từ những ngày đầu thành lập. được thành lập bởi người La Mã, người đặt tên cho nó là Londinium.</p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html>