Giới Thiệu Chung
Hôm nay mình sẽ hướng dẫn tất cả mọi người xây dựng một trang lading page với grid css. Thì mình sẽ convert UI trang home của blog thanhlongdev với grid css bao gồm giao diện desktop và mobile.
Thì mình sẽ convert UI trang home của blog thanhlongdev với grid css bao gồm giao diện desktop và mobile.
Mục Đích Bài Viết
Đây không phải là chủ đề gì quá xa lạ và mới mẻ với các anh em front end dev. Nhưng mình vẫn muốn chia sẻ để giúp các bạn beginner nắm kĩ hơn các kiến thức về cách dựng một layout và chia component ra làm sao cho nó hợp lý, mà không cần sử dụng bất kì framework nào cả thông qua việc xây dựng một project thực tế. Mình chỉ mong muốn là các bạn đọc bài của mình thật kĩ và rõ ràng.
Nhưng mình vẫn muốn chia sẻ để giúp các bạn beginner nắm kĩ hơn các kiến thức về cách dựng một layout và chia component ra
làm sao cho nó hợp lý, mà không cần sử dụng bất kì framework nào cả thông qua việc xây dựng một project thực tế.
Mình chỉ mong muốn là các bạn đọc bài của mình thật kĩ và rõ ràng.
Bắt Đầu Thôi Nào
Lên Ý Tưởng
Ý tưởng để mà convert UI trang home của thanhlongdev cũng đơn giản thôi. Mình sẽ chia làm 3 phần nha header, main và footer để code nha. Chúng ta sẽ code từ giao diện desktop đến mobile. Trong đó, phần main của giao diện desktop ta sẽ chia các topic theo từng cột mà template đã định nghĩa sẵn, còn mobile thì ta sẽ các bài topic đều một cột cả.thanhlongdev cũng đơn giản thôi. Mình sẽ chia làm 3 phần nha header, main và footer để code nha.
Chúng ta sẽ code từ giao diện desktop đến mobile. Trong đó, phần main của giao
diện desktop ta sẽ chia các topic theo từng cột mà template đã định nghĩa sẵn, còn mobile thì ta sẽ các bài topic đều một cột cả.
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Thì nó cũng là một đơn vị kích thước tương tự như px, rem, em nhưng nó được thiết kế dành riêng cho grid.
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Code HTML
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4
Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
li { list-style: none; }
a { text-decoration: none; }
/* header */
header {
background: #0a0b0c;
padding: 0 5vw;
color: #fff;
}
/* Navbar */
nav {
margin: 0 auto; // Có chức năng căn giữa khi sử dụng chung với width
max-width: 1040px; // Set width khi vượt quá 1040 thì sẽ bay vào giữa
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.menu {
padding-top: .5rem;
display: grid;
grid-template-columns: repeat[4, .2fr];
justify-items: center;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* Nav right */
.site-nav-right {
display: grid;
grid-template-columns: 12fr 1fr;
padding: 10px 0;
height: 64px;
justify-items: right;
}
/* Banner */
.banner-header {
display: grid;
justify-items: center;
align-items: center;
padding: 6vw 3vw;
min-height: 200px;
max-height: 340px;
}
.banner-header .site-description {
text-align: center;
font-weight: 500;
padding: 5px 0;
font-size: 1.2rem;
line-height: 1.4em;
opacity: .8;
}
Style css các chi tiết trong phần header mà các bạn có thể tự css theo sức sáng tạo của mình nha.Và đây là kết quả khi chúng ta đã hoàn thành xong phần header
Và đây là kết quả khi chúng ta đã hoàn thành xong phần header