HTML5项目实战之旅行社网站——移动端流体布局
2024-05-25 23:51:38
主页面（index.html）：
<!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" alt="">
</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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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>
旅游资讯（information.html）：
<!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><a href="index.html">首页</a></li><li class="active"><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="headline"><img src="img/headline.png" alt=""><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup>
</div><div class="list information"><h2>热门旅游</h2><figure><img src="img/tour1.png" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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>
机票订购（ticket.html）：
<!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><a href="index.html">首页</a></li><li><a href="information.html">资讯</a></li><li class="active"><a href="ticket.html">票务</a></li><li><a href="about.html">关于</a></li></ul></nav>
</header><div id="headline"><img src="img/headline.png" alt=""><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>
公司简介（about.html）：
<!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><a href="index.html">首页</a></li><li><a href="information.html">资讯</a></li><li><a href="ticket.html">票务</a></li><li class="active"><a href="about.html">关于</a></li></ul></nav>
</header><div id="headline"><img src="img/headline.png" alt=""><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>
style.css：
@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;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;}
}
HTML5项目实战之旅行社网站——移动端流体布局相关推荐
- HTML5视频教程，HTML5项目实战，HTML5中文指南，HTML5使用手册
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册. 超过2G 的 HTML5 视频教程免费分享,免费下载! 尚硅谷前端HTML5视频_HTML & CSS 核心基 ...
- 电商项目实战之web网站测试--非业务
Web实战测试 一:网络基础知识:http 3,,Web浏览器发送请求头信息一(1) 1,建立TCP连接 -----(https://www.cnblogs.com/EricaMIN1987_IT/p ...
- php网站开发项目实战,PHP动态网站开发项目实战
任务1 分析网站需求1 1.1 知识准备1 1.1.1 功能结构图1 1.1.2 用例图2 1.2 任务实现5 1.2.1 花公子蜂蜜网站项目功能结构分析5 1.2.2 花公子蜂蜜网站项目用例分析6 ...
- Kotlin之Android项目实战--[玩android网站]App
WanAndroidKt 学习之路:<Kotlin实战><Kotlin官方文档> WanAndroid网站,手机APP,Kotlin版. 感谢<玩Android网站> ...
- 自动化测试项目实战 ——12306火车票网站自动登录工具
还记得前几年春运,12306火车票预订网站经常崩溃无法登录吗. 今天我们就开发一个12306网站自动登录软件. 帮助您轻松订票 通过前两篇博客Fiddler教程和HTTP协议详解,我们了解了Web的原 ...
- 项目实战——物联网应用网站架构说明
文章目录 物联网应用网站架构说明 1. 需求分析 1.1 物联网模块 1.2 用户模块 1.3 设备管理与配置模块 1.4 设备数据可视化模块 2. 架构说明 2.1 通用 2.2 用户模块 2.2 ...
- 【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，接上一篇创建Vue2项目（下）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.创建vue2项目 二.移动端适配 1.安装插件flexible (适配移动端) 2.安装 postcss-pxto ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- web前端项目实战_vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置 二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
- 视频教程-20年Nodejs教程零基础入门到项目实战前端视频教程-Node.js
20年Nodejs教程零基础入门到项目实战前端视频教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服务 ...
最新文章
- ALV打印不显示打印界面的问题
- 计算机系统结构 期末复习
- ASP.NET——基础 12、Request
- 终于过了。。。。。。。。。。。
- python从入门到实践答案第四章_python从入门到实践课后习题第四章
- 图灵奖颁给深度学习三巨头，他们曾是一小撮顽固的“蠢货”
- 8uftp更改上传的网页内容
- 你可以有喜欢和善用的语言,但千万不要和她Bind
- 计算机频繁重启如何解决,电脑总是自动重启怎么回事（电脑经常自动重启的解决办法）...
- 语音识别软件_语音识别 软件_日语语音识别软件 - 云+社区 - 腾讯云
- Firebug 网络监视器使用教程英文
- 支付宝即时到帐接口php,支付宝即时到帐接口
- 语言-汉语-官话：官话
- 名帖59 褚遂良 小楷《千字文》
- java web 实现qq发送邮箱验证码
- 关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
- hive使用适用场景_大数据入门：Hive应用场景
- Yii2框架bootstrap样式理解
- 【VPD】使用Oracle VPD（Virtual Private Database）限制用户获取数据的范围
- Odoo与浪潮合资研发PS Cloud之如何在Odoo中进行搜索引擎优化(5)