Trang chủ
HTML
Bố cục HTML
Dùng thử: CSS flexbox
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; } /* Vùng chứa cho flexbox */ phần { display: -webkit-flex; hiển thị: linh hoạt; } /* Tạo kiểu cho menu điều hướng */ nav { -webkit-flex: 1; -ms-flex: 1; uốn cong: 1; 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; } /* Tạo kiểu cho nội dung */ bài viết { -webkit-flex: 3; -ms-flex: 3; độ uốn: 3; màu nền: #f1f1f1; phần đệm: 10px; } /* 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 menu và nội dung (bên trong phần) nằm chồng lên nhau thay vì cạnh nhau */ @media (max-width: 600px) {section { -webkit-flex-direction: cột; hướng linh hoạt: cột; } } </style> </head> <body> <h2>CSS Layout Flexbox</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.</p> <header> <h2>Thành phố</h2> </header> <section> <nav> <ul> <li><a href="#">Luân Đôn</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>