Question

我试图在不使用引导程序的情况下制作响应式页脚。只是css，但有些事情不对。页脚中的按钮也是图像而不是文本链接。页脚的结构是

<div id="footer">
    <ul>
        <li><a href=""><img src="images/button.png" width="221" height="61" id="Image26"></a> </li>
        <li><a href=""><img src="images/button.png" width="221" height="61" id="Image27"></a></li>
        <li><a href=""><img src="images/button.png" width="221" height="61" id="Image25"></a> </li>
        <li><a href=""><img src="images/button.png" width="221" height="61" id="Image24"></a></li>
    </ul>
    <p>Copyright &copy;  | all rights reserved.</p>
</div>

这是页脚的CSS

#footer{
    background: url(../images/bg-footer.png) repeat-x center top;
    min-height: 300px;
    margin-top: -45px;
    overflow: hidden;
    background-position-x: -15px;
}

#footer ul {
    list-style: none;
    margin: 50px auto 0;
    overflow: hidden;
    padding: 0;
    width: 960px;
}  

#footer ul li {
   float: left;
   height: 60px;
   line-height: 60px;
   margin: 0 0 0 25px;
   width: 220px;
}

#footer ul li:first-child {
   margin: 0;
}

#footer ul li a {
   background: url(../images/bg-menu1.png) no-repeat 0 -70px;
   color: #2B0D05;
   display: block;
   font-family: 'PlayballRegular';
   font-size: 30px;
   text-align: center;
   text-decoration: none;
}

#footer ul li.current a, 
#footer ul li a:hover {
   background: url(../images/bg-menu1.png) no-repeat 0 0;
   font-family: PlayballRegular;
}

#footer p {
   margin: 80px 0 0;
   text-align: center;
   text-transform: lowercase;
}

结果是当我调整窗口大小时，有3个按钮而不是4个，而<p></p>变得不可见。

这是迄今为止我尝试过的JSFFIDLE。

Answer 1

@media only screen and (max-width: 480px) {
#footer ul li a img {
  max-width: 100%;
  display: block;
  /* height: auto; */ // may b this thing makes the change for this resolution.
 }

尝试更改此css媒体查询选择器部分后可能会对此有所帮助。

现在，这是<p>代码

的更改

#footer p {
  margin: 80px 0 0;
  text-align: center;
  text-transform: lowercase;
  color: white; // to show white colored text only.
}

@media only screen and (max-width: 480px) {
#footer {
  /* max-height: 0; */   // this thing was causing for <p> tag that was not showing
  overflow: hidden;
  width: 100%;
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm6W-Dhy2DYzedY8Y9dXl7HypMH6IQoJxWG-VQ4igf4Dhep0yC0knRYOZX);
  width: 100%;
}

更改以上两项更改，我可以帮助您改变所需的内容

使用内部图像制作响应式页脚

1 个答案: