页脚项目变得浓缩

时间：2013-11-15 04:16:10

标签： html css

出于某种原因，如果您使用浏览器窗口并将其调整为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/

1 个答案:

答案 0 :(得分：1)

如果你有任何疑问，请注意..你可以问我。

enter image description here

这是你的代码.. 

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

最后，这是你的小提琴......

Fiddle..

相关问题
最新问题