正文 

当前位置： 首页 > java > java教程

第33章项目实战-兼容式响应布局3

author author     2022-08-05     150

关键词：

第33 章项目实战-兼容响应式布局[3]
学习要点：
1.标题响应式
2.图片响应式

本章主要开始如果将前两个项目再进行重构，设计成既可以在PC 端正常显示，又可以
在PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计
了。
一．标题响应式
在首页的热门旅游这个主要区域，有一个大标题和小标题。通过响应式来设置他们在不
同分辨率显示的字体大小。
//PC 端移植
<div id="tour">
<section class="center">
<h2>热门旅游</h2>
<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种
最新热门旅游推荐</p>
</section>
</div>
//css
#tour .center h2 {
margin: 10px 0;
font-size: 45px;
letter-spacing: 2px;
color: #666;
}
#tour .center p {
color: #666;
margin: 10px;
}
//媒体查询部分
/*在992 和1199 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 992px) and (max-width: 1199px) {
#tour .center h2 {
font-size: 40px;
}
}
/*在768 和991 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 768px) and (max-width: 991px) {
#tour .center h2 {
font-size: 35px;
}
}
/*在480 和767 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 480px) and (max-width: 767px) {
#tour .center h2 {
font-size: 30px;
}
}
/*在小于480 像素的屏幕,这里的样式才生效*/
@media (max-width: 479px) {
#tour .center h2 {
font-size: 26px;
}
}
二．图片响应式
在PC 端，我们固定一行显示了三组旅游图片介绍。那么在响应式环节，我们可以设置
每个图片介绍为1/3 即可。而不同的分辨率可以是1/2 或1/1。
//PC 端复制，部分修改
<figure>
<img src="img/tour1.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;曼谷-芭提雅6 日游&gt;</strong> 包
团特惠，超丰富景点，升级1 晚国五，无自费，更赠送600 元/成人自费券
</div>
<div class="info">
<em class="sat">满意度77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
//css
#tour {
max-width: 1263px;
margin: 30px auto;
text-align: center;
}
#tour .center {
text-align: center;
}
#tour figure {
border: 1px solid #ddd;
display: block;
padding: 4px;
border-radius: 4px;
width: 32.4%;
margin: 15px 0.4%;
text-align: left;
position: relative;
float: left;
}
#tour figure img {
vertical-align: middle;
}
#tour figure figcaption {
color: #777;
font-size: 14px;
padding: 7px 0 0 0;
letter-spacing: 1px;
line-height: 1.5;
}
#tour .tour_title {
height: 40px;
overflow: hidden;
}
#tour .title {
color: #333;
font-weight: normal;
}
#tour .info {
padding: 5px 0 0 0;
}
#tour .price {
color: #f60;
font-size: 14px;
}
#tour .price strong {
font-size: 20px;
letter-spacing: 1px;
}
#tour .sat {
color: #999;
font-size: 13px;
font-style: normal;
float: right;
position: relative;
right: 5px;
top: 5px;
}
#tour .type {
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
border-bottom-right-radius: 4px;
background-color: #59b200;
font-size: 14px;
color: #fff;
letter-spacing: 1px;
position: absolute;
top: 4px;
left: 4px;
}
//媒体查询部分
/*在480 和767 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 480px) and (max-width: 767px) {
#tour figure {
width: 49.2%;
}
}
/*在小于480 像素的屏幕,这里的样式才生效*/
@media (max-width: 479px) {
#tour figure {
width: 99%;
}
}

 

代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>瓢城旅行社--响应式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>

<div id="adver">
<img src="img/adver.jpg" >
<div class="center"></div>
<div class="center copy">
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>
</div>

<div id="tour">
<section class="center">
<h2>热门旅游</h2>
<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
</section>
<figure>
<img src="img/tour1.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
</div>
<div class="info">
<em class="sat">满意度 77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;马尔代夫双鱼岛Olhuveli4晚6日自助游&gt;</strong> 上海出发，机+酒 包含:早晚餐+快艇
</div>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;海南双飞5日游&gt;</strong> 含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送
</div>
<div class="info">
<em class="sat">满意度 90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
<div class="type">自助旅游</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;富山-大阪-东京8日游&gt;</strong> 暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物
</div>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
<div class="type">自助旅游</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;法瑞意德12日游&gt;</strong> 4至5星，金色列车，少女峰，部分THE MALL
</div>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;巴厘岛6日半自助游&gt;</strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
</div>
<div class="info">
<em class="sat">满意度 95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;塞舌尔迪拜9日自助游&gt;</strong> 一游两国，4晚塞舌尔，2晚迪拜，香港EK往返
</div>
<div>
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>9669</strong> 起</span>
</div>
<div class="type">游轮观光</div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;花样姐姐土耳其9日或10日游&gt;</strong> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾
</div>
<div class="info">
<em class="sat">满意度 93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour9.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;大阪-京都-箱根双飞6日游&gt;</strong> 盐城直飞，不走回头路，境外无自费，超值之旅
</div>
<div class="info">
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>5284</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figcaption>
</figure>
</div>

