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ả.

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

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments

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

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x