美文网首页
响应式旅游网页的底部

响应式旅游网页的底部

作者: 霁雨轩阁 | 来源:发表于2017-12-08 08:26 被阅读0次

html
<footer id="footer">
<div class="top sm-hidden">
<div class="block left">
<h2>合作伙伴</h2>



<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>


<ul>
<li>旅游合同签订方式?</li>
<li>儿童价是基于什么制定的?</li>
<li>旅游的线路品质怎么界定的?</li>
<li>单房差是什么?</li>
<li>旅游保险有那些种类?</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>


<ul>
<li>微博:weibo.com/ycku</li>
<li>邮件:ycku@ycku.com</li>
<li>地址:江苏盐城无名路123号</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号<span class="sm-hidden"> | 旅行社经营许可证:L-YC-BK12345</span>
</div>
</footer>

footer {

background-color: #222;
clear:both;
position: relative;
top: 20px;

}

footer .top {

max-width: 1263px;
height: 280px;
margin: 0 auto;
text-align: center;

}

footer .version {

color: #777;
text-align: center;
padding: 10px 0;

}

footer .block {

width: 33.33%;
height: 320px;
display: inline-block;
color: #ccc;
text-align: left;
vertical-align: top;
display: block;
float: left;

}

footer .bottom {

padding: 15px 0;
text-align: center;
color: #777;
background-color: #000;
border-top: 1px solid #444;

}

footer h2 {

font-weight: normal;
padding: 20px 0 0 20px;
font-size: 24px;

}

footer hr {

width: 90%;
border: 1px dashed #333;

}

footer ul {

color: #666;
font-size: 18px;
text-indent: 20px;
line-height: 2;

}
.sm-visible {
display: none;
}

媒体查询
/当页面大于1200px 时,大屏幕,主要是PC 端/
@media (min-width: 1200px) {

}
/在992 和1199 像素之间的屏幕里,中等屏幕,分辨率低的PC/
@media (min-width: 992px) and (max-width: 1199px) {

}
/在768 和991 像素之间的屏幕里,小屏幕,主要是PAD/
@media (min-width: 768px) and (max-width: 991px) {

}
/在480 和767 像素之间的屏幕里,超小屏幕,主要是手机/
@media (min-width: 480px) and (max-width: 767px) {
.sm-visible {
display: block;
}
.bottom {
display: none;
}
}
/在小于480 像素的屏幕,微小屏幕,更低分辨率的手机/
@media (max-width: 479px) {
.sm-visible {
display: block;
}
#footer .bottom, #footer .version {
font-size: 13px;
}
.bottom {
display: none;
}
}

QQ截图20171207224349.png
QQ截图20171207223816.png

相关文章

  • 响应式旅游网页的底部

    html 合作伙伴 footer { } footer .top { } footer .version {...

  • 交互细节丨什么是响应式网页设计,这种设计有何优缺点

    1. 什么是响应式网页设计? 1.1 响应式网页设计的概念 响应式网页(Responsive Web Design...

  • 响应式布局

    一、响应式网页 二、如何测试响应式网页 三、响应式布局必须要清楚的两个概念 四、如何编写响应式网页 五、 Boot...

  • 响应式网页

    响应式网页 响应式网页可以根据设备的不同,以及特性的不同,而自动改变布局、大小等。 响应式网页的特征:1)流式网格...

  • 响应式网页设计

    一、介绍 什么是响应式网页设计? 响应式网页设计使您的网页在所有设备上都很好看。 响应式网页设计仅使用HTML和C...

  • 九、HTML5响应式布局

    @(HTML5)[相应式布局] [TOC] 九、HTML5响应式布局 什么是响应式网页设计(布局) 响应式网页设计...

  • 响应式布局

    什么是响应式网页?响应式网页有什么特点 可以根据浏览设备的不同,以及特性的不同,而自动改变布局、大小等,响应式网页...

  • 响应式网页设计

    名词解释 1.什么是响应式网页设计 响应式网页设计或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页...

  • 响应式网页设计

    什么是响应式网页设计? 响应式网页设计(RWD)就是网页内容会随着访问他的视口及设备的不同而呈现不同的样式 响应式...

  • 响应式网页设计(一)

    响应式网页设计(一) 目录 响应式网页设计(一)基本环境的建立响应式 最重要的 属性屏幕尺寸查询媒体查询 Medi...

网友评论

      本文标题:响应式旅游网页的底部

      本文链接:https://www.haomeiwen.com/subject/zsxsixtx.html