Bạn đang học html css, 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
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.cssTrong đó:
index.htmllà file hiển thị layoutmain.cssnơ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ả.
Kết luận
Trong bài này tôi đã chia sẻ bạn cách tạo layout 2 cột bằng html css flexbox. Nếu bạn muốn tìm hiểu sâu hơn về html css để đi làm hãy xem ngay lộ trình học Html Css 21 Ngày được kèm cặp qua nhóm kín.
Phan Văn Cương founder unitop.vn
