正文

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

author  author  2022-08-05  346

关键词：

第32 章项目实战-移动端流体布局[6]
学习要点：
1.旅游资讯
2.机票预定

本章主要开始如果通过第一个PC 端项目进行重构，设计成移动端可访问的页面，这个
项目采用的是流体布局。
一．旅游资讯
这个如果做成移动端，那么一切从简，否则缩小时就无法容纳太多的文字。
//html，布局和PC 端差不多
<figure>
<img src="img/tour1.png" >
<figcaption>
<hgroup>
<h2 class="title">曼谷-芭提雅6 日游</h2>
<h3 class="small_title">包团特惠，超丰富景点，升级1 晚国五，
无自费，赠送600 元...</h3>
</hgroup>
<div class="price">¥<strong>2864</strong></div>
</figcaption>
</figure>
注意：两边各占50%的浮动后，需要清理浮动，这里直接通过figure 本身清理即可。
//CSS
.information figure:after {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
.information figure {
position: relative;
margin: .15rem 0 0 0;
}
.information figure img {
width: 50%;
float: left;
}
.information figcaption {
width: 48%;
float: right;
}
.information .title {
border: none;
padding: 0 0 0.05rem 0;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.information .small_title {
font-weight: normal;
padding: 0;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.information .price {
position: absolute;
bottom: 0;
}
.information .price strong {
color: #f60;
font-size: .26rem;
}
三．机票预定
这个栏目和PC 端的html 一致，不需要变化，直接复制过来即可。重点在CSS 配置上。
在表格和列表上基本和PC 端类似，主要用百分比即可。
//css
.ticket .type {
margin: 20px 0 10px 0;
border: none;
}
.ticket .type mark {
color: #fff;
background-color: #458B00;
padding: 0.05rem 0.08rem;
border-radius: 0.04rem;
margin: 0 0.1rem 0 0.16rem;
}
.ticket .form {
font-size: 0.2rem;
border: none;
}
.ticket .form p {
margin: 0.1rem 0;
}
.ticket .form label {
display: block;
margin: 0 0 0.05rem 0;
font-size: .16rem;
}
.ticket .form input {
width: 97%;
border: 0.01rem solid #ccc;
background-color: #fff;
border-radius: 0.04rem;
padding: 0.05rem;
color: #666;
}
.ticket .form .submit {
width: 30%;
border-radius: 0.04rem;
background-color: #f60;
color: #fff;
text-align: center;
border: none;
padding: 0.1rem;
margin: 0 auto;
display: block;
}
.ticket .new {
margin: 0.2rem 0 0 0;
}
.ticket .new ul {
margin: 0.2rem 0 0 0;
}
.ticket .new li {
display: inline-block;
padding: 0.05rem 0.1rem;
}
.ticket .new li:first-child {
padding-left: 0;
}
.ticket .new li:nth-child(2) {
background-color: #458B00;
border-radius: 4px;
color: #fff;
}
.ticket table {
width: 100%;
border-collapse:collapse;
margin: 0.2rem 0 0 0;
border: 0.01rem solid #ddd;
}
.ticket table th {
padding: 0.1rem 0;
border-bottom: 0.01rem solid #ddd;
font-weight: normal;
}
.ticket table td {
padding: 0.1rem 0;
text-align: center;
border-bottom: 0.01rem solid #ddd;
}
.ticket table tr:nth-child(2n) {
background-color: #fafafa;
}
.ticket table tr:hover {
background-color: #eee;
}
.ticket .price {
color: #f60;
}
.ticket .more2 {
text-align: center;
margin: 0 auto;
cursor: pointer;
display: block;
color: #666;
}
.ticket .reserve {
padding: 0.05rem 0.1rem;
display: inline-block;
border-radius: 0.04rem;
background-color: #f60;
color: #fff;
text-align: center;
}
//媒体查询
/*媒体查询，大于480px 小于640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2,.information .price strong {
font-size: .26rem;
}
#tour h3, #footer, #tour figcaption, #tour .info, .list,.ticket .form
label {
font-size: .16rem;
}
#headline h2 {
font-size: .22rem;
}
#headline h3 {
font-size: .14rem;
}
.list h2 {
font-size: .2rem;
}
}
/*媒体查询，小于480px*/
@media (max-width: 480px) {
#tour h2,.information .price strong {
font-size: .20rem;
}
#tour h3, #tour figcaption, #tour .info, .list,.ticket .form label
{
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
#headline h2 {
font-size: .18rem;
}
#headline h3 {
font-size: .12rem;
}
.list h2 {
font-size: .17rem;
}
.min {
display: none;
}
}

代码：

<!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>

<div id="headline">
<img src="img/headline.png" >
<hgroup>
<h2>公司简介</h2>
<h3>公司的发展历程、获得荣誉以及联系方式</h3>
</hgroup>
</div>

<div class="list about">
<section>
<h2>关于我们</h2>
<p>瓢城旅行社旅游网创立于2006年10月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。</p>
<p>目前，瓢城旅行社旅游网提供8万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400万人次出游。</p>
<p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。</p>
</section>
<section>
<h2>联系我们</h2>
<address>
<ul>
<li>瓢城旅行社股份有限公司</li>
<li>地址：江苏省盐城市亭湖区大庆中路1234号</li>
<li>邮编：1234567</li>
<li>电话：010-88888888</li>
<li>传真：010-88666666</li>
</ul>
</address>
</section>
</div>

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

</body>
</html>

<div id="tour">
<hgroup>
<h2>热门旅游</h2>
<h3>最新的各种热门旅游资讯的推荐！</h3>
</hgroup>
<div class="container">
<figure>
<img src="img/tour1.png" >
<figcaption>
<h4><曼谷-芭提雅6 日游></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><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></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><海南双飞5 日游></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><富山-大阪-东京8 日游></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><法瑞意德12 日游></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><巴厘岛6 日半自助游></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><塞舌尔迪拜9 日自助游></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><花样姐姐土耳其9 日或10 日游></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>

<div id="headline">
<img src="img/headline.png" >
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>

<div class="list information">
<h2>热门旅游</h2>
<figure>
<img src="img/tour1.png" >
<figcaption>
<hgroup>
<h2 class="title">曼谷-芭提雅6日游</h2>
<h3 class="small_title">包团特惠，超丰富景点，升级1 晚国五，无自费，赠送600 元</h3>
</hgroup>
<div class="price">¥<strong>2864</strong></div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.png" >
<figcaption>
<hgroup>
<h2 class="title">马尔代夫6日自助游</h2>
<h3 class="small_title">双鱼岛Olhuveli4晚，上海出发，机+酒包含:早晚餐+快艇...</h3>
</hgroup>
<div class="price">¥<strong>8039</strong></div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.png" >
<figcaption>
<hgroup>
<h2 class="title">海南双飞5日游</h2>
<h3 class="small_title">含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”...</h3>
</hgroup>
<div class="price">¥<strong>2709</strong></div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.png" >
<figcaption>
<hgroup>
<h2 class="title">富山-大阪-东京8日游</h2>
<h3 class="small_title">暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物...</h3>
</hgroup>
<div class="price">¥<strong>9499</strong></div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.png" >
<figcaption>
<hgroup>
<h2 class="title">法瑞意德12日游</h2>
<h3 class="small_title">4至5星，金色列车，少女峰，部分THE MALL...</h3>
</hgroup>
<div class="price">¥<strong>9199</strong></div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.png" >
<figcaption>
<hgroup>
<h2 class="title">巴厘岛6日半自助游</h2>
<h3 class="small_title">蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩...</h3>
</hgroup>
<div class="price">¥<strong>6488</strong></div>
</figcaption>
<br style="clear:both">
</figure>
<figure>
<img src="img/tour7.png" >
<figcaption>
<hgroup>
<h2 class="title">塞舌尔迪拜9日自助游</h2>
<h3 class="small_title">一游两国，4晚塞舌尔，2晚迪拜，香港EK往返...</h3>
</hgroup>
<div class="price">¥<strong>9669</strong></div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.png" >
<figcaption>
<hgroup>
<h2 class="title">花样姐姐土耳其9日游</h2>
<h3 class="small_title">最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾...</h3>
</hgroup>
<div class="price">¥<strong>9999</strong></div>
</figcaption>
</figure>
</div>

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

</body>
</html>

<div id="headline">
<img src="img/headline.png" >
<hgroup>
<h2>票务订购</h2>
<h3>各种飞机票、火车票、汽车票和轮渡票的订购服务</h3>
</hgroup>
</div>

<div class="list ticket">
<form action="###">
<h2>机票预定</h2>
<fieldset class="type">
<p>航程类型 <mark>单程</mark> 往返</p>
</fieldset>
<fieldset class="form">
<p>
<label for="from_city">出发城市</label>
<input type="text" name="from_city" id="from_city" placeholder="城市名">
</p>
<p>
<label for="to_city">返回城市</label>
<input type="text" name="to_city" id="to_city" placeholder="城市名">
</p>
</fieldset>
<fieldset class="form">
<p>
<label for="from_date">出发时间</label>
<input type="text" name="from_date" id="from_date" placeholder="时间/日期">
</p>
<p>
<label for="to_date">返回时间</label>
<input type="text" name="to_date" id="to_date" placeholder="时间/日期">
</p>
</fieldset>
<fieldset class="form">
<p>
<button type="submit" class="submit">订票</button>
</p>
</fieldset>
</form>
<div class="new">
<h2>最新机票</h2>
<ul>
<li>热门城市：</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>重庆</li>
<li>成都</li>
<li>杭州</li>
<li>南京</li>
</ul>
<table>
<thead>
<tr>
<th>路线</th>
<th>日期</th>
<th>价格</th>
<th class="min">税费</th>
<th class="min">餐食</th>
<th>航班</th>
<th>预定</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td class="price">¥745</td>
<td class="min">¥50</td>
<td class="min">有</td>
<td>春秋航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-上海</td>
<td>10-15</td>
<td class="price">¥479</td>
<td class="min">¥45</td>
<td class="min">无</td>
<td>南方航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-深圳</td>
<td>10-15</td>
<td class="price">¥561</td>
<td class="min">¥52</td>
<td class="min">有</td>
<td>西部航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-杭州</td>
<td>10-15</td>
<td class="price">¥378</td>
<td class="min">¥36</td>
<td class="min">无</td>
<td>天津航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-广州</td>
<td>10-15</td>
<td class="price">¥612</td>
<td class="min">¥44</td>
<td class="min">有</td>
<td>首都航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-重庆</td>
<td>10-15</td>
<td class="price">¥428</td>
<td class="min">¥62</td>
<td class="min">有</td>
<td>东方航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-昆明</td>
<td>10-15</td>
<td class="price">¥509</td>
<td class="min">¥35</td>
<td class="min">无</td>
<td>厦门航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-厦门</td>
<td>10-15</td>
<td class="price">¥893</td>
<td class="min">¥73</td>
<td class="min">有</td>
<td>深圳航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-长沙</td>
<td>10-15</td>
<td class="price">¥663</td>
<td class="min">¥46</td>
<td class="min">无</td>
<td>四川航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
</tbody>
<tfoot>
<td colspan="7"><a href="###" class="more2">加载更多航班...</a></td>
</tfoot>
</table>
</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, "5B8B4F53", 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;
position: fixed;
top: 0;
z-index: 9999;
}
#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;
padding: .45rem 0 0 0;
}
#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;
}
#headline {
max-width: 6.4rem;
margin: 0 auto;
padding: .45rem 0 0 0;
position: relative;
}
#headline hgroup {
position: absolute;
top: 48%;
left: 10%;
color: #eee;
}
#headline h2 {
font-size: .22rem;
}
#headline h3 {
font-size: .14rem;
}
.list {
font-size: .16rem;
color: #666;
max-width: 6.4rem;
margin: .15rem auto;
padding: 0 .1rem;
}
.list h2 {
font-size: .2rem;
border-bottom: .01rem dashed #999;
padding: 0 0 .15rem 0;
}
.about p {
line-height: 2;
margin: .2rem 0;
}
.about address {
font-style: normal;
line-height: 1.6;
margin: .2rem 0;
}
.information figure:after {
content: ‘.‘;
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.information figure {
margin: .15rem 0 0 0;
position: relative;
}
.information figure img {
width: 50%;
float: left;
}
.information figure figcaption {
width: 48%;
float: right;
}
.information .title {
border: none;
padding: 0 0 .05rem 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.information .small_title {
font-weight: normal;
padding: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.information .price {
color: #f60;
position: absolute;
bottom: 0;
}
.information .price strong {
font-size: .26rem;
}
.ticket .type {
margin: .2rem 0 .2rem 0;
border: none;
}
.ticket .type mark {
color: #fff;
background-color: #458B00;
padding: .05rem .08rem;
border-radius: .04rem;
margin: 0 .1rem 0 .16rem;
}
.ticket .form {
border: none;
}
.ticket .form p {
margin: .1rem 0;
}
.ticket .form label {
display: block;
margin: 0 0 .05rem 0;
}
.ticket .form input {
width: 97%;
height: .2rem;
border: 1px solid #ccc;
background-color: #fff;
border-radius: .04rem;
padding: .05rem;
color: #666;
}
.ticket .submit {
width: 30%;
border-radius: .04rem;
background-color: #f60;
color: #fff;
text-align: center;
border: none;
cursor: pointer;
padding: .1rem;
margin: 0 auto;
display: block;
}
.ticket .new {
margin: .2rem 0 0 0;
}
.ticket .new ul {
margin: 20px 0 0 0;
}
.ticket .new li {
display: inline-block;
padding: 5px 10px;
}
.ticket .new li:first-child {
padding-left: 0;
}
.ticket .new li:nth-child(2) {
background-color: #458B00;
border-radius: 4px;
color: #fff;
}
.ticket table {
width: 100%;
border-collapse:collapse;
margin: 20px 0 0 0;
border: 1px solid #ddd;
}
.ticket table th {
padding: .15rem 0;
border-bottom: 1px solid #ddd;
font-weight: normal;
}
.ticket table td {
padding: .15rem 0;
text-align: center;
border-bottom: 1px solid #ddd;
}
.ticket table tr:nth-child(2n) {
background-color: #fafafa;
}
.ticket table tr:hover {
background-color: #eee;
}
.ticket .price {
color: #f60;
}
.ticket .more2 {
text-align: center;
margin: 0 auto;
cursor: pointer;
display: block;
color: #666;
}
.ticket .reserve {
border-radius: .04rem;
background-color: #f60;
color: #fff;
text-align: center;
padding: .05rem .08rem;
}

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

/*媒体查询，小于480px*/
@media (max-width: 480px) {
#tour h2,.information .price strong {
font-size: .20rem;
}
#tour h3, #tour figcaption, #tour .info, .list {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
#headline h2 {
font-size: .18rem;
}
#headline h3 {
font-size: .12rem;
}
.list h2 {
font-size: .17rem;
}
.min {
display: none;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javassm开发大众点评后端项目实战教程javassm项目实战教程共9章

第1章课程概览介绍课程目标、开发内容、功能划分、开发顺序，开发所需要的前置知识及环境准备，并且介绍了与课程相关的前后端分离的思想，架构演进过程。第2章开发准备演示前端工程环境搭建以及启动... 查看详情

移动端appui设计入门与实战

...介绍本章为课程导学，帮助同学们初步了解UI设计，介绍实战课程安排，并熟悉产品设计、开发流程，了解如何与其它岗位配合。1-1导学视频1-2产品开发流程第2章产品需求解析本章将针对产品需求进行解析，通过草图、流程图形... 查看详情

web开发需要学习啥？

...件的运用、BootStrap源码分析。能够熟练使用less、sass完成项目开发，深入了解BootStrap。4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。第二阶段：... 查看详情

正文

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javassm开发大众点评后端项目实战教程javassm项目实战教程共9章

移动端appui设计入门与实战

web开发需要学习啥？

web前端需要学啥？