0

出于某种原因，如果您打开浏览器窗口并将其调整为 1/2 或 1/4，我页面上的页脚项目会被压缩并且全部混乱。

示例： http: //gyazo.com/c1e8d0f77702d597c10c2a0786711545.png

链接：http ://skipq.net/app/index4.php

页脚代码：

<footer id='footer'>
<div class="wrapper">
    <div class="about" style="width:20%;">
      <h1>
        <img width="90" height="90" style="margin-left:130px;" title="This is the icon of app, look for it on your app store!" src="images/iconq.png">
      </h1>
    <ul>
      <li><a target="_top" href="#link"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5d/Available_on_the_App_Store_%28black%29.png" style="margin-left:75px;margin-top:10px;width:120px;" width="100" height="40"></a>
      </li><br />
      <li><a target="_top" href="#link"><img src="http://www.blog.catblogosphere.com/cb-content/uploads/2013/07/google_play_icon.png" style="margin-left:65px;margin-top:10px;width:120px;" width="100" height="40"></a></li>
    </ul>
    </div>
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;">
      <center>
        <img src="images/thirdicon.png" width="216" height="91">
      <li style="height:100%;width:75%;">
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text) > '120'){
            echo substr($text,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text;
          }
          ?></li>
        </ul>
    </center>
      </li>
    </ul>
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;">
      <center>
        <img src="images/firsticon.png" width="230" height="90">
      <li style="width:75%;">
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text2) > '120'){
            echo substr($text2,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text2;
          }
          ?></li>
        </ul>
    </center>
      </li>
    </ul>
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;">
      <center>
        <img src="images/Electronics2.png" width="170" height="91">
      <li style="width:75%;">
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text2) > '120'){
            echo substr($text2,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text2;
          }
          ?></li>
        </ul>
    </center>
      </li>
    </ul>
<ul class="links" style="positon:relative;float:left;">
      <li>
        <h4>Connect With Us</h4>
        <ul class="external">
          <li class="twitter"><img src="images/twitter.png" width="16" height="16"><span class="icon-twitter"></span><a target="_top" href="http://www.twitter.com/SkipQ">Follow us on Twitter</a></li>
          <li class="facebook"><img src="images/facebook.png" width="16" height="16"><span class="icon-facebook"></span><a target="_top" href="http://www.facebook.com/SkipQ">Find us on Facebook</a></li>
          <li class="blog"><img src="images/youtube.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Subscribe on Youtube</a></li>
          <li class="blog"><img src="images/blog.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Read our Blog</a></li>
        </ul>
      </li>
    </ul>
  </div>

</div>
</div>
<br />
<br />
<br />
<br />
<div class="container secondary">
<br />
</div>
<div class="secondary" style="padding:2px;color:#FFF;background:#1158D4;">
  <ul>
  <li><a style="color:#FFF" href="/help">Help</a></li>
  <li><a style="color:#FFF" href="/policy">Privacy Policy</a></li>
  <li><a style="color:#FFF" href="/terms">Terms</a></li>
  <li>&copy; 2013 SkipQ</li>
</ul>
</div>


</footer>

如果您需要更多代码，请告诉我！我很乐意提供更多:)

jsfiddle：http: //jsfiddle.net/v4vuh/

4

1 回答 1

1

万一你有任何疑问..你可以问我。

在此处输入图像描述

这是你的代码..

