Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Footer Bằng HTML CSS Cho Website

Tạo Footer Bằng HTML CSS Cho Website


Ngày 2 Tháng 12 Năm 2020

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é!

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Tạo Footer HTML CSS</title>
</head>
<body>
</body>
</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é:

HTML

<footer>
    <div class="container">
        <!--Bắt Đầu Nội Dung Giới Thiệu-->
        <div class="noi-dung about">
            <h2>Về Chúng Tôi</h2>
            <p>Lorem ipsumdolor sit...</p>
            <ul class="social-icon">
                <li><a href=""><i class="fa fa-facebook"></i></a></li>
                <li><a href=""><i class="fa fa-twitter"></i></a></li>
                <li><a href=""><i class="fa fa-instagram"></i></a></li>
                <li><a href=""><i class="fa fa-youtube"></i></a></li>
            </ul>
        </div>
        <!--Kết Thúc Nội Dung Giới Thiệu-->
        <!--Bắt Đầu Nội Dung Đường Dẫn-->
        <div class="noi-dung links">
            <h2>Đường Dẫn</h2>
            <ul>
                <li><a href="#">Trang Chủ</a></li>
                <li><a href="#">Về Chúng Tôi</a></li>
                <li><a href="#">Thông Tin Liên Lạc</a></li>
                <li><a href="#">Dịch Vụ</a></li>
                <li><a href="#">Điều Kiện Chính Sách</a></li>
            </ul>
        </div>
        <!--Kết Thúc Nội Dung Đường Dẫn-->
        <!--Bắt Đâu Nội Dung Liên Hệ-->
        <div class="noi-dung contact">
            <h2>Thông Tin Liên Hệ</h2>
            <ul class="info">
                <li>
                    <span><i class="fa fa-map-marker"></i></span>
                    <span>Đường Số 1<br />
                        Quận 1, Thành Phố Hồ Chí Minh<br />
                        Việt Nam</span>
                </li>
                <li>
                    <span><i class="fa fa-phone"></i></span>
                    <p><a href="#">+84 123 456 789</a>
                        <br />
                        <a href="#">+84 987 654 321</a></p>
                </li>
                <li>
                    <span><i class="fa fa-envelope"></i></span>
                    <p><a href="#">[email protected]</a></p>
                </li>
                <li>
                    <form class="form">
                        <input type="email" class="form__field" placeholder="Đăng Ký Subscribe Email" />
                        <button type="button" class="btn btn--primary  uppercase">Gửi</button>
                    </form>
                </li>
            </ul>
        </div>
        <!--Kết Thúc Nội Dung Liên Hệ-->
    </div>
</footer>

Và kết quả bạn xem video bên dưới nhé:

Footer1

Thiết Lập Style Cho Nội Dung Trang Web

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

*{
    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à kết quả bạn xem hình ảnh dưới đây nhé:

Footer2

Thiết Lập Phần Giới Thiệu

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é:

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à kết quả đoạn mã trên bạn xem bên dưới nhé:

Footer3

Thiết Lập Phần Đường Dẫn

Trong phần này chúng ta sẽ đi vào thiết lập nội dung đường dẫn footer trong trang web 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:

Footer4

Thiết Lập Phần Thông Tin Liên Hệ

Trong phần này 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:

Footer5

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:

Footer6

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é:

Footer_responsive

Bên dưới là đường dẫn dự án trên Codepen nhé!

Nguồn Codepen

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ẻ!

Load WooCommerce Stores in 249ms!