Ở bài này, tôi sẽ hướng dẫn bạn cách thiết kế một Layout đơn giản như sau: [Hoặc xem Layout cụ thể tại đây]
Hướng dẫn học lập trình web từ cơ bản đến nâng cao
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web.
Một trang web thường gồm các thành phần chính như:
- Header: Giới thiệu logo, một vài khẩu hiệu của trang web
- Footer: Thông tin bản quyền của trang web
- Menu: Thanh chức năng
- Nội dung
- ....
©2016 Web cơ bản All Rights Reserved
WEB CƠ BẢN .VN
Hướng dẫn học lập trình web từ cơ bản đến nâng cao
Layout là gì?
Một trang web thường gồm các thành phần chính như:
- Header: Giới thiệu logo, một vài khẩu hiệu của trang web
- Footer: Thông tin bản quyền của trang web
- Menu: Thanh chức năng
- Nội dung
- ....
©2016 Web cơ bản All Rights Reserved
Xem ví dụ
Giải thích đoạn mã
Layout gồm 3 thành phần chính: header, content, footer.
Thêm một thành phần container dùng để làm thùng chứa cho header, content, footer.
Trong CSS, ta thiết lập chiều rộng cho khối container là 800px. Dùng thuộc tính margin-left và margin-right để canh cho khối container nằm ở giữa màn hình.
Nói đến chia bố cục thì ngày xưa mọi người sẽ nghĩ đến float
đúng không nhưng float có một hạn chế đó là sập độ cao, và chúng ta cần thêm 1 bước để giải quyết vấn đề này là sử dựng thuộc tính clear: both được định nghĩa trong class .clearfix. Hay là kĩ thuật phân trang bằng html table những mà kĩ thuật đó đến giờ cũng không còn được ưu tiên sử dụng nữa :v .Có một kĩ thuật mới hơn đó là display flex
mà mình cũng có một bài giới thiệu tuy nhiên việc flex hiệu quả trong việc phân chia thẳng hàng còn phân chia theo luới thì nó cũng chưa thật sự tốt, rồi việc phân chia các phần tử chiếm bao nhiêu thì lại cần thêm flex grow
. Vậy để xem css grid
sẽ giúp ích chúng ta như thế nào nhé. Bắt tay vào làm luôn nhé
Chuẩn bị
để tìm hiểu css grid
đầu tiên bạn phải có 1 thẻ div bao ngoài. ở đây mình có 1 thẻ div có class là container và các thẻ div con bên trong nó như sau:
Cafedev chia sẻ cho ace về hiểu layout – bố cục một trang web đơn giản với CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Nội dung chính
1. Website Layout – Bố cục trang web
Một trang web thường được chia thành đầu trang, menu, nội dung và chân trang[headers, menus, content and a footer]:
Có rất nhiều thiết kế bố trí khác nhau để lựa chọn. Tuy nhiên, cấu trúc trên là một trong những cấu trúc phổ biến nhất và chúng ta sẽ xem xét kỹ hơn trong hướng dẫn này.
Link
Link
Link
Copy and chạy code
4. Content
Bố cục trong phần này, thường phụ thuộc vào mục tiêu người dùng. Bố cục phổ biến nhất là một [hoặc kết hợp chúng] như sau:
- 1 cột [thường được sử dụng cho trình duyệt trên thiết bị di động]
- 2 cột [thường được sử dụng cho máy tính bảng và máy tính xách tay]
- Bố cục 3 cột [chỉ được sử dụng cho máy tính để bàn]
Link
Link
Link
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Mẹo: Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, hãy sử dụng 25%, v.v.
5. Các cột không bằng nhau
Nội dung chính là phần lớn nhất và quan trọng nhất trên trang web của bạn.
Nó phổ biến với độ rộng cột không bằng nhau, vì vậy hầu hết không gian được dành cho nội dung chính. Nội dung phụ [nếu có] thường được sử dụng như một điều hướng thay thế hoặc để chỉ rõ thông tin liên quan đến nội dung chính. Thay đổi độ rộng tùy thích, chỉ nên nhớ rằng nó phải cộng tổng cộng 100%:
CSS Website Layout
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and [max-width: 600px] {
.column.side, .column.middle {
width: 100%;
}
}
Header
Resize the browser window to see the responsive effect.
Link
Link
Link
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
6. Footer
Chân trang được đặt ở cuối trang của bạn. Nó thường chứa thông tin như bản quyền và thông tin liên hệ:
CSS Website Layout
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and [max-width: 600px] {
.column.side, .column.middle {
width: 100%;
}
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
Header
Resize the browser window to see the responsive effect.
Link
Link
Link
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
7. Demo Bố cục trang web đầy đủ
Bằng cách sử dụng một số mã CSS ở trên, chúng tôi đã tạo bố cục trang web, bố cục này khác nhau giữa hai cột và cột có chiều rộng đầy đủ tùy thuộc vào chiều rộng màn hình:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and [max-width: 800px] {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and [max-width: 400px] {
.topnav a {
float: none;
width: 100%;
}
}
My Website
Resize the browser window to see the effect.
Link
Link
Link
Link
TITLE HEADING
Title description, Dec 7, 2017
Image
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADING
Title description, Sep 2, 2017
Image
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
About Me
Image
Some text about me in culpa qui officia deserunt mollit anim..
Footer
Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa: