Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo footer cho trang web bằng HTML và CSS nhé! Nếu bạn muốn tìm hiểu khái niệm về footer thì có thể xem ở đây nhé! Phần đầu tiên chúng ta sẽ đi vào tạo hai file là 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é: Lorem ipsumdolor sit...Tạo Cấu Trúc Cho Footer Cho Trang Web
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
HTML
Về Chúng Tôi
Hướng dẫn footer html - html chân trang
Đườ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
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é:
Và kết quả bạn xem video bên dưới nhé:
Thiết Lập Style Cho Nội Dung Trang Web
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto;
}
body{
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: url[//niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/tao_footer_cho_website/Aare.svg];
}
footer{
position: relative;
width: 100%;
height: auto;
padding: 50px 100px;
background: #111;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
footer .container{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
}
Trong phần này chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí cuối cùng của trang web, chọn font chữ, background cho website... Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:
CSS
Và kết quả bạn xem hình ảnh dưới đây nhé:
Thiết Lập Style Cho Nội Dung Trang Web
/*Thiết Lập Cho Thành Phần Nội Dung Giới Thiệu*/
footer .container .noi-dung{
margin-right: 30px;
}
footer .container .noi-dung.about{
width:40%;
}
footer .container .noi-dung.about h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
footer .container .noi-dung.about h2:before{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: #f00;
}
footer .container .noi-dung.about p{
color: #999;
}
/*Thiết Lập Cho Thành Phần Icon Mạng Xã Hội*/
.social-icon{
margin-top: 20px;
display: flex;
}
.social-icon li {
list-style: none;
}
.social-icon li a{
display: inline-block;
width: 40px;
height: 40px;
background: #222;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
text-decoration: none;
border-radius: 4px;
}
.social-icon li a:hover{
background: #f00;
}
.social-icon li a .fa{
color: #fff;
font-size: 20px;
}
.links h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
Trong phần này chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí cuối cùng của trang web, chọn font chữ, background cho website... Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:
CSS
Và kết quả bạn xem hình ảnh dưới đây nhé:
Thiết Lập Style Cho Nội Dung Trang Web
.links h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
.links h2::before{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: #f00;
}
.links{
position: relative;
width: 25%;
}
.links ul li{
list-style: none;
}
.links ul li a{
color: #999;
text-decoration: none;
margin-bottom: 10px;
display: inline-block;
}
.links ul li a:hover{
color: #fff;
}
Trong phần này chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí cuối cùng của trang web, chọn font chữ, background cho website... Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:
CSS
Và kết quả bạn xem hình ảnh dưới đây nhé:
Thiết Lập Style Cho Nội Dung Trang Web
.contact h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
.contact h2::before{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: #f00;
}
.contact{
width: calc[35% - 60px];
margin-right: 0 !important;
}
.contact .info{
position: relative;
}
.contact .info li{
display: flex;
margin-bottom: 16px;
}
.contact .info li span:nth-child[1] {
color: #fff;
font-size: 20px;
margin-right: 10px;
}
.contact .info li span{
color: #999;
}
.contact .info li a{
color: #999;
text-decoration: none;
}
Trong phần này chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí cuối cùng của trang web, chọn font chữ, background cho website... Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:
CSS
Và kết quả bạn xem hình ảnh dưới đây nhé:
Thiết Lập Style Cho Nội Dung Trang Web
.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;
}
Trong phần này chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí cuối cùng của trang web, chọn font chữ, background cho website... Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:
CSS
Và kết quả bạn xem hình ảnh dưới đây nhé:
Thiết Lập Style Cho Nội Dung Trang Web
@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%;
}
}
Trong phần này chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí cuối cùng của trang web, chọn font chữ, background cho website... Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:
CSS
Và kết quả bạn xem hình ảnh dưới đây nhé:
Thiết Lập Phần Giới Thiệu
Footer HTML
Trong phần này chúng ta sẽ đi vào thiết lập CSS cho nội dung giới thiệu của footer bằng đoạn mã bên dưới đây nhé:
Top 10 Khoá Học Lập Trình Web Trên Udemy
Và kết quả đoạn mã trên bạn xem bên dưới nhé:
Thiết Lập Phần Đường Dẫn