前言
声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：
https://www.bilibili.com/video/BV1KN4y1v7jx/?vd_source=5f425e0074a7f92921f53ab87712357b
使用技术：HTML+CSS+JS（静态网页设计）
主要内容：对个人旅游进行管理。
主要内容
1、首页
首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，
或者点击下方的按钮可以手动切换图片。
该页面使用html+css设计结构和样式，将图片img标签设计成排列整齐的卡片，有些还是卡片超链接，鼠标放上去卡片或者卡片上的文字会变色。
代码：
<!-- 导航栏开始 --><div class="nav"><div class="w"><h1><a href="index.html" class="ft-color">Travel 旅游网</a></h1><ul><li><a href="index.html">首页</a></li><li><a href="#">游玩攻略</a><ul class="hidden"><li><a href="strategy1.html">云南攻略</a></li><li><a href="strategy2.html">洛阳攻略</a></li><li><a href="strategy3.html">重庆攻略</a></li><li><a href="strategy4.html">西藏攻略</a></li></ul></li><li><a href="questions.html">问答</a></li><li><a href="ticket.html">机票火车票</a></li><li><a href="destination.html">目的地</a></li><li><a href="user1.html">登录</a></li><li><a href="user2.html">注册</a></li></ul></div></div>
2、游玩攻略
该页面使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。
代码：
<div class="main w1 clearfix"><div class="m-l"><div class="user"><img src="images/user.jpg" alt=""><a href="#">瑶瑶</a><span>LV. 88</span></div><h2>打算去云南旅游，怎么安排才划算又方便？</h2><div class="nr"><p>我们刚从云南游玩回来，我们选择的是新型模式游玩云南。全程6天5晚、景点门票、交通、司机、当地导游费、吃饭等方面性价比各方面都很高。 这次旅行遇到了一个非常专业的云南当地旅行向导笑笑，全程为我们规划行程，我自己完全没操一点心，整个人都沉 浸在大美云南的景色里，回来跟朋友聊起来才知道真的避了很多坑啊哈哈。 </p><p>不留遗憾的是:昆明滇池、大理古城、洋人街、崇圣寺三塔、洱海、双廊、南诏风情岛、丽江古城、四方街、束河古镇、蓝月谷、白水河等出名的景点全都走过了！</p><img src="images/gl1.jpg" alt=""><p class="tac">【大理】</p><img src="images/gl2.jpg" alt=""><p class="tac">【玉龙雪山】</p><img src="images/gl3.jpg" alt=""><p class="tac">【洱海】</p><p>之前也考虑过自己玩，但没时间做那么细的功课再说云南景点太分散，高原地区山路多想想就头疼，听好几个去过的朋友说云南第一次去99%会迷路，没那个体力又想玩的舒心，没有当地人带你玩根本行不通。 这次真心 感谢云南向导笑笑 的热情服务及周到安排，想要玩得省心省钱的朋友，为了你云南之旅的最佳体验.最重要的是本地人对云南特别熟，没带我们走弯路，全程没有强制购物也没有强制消费，非常热情，有问必答，专业的事交给专业的人做，省心多了 ！！</p><img src="images/gl4.jpg" alt=""><p class="tac">【丽江】</p><p>去之前一直担心云南的酒店会不会很差（因为在电视上看新闻报道旅游团在云南吃不好住不好的），结果给我的是超惊喜，好不好！住宿统一安排地段繁华有特色的酒店（我们蜜月游还给我们制造了小惊喜喔，嘻嘻！！）可以这么说，算不上超级豪华但是很温馨舒适，这个真的一点都不夸张！大家可以看看我拍的酒店照片 ...没错，酒店也是笑笑向导一手安排的。</p><img src="images/gl5.jpg" alt=""></div></div>
3、机票火车票
该页面使用了form表单技术，可以填写并且提交文字信息，密码会被****字符代替，不会泄露密码，其他的名字则直接用明文的input标签。
代码：
<h2>订机票/火车票</h2><div class="m-b"><div class="mb-l"><p>快捷订票</p><div class="city"><div class="c1"><span>出发城市</span><input type="text" name="" id="" placeholder="中文"></div><div class="c2"><span>到达城市</span><input type="text" name="" id="" placeholder="中文"></div><div class="c3"><span>到达城市</span><input type="date" name="" id="" ></div><div class="c4"><span>到达城市</span><input type="date" name="" id=""></div><button class="iconfont"> 搜索</button></div></div><img src="images/ticket1.jpg" alt="" class="mb-r"></div>
总结
想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1KN4y1v7jx/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。
