Các bài tập đơn giản cắt html css bằng bootstrap năm 2024
Dạo gần đây mình có làm 1 task cắt HTML, CSS và mình cảm thấy nó khá là thú vị. HTML và CSS thì chắc chắn chẳng xa lạ gì với mấy đứa biết code, nhưng khi thực sự bắt tay vào làm mới thấy phát sinh rất nhiều vấn đề, và thay vì phải mò mẫm như mình, mình sẽ hướng dẫn các bạn step-by-step để biến một file PSD thành giao diện web với HTML, CSS.
Bài viết này chỉ sử dụng CSS3 và HTML5, không sử dụng bất kì frameworks nào khác như Bootstrap hay Zurb Foundation. Sử dụng framework lẽ dĩ nhiên nhanh hơn nhiều, nhưng nếu CSS thuần bạn ngon rồi, thì dùng hay ko dùng framework chỉ là chuyện nhỏ, bạn sẽ không bị phụ thuộc vào nó.
Đây là trang web mà hôm nay chúng ta sẽ làmHow it works
Sign up
Login
Quay lại trình duyệt
How it works
Sign up
Login
1, và class riêng cho 2 màu là
your nice slogan
- How it works
- Sign up
- Login
2 và
your nice slogan
- How it works
- Sign up
- Login
3 cho mỗi màu.
Insight
header is here
middle content is here
footer is here
9
Sử dụng
your nice slogan
- How it works
- Sign up
- Login
4 để bo tròn góc và
your nice slogan
- How it works
- Sign up
- Login
5 để đổ bóng cho button.
How it works
Sign up
Login
6 cho từng cột, mỗi cột thêm tiêu đề bằng thẻ
your nice slogan
- How it works
- Sign up
- Login
7 và danh sách các link.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
0
Thêm margin phía trên và phía dưới footer và thêm style cho tiêu đề và danh sách
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
1
How it works
Sign up
Login
8. Chỉnh lại size cho phù hợp với design trong
your nice slogan
- How it works
- Sign up
- Login
9.
How it works
Sign up
Login
4.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
6
Gần xong, còn thiếu vài cái đường gạch ngang phía dưới mỗi khối
Để thêm được cái này, ta lại sử dụng pseudo-selector :after và :before.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
7
Giờ F5 và xem kết quả
Đến khối tiếp theo, ở đây cũng có 3 phần, mỗi phần lại có 1 bức ảnh hình tròn cùng với tiêu đề và ngày. Làm tương tự giống như cái trên. Lấy bức ảnh từ pts và biến nó thành hình tròn bằng cách sử dụng
.logo {
float: left;
margin: 19px 17px 0 0;
}
8. Ta sẽ gọi khối to nhất bên ngoài là
.logo {
float: left;
margin: 19px 17px 0 0;
}
9, mỗi khối bên trong là
.slogan {
float: left;
margin-top: 22px;
font: italic 16px "Times New Roman", Times, Georgia, serif;
color: rgba[255, 255, 255, .35];
}
0, và nhớ đừng quên thêm
.logo {
float: left;
margin: 19px 17px 0 0;
}
3.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
8
Kết quả
Còn khối cuối cùng ta sẽ dùng
.slogan {
float: left;
margin-top: 22px;
font: italic 16px "Times New Roman", Times, Georgia, serif;
color: rgba[255, 255, 255, .35];
}
2 cho danh sách các ảnh và thẻ
.slogan {
float: left;
margin-top: 22px;
font: italic 16px "Times New Roman", Times, Georgia, serif;
color: rgba[255, 255, 255, .35];
}
3 cho phần tiêu đề. Ở đây có 1 cái hiệu ứng là khi di vào ảnh nó sẽ hiện rõ ra, nhưng khi lưu ảnh bạn vẫn phải lưu độ trong suốt 100% nhé, ta sẽ dùng thuộc tính opacity cho cái này.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
9
Vậy là xong rồi đó, giờ bạn đã biết cách chuyển từ file PSD thành HTML rồi chứ? Tất nhiên mỗi trang 1 kiểu, đây chỉ là 1 ví dụ rất nhỏ và đơn giản để bạn hiểu các bước cần thực hiện. Hy vọng bài viết sẽ giúp ích bạn phần nào, có thể down toàn bộ source code ở đây nhé.