Trang chủ
CSS
Giới thiệu lưới CSS
Thử: Bố cục lưới
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> .item1 { Grid-area: header; } .item2 { vùng lưới: menu; } .item3 { vùng lưới: chính; } .item4 { vùng lưới: bên phải; } .item5 { vùng lưới: chân trang; } .grid-container { display: lưới; Grid-template-areas: 'tiêu đề tiêu đề tiêu đề tiêu đề tiêu đề tiêu đề' 'menu chính chính bên phải' 'menu chân trang chân trang chân trang chân trang chân trang'; khoảng cách: 10px; màu nền: #2196F3; phần đệm: 10px; } .grid-container > div { màu nền: rgba(255, 255, 255, 0.8); căn chỉnh văn bản: giữa; phần đệm: 20px 0; cỡ chữ: 30px; } </style> </head> <body> <h1>Bố cục lưới</h1> <p>Mô-đun bố cục lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp việc thiết kế các trang web dễ dàng hơn mà không cần phải sử dụng phao và định vị:</p> <div class="grid-container"> <div class="item1">Tiêu đề</div> <div class="item2">Menu</div> <div class ="item3">Chính</div> <div class="item4">Phải</div> <div class="item5">Chân trang</div> </div> </body> </html>