<footer id='footer'>
<div class="wrapper">
    <div class="about" style="width:20%;">
      <h1 style="display:block; text-align:right">
        <img width="90" height="90" style="" title="This is the icon of app, look for it on your app store!" src="images/iconq.png">
      </h1>
    <ul>
      <li><a target="_top" href="#link"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5d/Available_on_the_App_Store_%28black%29.png" style="width:120px;" width="100" height="40"></a>
      </li>
      <li><a target="_top" href="#link"><img src="http://www.blog.catblogosphere.com/cb-content/uploads/2013/07/google_play_icon.png" style="width:120px;" width="100" height="40"></a></li>
    </ul>
    </div>
    <ul class="links" style="position:relative;float:left;">
      <li><img src="images/Electronics2.png" width="170" height="91"></li>
      <li>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text) > '120'){
            echo substr($text,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text;
          }
          ?></li>
        </ul>
      </li>
    </ul>
    <ul class="links" style="position:relative;float:left;">
      <li><img src="images/Electronics2.png" width="170" height="91"></li>
      <li>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text2) > '120'){
            echo substr($text2,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text2;
          }
          ?></li>
        </ul>
      </li>
    </ul>
    <ul class="links" style="position:relative;float:left;">
      <li><img src="images/Electronics2.png" width="170" height="91"></li>
      <li>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text2) > '120'){
            echo substr($text2,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text2;
          }
          ?></li>
        </ul>
      </li>
    </ul>
    <ul class="links" style="position:relative;float:left;">
      <li>
        <h4>Connect With Us</h4>
        <ul class="external">
          <li class="twitter"><img src="images/twitter.png" width="16" height="16"><span class="icon-twitter"></span><a target="_top" href="http://www.twitter.com/SkipQ">Follow us on Twitter</a></li>
          <li class="facebook"><img src="images/facebook.png" width="16" height="16"><span class="icon-facebook"></span><a target="_top" href="http://www.facebook.com/SkipQ">Find us on Facebook</a></li>
          <li class="blog"><img src="images/youtube.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Subscribe on Youtube</a></li>
          <li class="blog"><img src="images/blog.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Read our Blog</a></li>
        </ul>
      </li>
    </ul>
    <div style="clear:both"></div>
  </div>
<div class="container secondary">
</div>
<div class="secondary" style="padding:2px;color:#FFF;background:#1158D4;">
  <ul>
  <li><a style="color:#FFF" href="/help">Help</a></li>
  <li><a style="color:#FFF" href="/policy">Privacy Policy</a></li>
  <li><a style="color:#FFF" href="/terms">Terms</a></li>
  <li>&copy; 2013 SkipQ</li>
</ul>
</div>
</footer>

这是你的CSS ..：

#footer .wrapper
        {
            color: #969696;
            background-color: #B3B3B3;
            border-top: 1px solid #e1e1e1;
        }

        #footer *
        {
            font-weight: normal;
            padding: 0;
            margin: 0;
        }

        #footer li
        {
            list-style: none;
        }

        #footer h1, #footer h2, #footer h3, #footer h4
        {
            color: #5a5a5a;
        }

        #footer div.divider
        {
            border-top: 1px solid #e1e1e1;
        }

        #footer div.about, #footer ul.links
        {
            float: left;
            padding: 0;
        }

        #footer div.about
        {
            width: 330px;
            padding-left: 0;
        }

        #footer div.about h1
        {
            font-size: 17px;
            font-weight: normal;
            margin: 0 0 5px;
        }

        #footer div.about h1 .comma
        {
            font-weight: bold;
        }

        #footer div.about h1 .logo
        {
            display: inline-block;
            background: url(/assets/codecademy_logo_smallest-0323fdd409fc100a1991db8aa706f57e.png) no-repeat 0 -2px;
            height: 30px;
            width: 105px;
            margin-right: -5px;
            text-indent: -9999px;
        }

        #footer .secondary ul
        {
            margin: 20px 0;
        }

        #footer .secondary select.locales
        {
            top: 15px;
            right: 0;
            width: 120px;
        }

        #footer .about li, #footer .secondary li
        {
            display: block;
            border-right: 1px solid #e1e1e1;
            padding: 0 0px;
            text-align: right;
        }

        #footer .about li:first-child, #footer .secondary li:first-child
        {
            padding-left: 0;
        }

        #footer .about li:last-child, #footer .secondary li:last-child
        {
            padding-right: 0;
            border-right: none;
        }

        #footer ul.links
        {
            float: left;
            border-left: 1px solid #e1e1e1;
            padding-right: 0;
        }

        #footer ul.links > li
        {
            display: block;
            padding: 0 0px 0 0;
            text-align: justify;
        }

        #footer ul.links > li h4
        {
            padding: 0 0 15px;
            font-weight: bold;
            text-transform: uppercase;
        }

        #footer ul.links > li:last-child
        {
            padding-right: 0;
        }

        #footer .links li li
        {
            display: block;
            margin: 0 0 0px;
            height: auto;
        }

        #footer .links a, #footer .secondary a
        {
            color: #787878;
        }

        #footer .links a:hover, #footer .links a:hover .arrow, #footer .secondary a:hover, #footer .secondary a:hover .arrow
        {
            color: #005580;
        }

        #footer .links a .arraow, #footer .secondary a .arraow
        {
            margin-right: 5px;
            color: #08c;
        }

        #footer .external li span
        {
            margin-right: 5px;
        }

        #logo
        {
            background-image: url('images/logo.png');
        }

最后这是你的小提琴..

小提琴..

于 2013-11-15T05:09:03.313 回答