1

我想通过 CSS 使页脚响应。我已经尝试过了，background-size: cover但它不起作用。我怎样才能让它响应？

这是CSS代码：

#super-footer {

    width: 75%; position: relative;
    background-color:#176ca5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 10px 10px 250px;
    height:auto; min-height:200px;
    margin:25px 0 10px 0;
    float:left; 
    background-image:url('images/footer-bg.png');
    background-repeat:no-repeat;
    background-position: 25px 30px;
    -moz-box-shadow:    2px 3px 5px 1px #ccc;
    -webkit-box-shadow: 2px 3px 5px 1px #ccc;
    box-shadow:         2px 3px 5px 1px #ccc;
    vertical-align:middle;
}

这里是网站的链接：

http://demo.nextsyntax.com/goldcoast/

4

3 回答 3

0

尽管您可以通过针对不同分辨率修改 CSS 来进行响应式设计。但是有一个库可以很好地实现响应式设计。

http://twitter.github.io/bootstrap/

它可用于使您的网站响应屏幕分辨率。

于 2013-06-18T07:31:02.730 回答
0

您应该使用@media查询

例如

@media only screen and (max-device-width : 1024px) {
#super-footer {
width: 75%;
position: relative;
etc...}
}
于 2013-06-18T09:06:16.367 回答
0

使用类似的东西

<footer class="responsive-footer">

            <div class="footer-left">

                <p class="footer-links">
                    <a href="#">Home</a>
                    |
                    <a href="#">Blog</a>

                </p>
            </div>

            <div class="footer-center">
                <div>
                    <i class="fa fa-map-marker"></i>
                      <p><span>Address</p>
                </div>

                <div>
                    <i class="fa fa-phone"></i>
                    <p>+00 00-0000000</p>
                </div>
                <div>
                    <i class="fa fa-envelope"></i>
                    <p><a href="mailto:support@support.com">support@support.com</a></p>
                </div>
            </div>
            <div class="footer-right">

                <div class="footer-icons">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                </div>
            </div>
        </footer>

@media (max-width: 880px) {

    .responsive-footer .footer-left,
    .responsive-footer .footer-center,
    .responsive-footer .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .responsive-footer .footer-center i{
        margin-left: 0;
    }
 ``
于 2020-01-22T18:45:21.503 回答