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

第32 章项目实战-移动端流体布局[4]
学习要点：
1.旅游图片部分

本章主要开始如果通过第一个PC 端项目进行重构，设计成移动端可访问的页面，这个
项目采用的是流体布局。
一．旅游图片部分
//HTML 部分
<div class="container">
<figure>
<img src="img/tour1.png" >
<figcaption>
<h4>&lt;曼谷-芭提雅6 日游&gt;</h4>
<p>包团特惠，超丰富景点</p>
<div class="info">
<em class="sat">满意度77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.png" >
<figcaption>
<h4>&lt;马尔代夫双鱼岛Olhuveli4 晚6 日自助游&gt;</h4>
<p>上海出发，机+酒包含:早晚餐+快艇</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.png" >
<figcaption>
<h4>&lt;海南双飞5 日游&gt;</h4>
<p>含盐城接送，全程挂牌四星酒店</p>
<div class="info">
<em class="sat">满意度90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.png" >
<figcaption>
<h4>&lt;富山-大阪-东京8 日游&gt;</h4>
<p>暑期亲子，2 天自由，无导游安排</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.png" >
<figcaption>
<h4>&lt;法瑞意德12 日游&gt;</h4>
<p>4 至5 星，金色列车，少女峰</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.png" >
<figcaption>
<h4>&lt;巴厘岛6 日半自助游&gt;</h4>
<p>蓝梦出海，独栋别墅，悦榕庄下午茶</p>
<div class="info">
<em class="sat">满意度95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.png" >
<figcaption>
<h4>&lt;塞舌尔迪拜9 日自助游&gt;</h4>
<p>一游两国，4 晚塞舌尔，2 晚迪拜</p>
<div class="info">
<em class="sat">满意度100%</em>
<span class="price">¥ <strong>9669</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.png" >
<figcaption>
<h4>&lt;花样姐姐土耳其9 日或10 日游&gt;</h4>
<p>最高立减3000！中餐六菜一汤</p>
<div class="info">
<em class="sat">满意度93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>
//CSS 部分
//去掉边框计算
div,figure,figcaption {
box-sizing: border-box;
}
//样式部分
#tour figure {
width: 50%;
float: left;
background-color: #eee;
margin: 0 0 .05rem 0;
font-size: .16rem;
}
#tour figure img {
padding: .02rem;
vertical-align: middle;
border-radius: .04rem;
}
#tour figcaption {
color: #666;
padding: .02rem .05rem;
}
#tour figcaption h4 {
display: block;
font-weight: normal;
padding: .05px 0;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#tour figcaption p {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#tour .info {
padding: .1rem 0 0 0;
font-size: .16rem;
}
#tour .price {
color: #f60;
}
#tour .price strong {
letter-spacing: 0.01rem;
}
#tour .sat {
color: #999;
font-style: normal;
float: right;
position: relative;
right: .05rem;
}
//媒体查询
/*媒体查询，大于480px 小于640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
#tour h3, #footer, #tour figure, #tour .info {
font-size: .16rem;
}
}
/*媒体查询，小于480px*/
@media (max-width: 480px) {
#tour h2 {
font-size: .20rem;
}
#tour h3, #tour .info,#tour figure {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
}

代码

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

<header id="header">
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="information.html">资讯</a></li>
<li><a href="ticket.html">票务</a></li>
<li><a href="about.html">关于</a></li>
</ul>
</nav>
</header>

<div id="adver">
<img src="img/adver.png" >
</div>

<div id="search">
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>

<div id="tour">
<hgroup>
<h2>热门旅游</h2>
<h3>最新的各种热门旅游资讯的推荐！</h3>
</hgroup>
<div class="container">
<figure>
<img src="img/tour1.png" >
<figcaption>
<h4>&lt;曼谷-芭提雅6 日游&gt;</h4>
<p>包团特惠，超丰富景点</p>
<div class="info">
<em class="sat">满意度 77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.png" >
<figcaption>
<h4>&lt;马尔代夫双鱼岛Olhuveli4 晚6 日自助游&gt;</h4>
<p>上海出发，机+酒包含:早晚餐+快艇</p>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.png" >
<figcaption>
<h4>&lt;海南双飞5 日游&gt;</h4>
<p>含盐城接送，全程挂牌四星酒店</p>
<div class="info">
<em class="sat">满意度90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.png" >
<figcaption>
<h4>&lt;富山-大阪-东京8 日游&gt;</h4>
<p>暑期亲子，2 天自由，无导游安排</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.png" >
<figcaption>
<h4>&lt;法瑞意德12 日游&gt;</h4>
<p>4 至5 星，金色列车，少女峰</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.png" >
<figcaption>
<h4>&lt;巴厘岛6 日半自助游&gt;</h4>
<p>蓝梦出海，独栋别墅，悦榕庄下午茶</p>
<div class="info">
<em class="sat">满意度95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.png" >
<figcaption>
<h4>&lt;塞舌尔迪拜9 日自助游&gt;</h4>
<p>一游两国，4 晚塞舌尔，2 晚迪拜</p>
<div class="info">
<em class="sat">满意度100%</em>
<span class="price">¥ <strong>9669</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.png" >
<figcaption>
<h4>&lt;花样姐姐土耳其9 日或10 日游&gt;</h4>
<p>最高立减3000！中餐六菜一汤</p>
<div class="info">
<em class="sat">满意度93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
</figcaption>
</figure>
<div class="clearfix"></div>
</div>
</div>

