Trang chủ
CSS
CSS Flexbox
Đáp ứng linh hoạt
Dùng thử: Trang web đáp ứng sử dụng 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> <head> <title>Tiêu đề trang</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale= 1"> <style> * { kích thước hộp: hộp viền; } /* Tạo kiểu cho phần thân */ body { font-family: Arial; lề: 0; } /* Tiêu đề tiêu đề/logo */ .header { đệm: 60px; căn chỉnh văn bản: giữa; nền: #1abc9c; màu trắng; } /* Tạo kiểu cho thanh điều hướng trên cùng */ .navbar { display: flex; màu nền: #333; } /* Tạo kiểu cho các liên kết trên thanh điều hướng */ .navbar a { color: white; phần đệm: 14px 20px; trang trí văn bản: không có; căn chỉnh văn bản: giữa; } /* Thay đổi màu khi di chuột */ .navbar a:hover { Background-color: #ddd; màu đen; } /* Vùng chứa cột */ .row { display: flex; flex-wrap: bọc; } /* Tạo hai cột không bằng nhau nằm cạnh nhau */ /* Thanh bên/cột bên trái */ .side { flex: 30%; màu nền: #f1f1f1; phần đệm: 20px; } /* Cột chính */ .main { flex: 70%; màu nền: trắng; phần đệm: 20px; } /* Hình ảnh giả, chỉ dành cho ví dụ này */ .fakeimg { Background-color: #aaa; chiều rộng: 100%; phần đệm: 20px; } /* Chân trang */ .footer { đệm: 20px; căn chỉnh văn bản: giữa; nền: #ddd; } /* Bố cục đáp ứng - khi màn hình rộng dưới 700px, đặt hai cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen và (max-width: 700px) { .row, .navbar { hướng flex: cột; } } </style> </head> <body> <!-- Lưu ý --> <div style="background: yellow;padding:5px"> <h4 style="text-align:center">Thay đổi kích thước trình duyệt để xem hiệu ứng phản hồi.</h4> </div> <!-- Header --> <div class="header"> <h1>Trang web của tôi</h1> <p>Với <b>linh hoạt< /b> bố cục.</p> </div> <!-- Thanh điều hướng --> <div class="navbar"> <a href="#">Liên kết</a> <a href="#" >Liên kết</a> <a href="#">Liên kết</a> <a href="#">Liên kết</a> </div> <!-- Lưới linh hoạt (nội dung) --> < div class="row"> <div class="side"> <h2>Giới thiệu về tôi</h2> <h5>Ảnh của tôi:</h5> <div class="fakeimg" style="height:200px;" >Hình ảnh</div> <p>Một số văn bản về tôi trong culpa qui officia deserunt mollit anim..</p> <h3>Văn bản khác</h3> <p>Lorem ipsum dolor sit ame.</p> <div class="fakeimg" style="height:60px;">Hình ảnh</div><br> <div class="fakeimg" style="height:60px;">Hình ảnh</div><br> <div class= "fakeimg" style="height:60px;">Hình ảnh</div> </div> <div class="main"> <h2>TIÊU ĐỀ TITLE</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 ưu tú, 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 exeritation ullamco.</p> <br> <h2>TIÊU ĐỀ TITLE</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 tempor incididunt ut labe et dolore rượu magna. Ut enim ad minim veniam, quis nostrud ullamco.</p> </div> </div> <!-- Footer --> <div class="footer"> <h2>Footer</h2> </div > </body> </html>