[CSS实战] 响应式Footer

效果浏览图

index.html

    
    
    
    
    
    


    

        

            

                
About Us
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
                

                    

                    

                    

                    

                
            

            

                
Quick Links
                

                    
About
                    
FAQ
                    
Privacy Policy
                    
Help
                    
Terms & Consitions
                    
Contact
                
            

            

                
Contact Info
                

                    

                        
                        647 Linda Street
Phoenixville, PA 19460,
USA
                    
                    

                        
                        
+1 234 567 8900

                           +1 234 567 8900
                    
                    

                        
                        
[email protected]
                    
                
            
        
    

    

        
Copyright © 2023 Online Tutorials. All Rights Reserved.
    

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppoms', sans-serif;
}

body{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background: #ede7f6;
}

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;
}

footer .container .sec{
    margin-right: 30px;
}

footer .container .sec.aboutus{
    width: 40%;
}

footer .container h2{
    position: relative;
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
}

footer .container h2::before{
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #f00;
}

footer p{
    color: #999;
}

.sci{
    margin-top: 20px;
    display: flex;
}

.sci li{
    list-style: none;
}

.sci 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;
}

.sci li a:hover{
    background: #f00;
}

.sci li a .fa{
    color: #fff;
    font-size: 20px;
}

.quickLinks{
    position: relative;
    width: 25%;
}

.quickLinks ul li{
    list-style: none;
}

.quickLinks ul li a{
    color: #999;
    text-decoration: none;
    margin-bottom: 10px;
    display: inline-block;
}

.quickLinks ul li a:hover{
    color: #fff;
}

.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;
}

.contact .info li a:hover{
    color: #fff;
}

.copyrightText{
    width: 100%;
    background: #181818;
    padding: 8px 100px;
    text-align: center;
    color: #999;
}

@media (max-width: 991px){
    footer{
        padding: 40px;
    }
    footer .container{
        flex-direction: column;
    }
    footer .container .sec{
        margin-right: 0;
        margin-bottom: 40px;
    }
    footer .container .sec.aboutus, .quickLinks, .contact{
        width: 100%;
    }
    .copyrightText{
        padding: 8px 40px;
    }
}