Tạo layout website 2 cột nhanh chóng với Flexbox Css

tao-layout-web-voi-html-css-unitop

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ị layout
  • main.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ả.

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Tạo Link Icon Button với Html Css

Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng