制作响应式页脚与内部图像

我试图做出响应式页脚而不使用引导程序。只是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; 
}

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

这是我到目前为止尝试的JSFFIDLE。

来源

2015-07-13 Stan

@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%; 
}

改变上述两个变化在哪里改变，可以帮助您有什么需要

来源

2015-07-13 08:30:40

此解决该问题与图像的数量。 '

文字

'仍然不可见 – Stan

只需一分钟，我只是忘记了那么这个花花公子的老板 –

@Stan看看编辑的答案。 –

制作响应式页脚与内部图像

回答

相关问题