[CSS实战] 响应式Footer

山茶花开时。

已于 2023-01-26 12:13:35 修改

阅读量349

点赞数 1

分类专栏： CSS 文章标签： HTML CSS

于 2023-01-25 15:23:16 首次发布

本文链接：https://blog.csdn.net/Hudas/article/details/128760920

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果浏览图

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Footer Design Using Html CSS</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <footer>
        <div class="container">
            <div class="sec aboutus">
                <h2>About Us</h2>
                <p>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.</p>
                <ul class="sci">
                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"  aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
                </ul>
            </div>

            <div class="sec quickLinks">
                <h2>Quick Links</h2>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Terms & Consitions</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

            <div class="sec contact">
                <h2>Contact Info</h2>
                <ul class="info">
                    <li>
                        <span><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                        <span>647 Linda Street<br>Phoenixville, PA 19460,<br>USA</span>
                    </li>
                    <li>
                        <span><i class="fa fa-phone" aria-hidden="true"></i></span>
                        <p><a href="tel:12345678900">+1 234 567 8900</a><br>
                           <a href="tel:12345678900">+1 234 567 8900</a></p>
                    </li>
                    <li>
                        <span><i class="fa fa-envelope" aria-hidden="true"></i></span>
                        <p><a href="mailto:knowmore@email.com">knowmore@email.com</a></p>
                    </li>
                </ul>
            </div>
        </div>
    </footer>

    <div class="copyrightText">
        <p>Copyright © 2023 Online Tutorials. All Rights Reserved.</p>
    </div>
</body>
</html>

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