Trang chủ
CSS
Bố cục trang web CSS
Dùng thử: Bố cục trang web đáp ứng
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; } body { họ phông chữ: Arial; phần đệm: 10px; nền: #f1f1f1; } /* Tiêu đề/Tiêu đề blog */ .header { đệm: 30px; căn chỉnh văn bản: giữa; nền: màu trắng; } .header h1 { cỡ chữ: 50px; } /* 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 hai cột không bằng nhau nổi cạnh nhau */ /* Cột trái */ .leftcolumn { float: left; chiều rộng: 75%; } /* Cột phải */ .rightcolumn { float: left; chiều rộng: 25%; màu nền: #f1f1f1; phần đệm bên trái: 20px; } /* Ảnh giả */ .fakeimg { màu nền: #aaa; chiều rộng: 100%; phần đệm: 20px; } /* Thêm hiệu ứng thẻ cho bài viết */ .card { Background-color: white; phần đệm: 20px; lề trên: 20px; } /* Xóa phần nổi sau các cột */ .row::after { content: ""; hiển thị: bảng; rõ ràng: cả hai; } /* Chân trang */ .footer { đệm: 20px; căn chỉnh văn bản: giữa; nền: #ddd; lề trên: 20px; } /* Bố cục đáp ứng - khi màn hình rộng dưới 800px, đặt hai cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen và (max-width: 800px) { .leftcolumn, .rightcolumn { chiều rộng: 100%; phần đệm: 0; } } /* Bố cục đáp ứng - khi màn hình rộng dưới 400px, hãy đặt các liên kết điều hướng xếp chồng lên nhau thay vì cạnh nhau */ @media screen và (max-width: 400px) { .topnav a { phao: không có; chiều rộng: 100%; } } </style> </head> <body> <div class="header"> <h1>Trang web của tôi</h1> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</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> <a href ="#" style="float:right">Liên kết</a> </div> <div class="row"> <div class="leftcolumn"> <div class="card"> <h2>TIÊU ĐỀ TIÊU ĐỀ </h2> <h5>Mô tả tiêu đề, ngày 7 tháng 12 năm 2017</h5> <div class="fakeimg" style="height:200px;">Hình ảnh</div> <p>Một số văn bản..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exeritation ullamco.</p> </div> <div class="card"> <h2>TITLE HEADING</h2> <h5>Mô tả tiêu đề, ngày 2 tháng 9 năm 2017</h5> <div class="fakeimg" style="height:200px;">Hình ảnh</div> <p>Một số văn bản..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tạm thời xảy ra trong công việc và dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco.</p> </div> </div> <div class="rightcolumn"> <div class="card"> <h2>Giới thiệu về tôi</h2> <div class="fakeimg" style="height:100px;">Hình ảnh</div> <p>Một số văn bản về tôi trong culpa qui officia deserunt mollit anim..</p> </div> <div class="card" > <h3>Bài đăng phổ biến</h3> <div class="fakeimg"><p>Hình ảnh</p></div> <div class="fakeimg"><p>Hình ảnh</p></div> <div class="fakeimg"><p>Hình ảnh</p></div> </div> <div class="card"> <h3>Theo dõi tôi</h3> <p>Một số văn bản..</ p> </div> </div> </div> <div class="footer"> <h2>Chân trang</h2> </div> </body> </html>