Trang chủ
CSS
Bố cục trang web CSS
Thử: Tạo kiểu cho chân trang
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="en"> <head> <title>Bố cục trang web CSS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, first-scale=1"> <style> * { box-sizing: border-box; } nội dung { lề: 0; } /* Tạo kiểu cho tiêu đề */ .header { Background-color: #f1f1f1; phần đệm: 20px; căn chỉnh văn bản: giữa; } /* Tạo kiểu cho thanh điều hướng trên cùng */ .topnav { tràn: ẩn; màu nền: #333; } /* Tạo kiểu cho các liên kết topnav */ .topnav a { float: left; hiển thị: khối; màu: #f2f2f2; căn chỉnh văn bản: giữa; phần đệm: 14px 16px; trang trí văn bản: không có; } /* Thay đổi màu khi di chuột */ .topnav a:hover { Background-color: #ddd; màu đen; } /* Tạo ba cột không bằng nhau nổi cạnh nhau */ .column { float: left; phần đệm: 10px; } /* Cột trái và cột phải */ .column.side { width: 25%; } /* Cột giữa */ .column.middle { width: 50%; } /* Xóa phần nổi sau các cột */ .row::after { content: ""; hiển thị: bảng; rõ ràng: cả hai; } /* Bố cục đáp ứng - làm cho ba cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100% ; } } /* Tạo kiểu cho chân trang */ .footer { Background-color: #f1f1f1; phần đệm: 10px; căn chỉnh văn bản: giữa; } </style> </head> <body> <div class="header"> <h1>Header</h1> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi.</p> </div> < div class="topnav"> <a href="#">Liên kết</a> <a href="#">Liên kết</a> <a href="#">Liên kết</a> </div> <div class="row"> <div class="column side"> <h2>Side</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p> </div> <div class ="column middle"> <h2>Nội dung chính</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ngồi amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ngồi amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column side"> <h2>Side</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p> </div> </div> <div class="footer"> <p>Chân trang</p> </div> </body> </html>