Nếu bạn đang mong muốn tạo ra một layout website 2 cột bằng html css thì trong bài này tôi sẽ giúp bạn xây dựng nó dễ dàng.
Demo layout sau khi thành phẩm
Xây dựng layout web 2 cột với flexbox
Để tạo ra layout như trên chúng ta cần kết hợp html và css. Bạn có thể tạo một dự án có cấu trúc file như sau:
layout |---index.html |---css |------main.css
Trong đó:
index.html
là file hiển thị layoutmain.css
nơi khao báo code css để hiển thị giao diện theo ý muốn
File index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/main.css"> <title>Layout web 2 cột</title> </head> <body> <div class="container"> <div id="header"> <h2 class="text-center">Unitop.vn</h2> </div> <div id="wp-content" class="d-flex"> <div id="content"> Content </div> <div id="sidebar"> Sidebar </div> </div> <div id="footer"> <p class="text-center">Học lập trình web đi làm</p> </div> </div> </body> </html>
File main.css
body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; } .container { max-width: 960px; margin: 0px auto; } .text-center{ text-align: center; } .d-flex{ display: flex; } #header { background: #0073aa; } #header h2 { font-size: 20px; line-height: 30px; padding: 15px 0px; color: #f8f8f8; text-transform: uppercase; flex: 100%; margin: 0px; } #wp-content { background: #f4f4f4; } #content { order: 2; flex: 600px; min-height: 600px; } #sidebar { order: 1; flex: 360px; background: #e1e1e1; min-height: 600px; } #footer { background: #232323; color: #f8f8f8; font-size: 20px; line-height: 1.5; padding: 5px 0px; } #footer p { margin: 0px; }
Bây giờ bạn hãy thực hành lại bài này bằng việc copy những file trên vào chương trình của mình để xem kết quả.