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 và khám phá khái niệm về footer thì hoàn toàn có thể xem ở đây nhé !
Tóm Tắt
Tạo Cấu Trúc Cho Footer Cho Trang Web
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
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é:
Bạn đang đọc: Thiết Kế Footer Website Bằng HTML CSS
HTML
Đường Dẫn
Thông Tin Liên Hệ
Quận 1, Thành Phố Hồ Chí Minh
Việt Nam
Và hiệu quả bạn xem video bên dưới nhé :
Thiết Lập Style Cho Nội Dung Trang Web
Trong phần này tất cả chúng ta sẽ đi vào thiết lập vị trí footer nằm ở vị trí sau cuối của website, chọn font chữ, background cho website … Và để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé :
CSS
*{
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(https://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;
}
Và hiệu quả bạn xem hình ảnh dưới đây nhé :
Thiết Lập Phần Giới Thiệu
Trong phần này tất cả chúng ta sẽ đi vào thiết lập CSS cho nội dung ra mắt của footer bằng đoạn mã bên dưới đây nhé :
CSS
/*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;
}
Và hiệu quả đoạn mã trên bạn xem bên dưới nhé :
Thiết Lập Phần Đường Dẫn
Trong phần này tất cả chúng ta sẽ đi vào thiết lập nội dung đường dẫn footer trong website bằng đoạn mã sau nhé :
CSS
.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;
}
Kết quả của đoạn mã CSS trên bạn xem bên dưới nha:
Thiết Lập Phần Thông Tin Liên Hệ
Trong phần này tất cả chúng ta sẽ đi vào thiết lập phần nội dung thông tin liên hệ cho footer bằng đoạn code sau nhé :
CSS
.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;
}
Kết quả của đoạn mã CSS trên bạn xem bên dưới nha :
Thiết Lập Phần Email Subscribe
Phần tiếp theo chúng ta sẽ đi vào thiết lập lại style cho thẻ input 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 sau cuối tất cả chúng ta sẽ đi vào phong cách thiết kế phân phối footer trên nhiều màn hình hiển thị 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ả ở đầu cuối bạn xem bên dưới nhé :
Bên dưới là đường dẫn dự án Bất Động Sả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 ứng thêm cho bạn những kiến thức và kỹ năng tạo footer có ích việc tăng trưởng, phong cách thiết kế web và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !
Source: https://final-blade.com
Category: Kiến thức Internet