<footer id="footer">
<div class="top sm-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订方式？</li>
<li>儿童价是基于什么制定的？</li>
<li>旅游的线路品质怎么界定的？</li>
<li>单房差是什么？</li>
<li>旅游保险有那些种类？</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博：weibo.com/ycku</li>
<li>邮件：[email protected]</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>

</body>
</html>

 

@charset "utf-8";

body,h1,h2,h3,p,ul,ol,form,fieldset,figure {
margin: 0;
padding: 0;
}
div,figure,img,input,button {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "5B8B4F53", simsun, sans-serif;
}
img {
display: block;
max-width: 100%;
}
ul,ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
.none {
display: none;
}
.sm-visible {
display: none;
}
.clearfix:after {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
#header {
width: 100%;
height: 70px;
background-color: #333;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
z-index: 9999;
}
#header .center {
max-width: 1263px;
height: 70px;
margin: 0 auto;
}
#header .logo {
width: 30%;
height: 70px;
background: url(../img/logo.png) no-repeat left center;
text-indent: -9999px;
float: left;
}
#header .link {
width: 55%;
height: 70px;
line-height: 70px;
color: #eee;
float: right;
}
#header .link li {
width: 20%;
text-align: center;
float: left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#adver {
max-width: 1920px;
margin: 0 auto;
padding: 70px 0 0 0;
position: relative;
}
#adver .center {
width: 40%;
height: 60px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -20%;
opacity: 0.6;
border-radius: 10px;
}
#adver .copy {
opacity: 1;
background-color: transparent;
padding: 3px 3px 0 3px;
}
#adver .search {
width: 70%;
height: 52px;
background-color: #eee;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
padding: 0 10px;
outline: none;
display: block;
float: left;
}
#adver .button {
width: 30%;
height: 54px;
background-color: #eee;
color: #666;
border: 1px solid #333;
border-left-width: 3px;
border-radius: 10px;
font-size: 24px;
outline: none;
cursor: pointer;
font-weight: bold;
display: block;
float: right;
}
#tour {
max-width: 1263px;
height: 1150px;
margin: 30px auto;
text-align: center;
}
#tour .center {
text-align: center;
}
#tour .center h2 {
margin: 10px 0;
font-size: 45px;
letter-spacing: 2px;
color: #666;
}
#tour .center p {
color: #666;
margin: 10px;
font-size: 16px;
}
#tour .tour_title {
height: 40px;
overflow: hidden;
}
#tour figure {
border: 1px solid #ddd;
display: block;
padding: 4px;
border-radius: 4px;
width: 32.4%;
margin: 15px 0.4%;
text-align: left;
float: left;
position: relative;
}
#tour figure img {
vertical-align: middle;
}
#tour figure figcaption {
color: #777;
font-size: 14px;
padding: 7px 0 0 0;
letter-spacing: 1px;
line-height: 1.5;
}
#tour .title {
color: #333;
font-weight: normal;
}
#tour .info {
padding: 5px 0 0 0;
}
#tour .price {
color: #f60;
font-size: 14px;
}
#tour .price strong {
font-size: 20px;
letter-spacing: 1px;
}
#tour .sat {
color: #999;
font-size: 13px;
font-style: normal;
float: right;
position: relative;
right: 5px;
top: 5px;
}
#tour .type {
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
border-bottom-right-radius: 4px;
background-color: #59b200;
font-size: 14px;
color: #fff;
letter-spacing: 1px;
position: absolute;
top: 4px;
left: 4px;
}
#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;
}

 


