Hướng dẫn css title đẹp

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




    
    
    
    [email protected];500&display=swap" rel="stylesheet">
    
    
    Tạo Footer HTML CSS




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

    Hướng dẫn css title đẹp

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

    Hướng dẫn css title đẹp

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

    Hướng dẫn css title đẹp

    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:

    Hướng dẫn css title đẹp

    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:

    Hướng dẫn css title đẹp

    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ẻ


        
            
            
                

    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
                        
                    

  •             
            
            
        

    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:

    Hướng dẫn css title đẹp

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

    Hướng dẫn css title đẹp

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