<footer id="footer">
<div class="top">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号
</div>
</footer>

</body>
</html>

@charset "utf-8";
html {
font-size: 625%;
}
body,h1,h2,h3,h4,p,ul,ol,form,fieldset,figure {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
font-size: .16rem;
}
ul,ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
div,figure,figcaption {
box-sizing: border-box;
}
.none {
display: none;
}
.clearfix:after {
content: ‘.‘;
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#header {
width: 100%;
height: .45rem;
background-color: #333;
font-size: 0.16rem;
}
#header .link {
height: .45rem;
line-height: .45rem;
color: #eee;
}
#header .link li {
width: 25%;
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: 6.4rem;
margin: 0 auto;
}
#footer {
max-width: 6.4rem;
background-color: #222;
color: #777;
margin: 0 auto;
text-align: center;
padding: .1rem 0;
font-size: .16rem;
}
#footer .top {
padding: 0 0 .05rem 0;
}
#search {
max-width: 6.4rem;
height: .33rem;
margin: 0 auto;
background-color: #ddd;
padding: .03rem 0 0 0;
position: relative;
}
#search .search {
width: 95%;
height: .27rem;
border-radius: .04rem;
border: none;
outline: none;
background-color: #fff;
display: block;
margin: 0 auto;
font-size: .14rem;
padding: 0 .05rem;
}
#search .button {
display: block;
outline: none;
width: .5rem;
height: .27rem;
color: #666;
border: none;
background-color: #eee;
border-top-right-radius: .04rem;
border-bottom-right-radius: .04rem;
font-size: .14rem;
position: absolute;
top: .03rem;
right: 1%;
}
#tour {
max-width: 6.4rem;
margin: .1rem auto 0 auto;
}
#tour h2 {
text-align: center;
color: #666;
font-size: .26rem;
}
#tour h3 {
text-align: center;
color: #666;
font-weight: normal;
font-size: .16rem;
margin: .05rem 0 .1rem 0;
}
#tour figure {
width: 50%;
float: left;
background-color: #eee;
font-size: .16rem;
padding: 0 0 .05rem 0;
}
#tour figure img {
padding: .02rem;
border-radius: .04rem;
}
#tour figcaption {
color: #666;
font-size: .16rem;
padding: .02rem .05rem;
}
#tour h4 {
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tour p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tour .info {
padding: .1rem 0 0 0;
font-size: .16rem;
}
#tour .price {
color: #f60;
}
#tour .price strong {
letter-spacing: .01rem;
}
#tour .sat {
position: relative;
float: right;
right: .05rem;
font-style: normal;
}

/*媒体查询，大于480px小于640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
#tour h3, #footer, #tour figcaption, #tour .info {
font-size: .16rem;
}
}

/*媒体查询，小于480px*/
@media (max-width: 480px) {
#tour h2 {
font-size: .20rem;
}
#tour h3, #tour figcaption, #tour .info {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
}

时间： 2024-10-10 20:50:58

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

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

第32 章项目实战-移动端流体布局[3]学习要点:1.搜索部分2.旅游部分3.媒体查询 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一．搜索部分搜索部分包含三个内容,背景区块.文本框和按钮.//HTML 部分<div id="search"><input type="text" class="search" placeholder="请输入旅游景点或城市"

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

第32 章项目实战-移动端流体布局[6]学习要点:1.旅游资讯2.机票预定 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一．旅游资讯这个如果做成移动端,那么一切从简,否则缩小时就无法容纳太多的文字.//html,布局和PC 端差不多<figure><img src="img/tour1.png" ><figcaption><hgroup><h2 class="titl

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

第32 章项目实战-移动端流体布局[5] 学习要点: 1.导航固顶 2.三个栏目 3.公司简介 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个 项目采用的是流体布局. 一．导航固定 由于移动设备屏幕高度较低,没有滚动条操作的便利性.一般来说,栏目的导航部分总 是固定在移动设备的某一个方位.我们这里将头部的导航永远固定在头部,不会随着页面向 下滑动而更改. //固顶定位 #header { position: fixed; top: 0; z-index: 9999

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

第31 章项目实战-PC 端固定布局[8]学习要点:1.归类合并2.子导航 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．归类合并在前面几节课中,有一部分HTML 代码比较松散,没有统一到一个类别块里.比如:很多的标签超链接没有归类到UL 里,导致一些问题等.//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京

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

第31 章项目实战-PC 端固定布局[7]学习要点:1.侧栏制作2.详细代码 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块.经过思考,侧栏会包含一些图片,而主要部分也会包含图片,那么侧栏放在左边可能会和主栏的图片冲突导致不协调,所以,我们把侧栏更换到右边.//实际上,还去掉了高度,让其自适应#container {width: 1263px;margin: 30px auto

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

第31 章项目实战-PC 端固定布局[3]学习要点:1.搜索区2.插入大图3.搜索框 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．搜索区本节课,我们接着header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下:从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在1280 分辨率.最大在1920 分辨率能保持最佳的观

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

第31 章项目实战-PC 端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号.//底部区域父元素<footer id="footer">...</footer>//底部父元

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

第31 章项目实战-PC 端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下://热门旅游区父元素<div id="tour">...</div>//旅游父元素#tour {width

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

第31 章项目实战-PC 端固定布局[10]学习要点:1.机票预定2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一．机票预定机票预定页面,具体如下:二．代码详解//全部代码<form action="###"><h2>机票预定</h2><div class="type"><p>航程类型<mark>单程</mark>