/*媒体查询，参考部分Bootstrap 框架*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {

}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
#tour .center h2 {
font-size: 40px;
}
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
#tour .center h2 {
font-size: 35px;
}
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
#header, #header .center, #header .link {
height: 45px;
}
#header .logo, .sm-hidden {
display: none;
}
#header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
#tour .center h2 {
font-size: 30px;
}
#tour .center p {
font-size: 15px;
}
#tour figure {
width: 49.2%;
}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
#header, #header .center, #header .link {
height: 45px;
}
#header .logo, .xs-hidden, .sm-hidden {
display: none;
}
#header .link {
width: 100%;
line-height: 45px;
}
#header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
#footer .bottom, #footer .version {
font-size: 13px;
}
#tour .center h2 {
font-size: 26px;
}
#tour .center p {
font-size: 14px;
}
#tour figure {
width: 99%;
}
}

第33章项目实战-兼容式响应布局2

第33章项目实战-兼容响应式布局[2]学习要点：1.搜索响应式2.底部响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情

第33章项目实战-兼容式响应布局6

第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情

原理+实战快速掌握响应式开发

...统2-9分而治之&预处理工具2-10JavaScript2-11调试方法第3章项目实战-音乐社区官网首页从环境搭建，到页面各部分代码编写，再到模拟调试，多设备浏览，gulp插件集成。完整实现一个音乐社区类的官网首页，把前面的知识融汇到... 查看详情

第32章项目实战-移动端流体布局3

第32章项目实战-移动端流体布局[3]学习要点：1.搜索部分2.旅游部分3.媒体查询本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．搜索部分搜索部分包含三个内容，背... 查看详情

第31章项目实战-pc端固定布局3

第31章项目实战-PC端固定布局[3]学习要点：1.搜索区2.插入大图3.搜索框本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．搜索区本节课，我们接着header头部往下，来设计一块搜索区。这... 查看详情

第32章项目实战-移动端流体布局5

第32章项目实战-移动端流体布局[5]学习要点：1.导航固顶2.三个栏目3.公司简介本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．导航固定由于移动设备屏幕高度较低... 查看详情

第31章项目实战-pc端固定布局4

第31章项目实战-PC端固定布局[4]学习要点：1.热门旅游区2.标题介绍区3.旅游项目区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．热门旅游区本节课，我们将探讨一下首页最核心的部... 查看详情

第31章项目实战-pc端固定布局5

第31章项目实战-PC端固定布局[5]学习要点：1.底部区域2.说明区域3.版权及证件区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．底部区域本节课，我们将探讨一下首页中最底部的区域... 查看详情

第31章项目实战-pc端固定布局6

第31章项目实战-PC端固定布局[6]学习要点：1.分离CSS2.头部区域3.内容区域本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．分离CSS本节课，我们将要创建一个新的页面：旅游资讯。那么... 查看详情

响应式开发一招致胜

...样分析设计图1-10响应式网站设计实践原则第2章如何组织项目目录结构介绍了约定优于配置的思想，常见的项目目录和文件的组织方式，一些基本文件的作用等知识，为编码开始做准备。2-1简述2-2文件夹的组织2-3有用的文件1（rob... 查看详情

第32章项目实战-移动端流体布局4

第32章项目实战-移动端流体布局[4]学习要点：1.旅游图片部分本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游图片部分//HTML部分<divclass="container"><figure>... 查看详情

第32章项目实战-移动端流体布局6

第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情

第31章项目实战-pc端固定布局9

第31章项目实战-PC端固定布局[8]学习要点：1.资讯内容2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．资讯内容和首页一样，只不过这里，布局方式有所不同，具体如下：二... 查看详情

精通高级rxjava2响应式编程思想

...。先简单介绍和回顾RxJava，之后进入源码分析，再以实战项目来加深 查看详情

第31章项目实战-pc端固定布局10

第31章项目实战-PC端固定布局[10]学习要点：1.机票预定2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．机票预定机票预定页面，具体如下：二．代码详解//全部代码<formactio... 查看详情

第31章项目实战-pc端固定布局8

第31章项目实战-PC端固定布局[8]学习要点：1.归类合并2.子导航本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．归类合并在前面几节课中，有一部分HTML代码比较松散，没有统一到一个类... 查看详情

第31章项目实战-pc端固定布局7

第31章项目实战-PC端固定布局[7]学习要点：1.侧栏制作2.详细代码本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．侧栏制作本节课，主要设计一下内容页面的侧栏部分，分三个小块。经... 查看详情

响应式开发一招致胜

...样分析设计图、响应式网站设计实践原则第2章如何组织项目目录结构介绍了约定优于配置的思想，常见的项目目录和文件的组织方式，一些基本文件的作用等知识，为编码开始做准备。第3章开始编写HTML代码根据设计图一步一步... 查看详情