Question

我如何调整任何设备的页脚长度和位置？

这是我遇到的问题，最重要的是当我从手机上看它时：

页脚的代码是：

<?php
echo '


    <!--footer start-->
    <footer class="footer-small">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-6 pull-right">
                    <ul class="social-link-footer list-unstyled">

                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".1s"><a href="https://www.facebook.com/giulio.greco.77?fref=ts" target="_blank"><i class="fa fa-facebook"></i></a></li>

                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".5s"><a href="https://twitter.com/giuliogrecoact" target="_blank"><i class="fa fa-twitter"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".6s"><a href="https://www.instagram.com/giuliogrecoactor/" target="_blank"><i class="fa fa-instagram"></i></a></li>

                    </ul>
                </div>
                <div class="col-md-4">
                <font color="white"><br>&copy; 2016 Giulio Greco<br><a href="privacy.php" target="_blank" hover="#5b5c5c"><b>Informativa sulla privacy</b></a><br><br>
                </font>
                </div>
            </div>
        </div>
    </footer>

    <script src="/cookiechoices.js"></script>
<script>//<![CDATA[
document.addEventListener("DOMContentLoaded", function(event) {
    cookieChoices.showCookieConsentBar("Questo sito utilizza i cookie tecnici e di terze parti, se continui la navigazione accetti il loro uso.",
        "Chiudi", "Maggiori Informazioni",
                 "privacy.php");
  });
//]]></script>
';
    ?>

页脚的样式是：

.footer {
    background: #34495e;
    color: #fff;
    padding: 50px 0;
    display: inline-block;
    width: 100%;
    font-weight: 300;
}
.footer h1 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 20px;
}
.footer address a { color: #48cfad }
.tweet-box {
    background: #505b71;
    padding: 8px 15px;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-bottom: 1px solid #636F79;
    font-size: 14px;
}
.tweet-box:before {
    background-color: #505b71;
    border-color: #505b71;
    border-image: none;
    border-right: 1px none #505b71;
    border-style: none;
    content: "";
    display: block;
    height: 22px;
    left: 60px;
    position: absolute;
    top: 32px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 22px;
}
.tweet-box  a,
.tweet-box i { color: #00adef }
.tweet-box  a:hover { color: #428bca }
.tweet-box i {
    font-size: 40px;
    float: left;
    margin-right: 15px;
}
.social-link-footer li {
    float: right;
    margin: 20px 10px 5px 0px;
    padding-bottom: 5px;
}
.social-link-footer li a {
    color: #333;
    background: #FFFFFF;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    float: left;
    text-align: center;
    font-size: 20px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.social-link-footer li a:hover {
    background: #c7c7c7;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.copyright {
    color: #fff;
    padding-top: 15px;
}
.page-footer { padding: 0% 13% }
.page-footer h1 { padding-left: 4% }
ul.page-footer-list {
    list-style: none;
    padding: 0px 10px;
}
ul.page-footer-list li {
    line-height: 35px;
    border-bottom: 1px dashed #636F79;
}
ul.page-footer-list a { color: #fff }
ul.page-footer-list li i { padding-right: 10px }
.footer-small {
    background-color: #333;
    margin-top: -6px;
    padding-top: 5px;
}
.text-footer {
    padding-left: 10px;
    margin-left: 10px;
}
.text-footer p { text-align: left }
.address p {
    text-align: left;
    margin-bottom: 10px;
}

Answer 1

页脚css样式通常包含100％的宽度并位于页面底部。如果您在设备大小更改时需要不同的css样式行为，则可以使用此示例中的媒体查询：

＆＃13;

$('[value=""]', event.target).remove();

＆＃13;

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

＆＃13;

一些相关的例子： Responsive Web Design - Media Queries

如何配置页脚长度和位置？

1 个答案: