Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html[nơi lưu trữ HTML] và style.css[nơi lưu trữ mã CSS]. Sau đó liên kết chúng với Google Font và Font Awesome thông qua đoạn mã dưới đây nhé:
HTML
Tạo Footer HTML CSS
Thêm Các Phần Tử HTML Cần Thiết Cho Footer
Trong phần này chúng ta sẽ thêm các phần tử HTML cần thiết để tạo footer cho trang web thông qua đoạn mã dưới đây nhé:
HTML
Về Chúng Tôi
Lorem ipsumdolor sit...
Đường Dẫn
- Trang Chủ
- Về Chúng Tôi
- Thông Tin Liên Lạc
- Dịch Vụ
- Điều Kiện Chính Sách
Thông Tin Liên Hệ
Đường Số 1
Quận 1, Thành Phố Hồ Chí Minh
Việt Nam
+84 123 456 789
+84 987 654 321
[email protected]
Gửi
Và kết quả bạn xem video bên dưới nhé:
[email protected]
Gửi
0 trong Footer bằng đoạn code sau nhé:CSS
.btn {
display: inline-block;
background: transparent;
color: inherit;
font: inherit;
border: 0;
outline: 0;
padding: 0;
margin-top:16px;
transition: all 200ms ease-in;
cursor: pointer;
}
.btn--primary {
background: #222;
color: #fff;
box-shadow: 0 0 10px 2px rgba[0, 0, 0, .1];
border-radius: 2px;
padding: 8px 24px;
}
.btn--primary:hover {
background: #f00;
}
.btn--primary:active {
background: #f00;
box-shadow: inset 0 0 10px 2px rgba[0, 0, 0, .2];
}
.form__field {
width: 90%;
background: #fff;
color: #a3a3a3;
font: inherit;
box-shadow: 0 6px 10px 0 rgba[0, 0, 0, .1];
border: 0;
outline: 0;
padding: 8px 4px;
}
Kết quả bạn xem hình ảnh dưới đây nha:
Responsive Cho Footer
Phần cuối cùng chúng ta sẽ đi vào thiết kế đáp ứng footer trên nhiều màn hình thiết bị bằng đoạn mã sau nhé:
CSS
@media [max-width: 768px]{
footer{
padding: 40px;
}
footer .container{
flex-direction: column;
}
footer .container .noi-dung{
margin-right: 0;
margin-bottom: 40px;
}
footer .container, .noi-dung.about, .links, .contact{
width: 100%;
}
}
Kết quả cuối cùng bạn xem bên dưới nhé:
Bên dưới là đường dẫn dự án trên Codepen nhé!
Nguồn Codepen
Nếu bạn muốn tham khảo thêm các ví dụ thiết kế footer thì truy cập đường dẫn bên dưới nha.
Footer HTML
Nếu bạn muốn tham khảo thêm các khoá học Udemy tốt nhất dành cho lập trình viên thì truy cập đường dẫn bên dưới nha.
Top 10 Khoá Học Lập Trình Web Trên Udemy
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo footer hữu ích việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!