静态网页设计——旅游网（HTML+CSS+JavaScript）

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：
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">&#xe60b; 搜索</button>
                  </div>
              </div>
              <img src="images/ticket1.jpg" alt="" class="mb-r">
         </div>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1KN4y1v7jx/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。