HTML+CSS+JavaScript实现旅游网站官网（已完成）

想直接看效果点这里

2021.6.14
很多人问源代码和图片资源
https://gitee.com//travel-website.git

如果图标加载不出来可采用Element的图标库，在gitee上的代码是使用的Element组件

首页以及搜索与登录功能
预定页面和套餐页面
服务和相册页面
评价和联系我们页面，完善底部
适配多端设备

2021.6.5

首页

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旅游网</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body><!-- 头部 --><header><a href="#" class="logo"><span>J</span>acky</a><nav class="navbar"><a href="#home">首页</a><a href="#book">预定</a><a href="#packages">套餐</a><a href="#services">服务</a><a href="#gallery">相册</a><a href="#review">评价</a><a href="#contact">联系我们</a></nav><!-- 图标 --><div class="icons"><i class="fas fa-search" id="search-btn"></i><i class="fas fa-user" id="login-btn"></i></div><!-- 搜索框 --><form action="" class="search-bar-container"><input type="search" id="search-bar" placeholder="search here..."><label for="search-bar" class="fas fa-search"></label></form></header><!-- 登录表单 --><div class="login-form-container"><i class="fas fa-times" id="form-close"></i><form action=""><h3>login</h3><input type="email" class="box" placeholder="enter your email"><input type="password" class="box" placeholder="enter your password"><input type="submit" value="login now" class="btn"><input type="checkbox" id="remember"><label for="remember">remember me</label><p>forget password? <a href="#">click here</a></p><p>don't have and account? <a href="#">register now</a></p></form></div><!-- 首页视频banner区 --><section class="home" id="home"><div class="content"><h3>旅游是一种信仰</h3><p>和我们一起去远方,寻找诗和梦想</p><a href="#" class="btn">查看更多</a></div><div class="controls"><span class="vid-btn active" data-src="data:images/vid-1.mp4"></span><span class="vid-btn" data-src="./images/vid-2.mp4"></span><span class="vid-btn" data-src="data:images/vid-3.mp4"></span><span class="vid-btn" data-src="data:images/vid-4.mp4"></span><span class="vid-btn" data-src="data:images/vid-5.mp4"></span></div><div class="video-container"><video src="data:images/vid-1.mp4" id="video-slider" loop autoplay muted></video></div></section><script src="./script.js"></script><script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>

css

*{margin:0;padding:0;box-sizing: border-box;text-transform: capitalize;outline: none; border:none;text-decoration: none;transition: all .2s linear;}/* 导航栏 */header{position: fixed;top:0; left: 0; right:0;background:#333;z-index: 1000;display: flex;align-items: center;justify-content: space-between;padding:1rem 9%;}header .logo span{color: #ffa500;}header .logo{font-size: 1.5rem;font-weight: bolder;color:#fff;text-transform: uppercase;}header .navbar a{color:#fff;font-size: 1rem;font-weight: bold;margin:0 .8rem;}header .navbar a:hover{color:#ffa500;}header .icons i{font-size: 1.2rem;color:#fff;cursor: pointer;margin-right: 1rem;}header .icons i:hover{color:#ffa500;}/* 搜索框 */header .search-bar-container{position: absolute;top:-150%; left: 0; right:0;padding: 0.5em 1rem;background:#333;border-top: .1rem solid rgba(255,255,255,.2);display: flex;align-items: center;z-index: 1001;}header .search-bar-container.active{top:100%;}header .search-bar-container #search-bar{width:100%;padding:.5rem;text-transform: none;color:#333;font-size: 1rem;}header .search-bar-container label{color:#fff;cursor: pointer;font-size: 1rem;margin-left: 1rem;}header .search-bar-container label:hover{color:#ffa500;} /* 登录表单 */.login-form-container{position: fixed;top:-120%; left: 0;z-index: 10000;min-height: 100vh;width:100%;background:rgba(0,0,0,.7);display: flex;align-items: center;justify-content: center;}.login-form-container.active{top:0;}.login-form-container form{margin:2rem;padding:1.5rem 2rem;border-radius: .5rem;background:#fff;width:30rem;}.login-form-container form h3{font-size: 2rem;color:#444;text-transform: uppercase;text-align: center;padding:1rem 0;}.login-form-container form .box{width:100%;padding:1rem;font-size: 1.5rem;color:#333;margin:.6rem 0;border:.1rem solid rgba(0,0,0,.3);text-transform: none;}.login-form-container form .box:focus{border-color: #ffa500;}.login-form-container form #remember{margin-top: 1.5rem;}.login-form-container form label{font-size: 1.5rem;}.login-form-container form .btn{display: block;width:100%;}.login-form-container form p{padding:.5rem 0;font-size: 1.0rem;color:#666;}.login-form-container form p a{color:#ffa500;}.login-form-container form p a:hover{color:#333;text-decoration: underline;}.login-form-container #form-close{position: absolute;top:2rem; right:3rem;font-size: 4rem;color:#fff;cursor: pointer;}.btn{display: inline-block;margin-top: 1rem;background:#ffa500;color:#fff;padding:.8rem 3rem;border:.2rem solid #ffa500;cursor: pointer;font-size: 1.5rem;}.btn:hover{background:rgba(255, 165, 0,.2);color:#ffa500;}/* 主页的视频播放区 */.home{min-height: 100vh;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;z-index: 0;}.home .content{text-align: center;}.home .content h3{font-size: 2rem;color:#fff;text-transform: uppercase;text-shadow: 0 .3rem .5rem rgba(0,0,0,.1);}.home .content p{font-size: 2rem;color:#fff;padding:.5rem 0;}.home .video-container video{position: absolute;top:0; left: 0;z-index: -1;height: 100%;width:100%;object-fit: cover;}.home .controls{padding:0.5rem;border-radius: 4rem;background:rgba(0,0,0,.7);position: relative;top:10rem;}.home .controls .vid-btn{height:2rem;width:2rem;display: inline-block;border-radius: 50%;background:#fff;cursor: pointer;margin:0 .5rem;}.home .controls .vid-btn.active{background:#ffa500;}

let searchBtn = document.querySelector('#search-btn');
let searchBar = document.querySelector('.search-bar-container');
let formBtn = document.querySelector('#login-btn');
let loginForm = document.querySelector('.login-form-container');
let formClose = document.querySelector('#form-close');
let videoBtn = document.querySelectorAll('.vid-btn');window.onscroll = () =>{searchBtn.classList.remove('fa-times');searchBar.classList.remove('active');loginForm.classList.remove('active');
}searchBtn.addEventListener('click', () =>{searchBtn.classList.toggle('fa-times');searchBar.classList.toggle('active');
});formBtn.addEventListener('click', () =>{loginForm.classList.add('active');
});formClose.addEventListener('click', () =>{loginForm.classList.remove('active');
});videoBtn.forEach(btn =>{btn.addEventListener('click', ()=>{document.querySelector('.controls .active').classList.remove('active');btn.classList.add('active');let src = btn.getAttribute('data-src');document.querySelector('#video-slider').src = src;});
});

2021.6.6

新增预定页面和套餐页面

    <!-- 预订部分 --><section class="book" id="book"><h1 class="heading"><span>b</span><span>o</span><span>o</span><span>k</span><span class="space"></span><span>n</span><span>o</span><span>w</span></h1><div class="row"><div class="image"><img src="data:images/book-img.svg" alt=""></div><form action=""><div class="inputBox"><h3>where to</h3><input type="text" placeholder="去哪里"></div><div class="inputBox"><h3>how many</h3><input type="number" placeholder="多少人用行"></div><div class="inputBox"><h3>多久到</h3><input type="date"></div><div class="inputBox"><h3>多久离开</h3><input type="date"></div><input type="submit" class="btn" value="立即 预定"></form></div></section><!-- 套餐部分 --><section class="packages" id="packages"><h1 class="heading"><span>p</span><span>a</span><span>c</span><span>k</span><span>a</span><span>g</span><span>e</span><span>s</span></h1><div class="box-container"><div class="box"><img src="data:images/p-1.jpg" alt=""><div class="content"><h3> <i class="fas fa-map-marker-alt"></i> 成都 </h3><p>和我在成都的街头走一走。</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div><div class="price"> $90.00 <span>$120.00</span> </div><a href="#" class="btn">立即 预订</a></div></div><div class="box"><img src="data:images/p-2.jpg" alt=""><div class="content"><h3> <i class="fas fa-map-marker-alt"></i> 上海 </h3><p>这里有你梦想中的迪士尼。</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div><div class="price"> $90.00 <span>$120.00</span> </div><a href="#" class="btn">立即 预订</a></div></div><div class="box"><img src="data:images/p-3.jpg" alt=""><div class="content"><h3> <i class="fas fa-map-marker-alt"></i> 广州 </h3><p>两千多年沉淀，打磨出中国独树一帜的海阔天空之城。</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div><div class="price"> $90.00 <span>$120.00</span> </div><a href="#" class="btn">立即 预订</a></div></div><div class="box"><img src="data:images/p-4.jpg" alt=""><div class="content"><h3> <i class="fas fa-map-marker-alt"></i> 深圳 </h3><p>有钱人的天堂.创业者向往的城市。</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div><div class="price"> $90.00 <span>$120.00</span> </div><a href="#" class="btn">立即 预订</a></div></div><div class="box"><img src="data:images/p-5.jpg" alt=""><div class="content"><h3> <i class="fas fa-map-marker-alt"></i> 北京 </h3><p>北京你爱来不来。</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div><div class="price"> $90.00 <span>$120.00</span> </div><a href="#" class="btn">立即 预订</a></div></div><div class="box"><img src="data:images/p-6.jpg" alt=""><div class="content"><h3> <i class="fas fa-map-marker-alt"></i> 武汉 </h3><p style="font-size: 0.75rem;">武汉的樱花有如我和你初见时的阳光只是多了一些忧愁。</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div><div class="price"> $90.00 <span>$120.00</span> </div><a href="#" class="btn">立即 预订</a></div></div></div></section><script src="./script.js"></script>
</body>
</html>

css

      /* 复用的标题样式 */.heading{text-align: center;padding:2.5rem 0}.heading span{font-size: 2.5rem;background:rgba(255, 165, 0,.2);color:#ffa500;border-radius: .5rem;padding:.2rem 1rem;}.heading span.space{background:none;}section{padding:2rem 9%;}/* 预定部分 */.book .row{display: flex;flex-wrap: wrap;gap:1rem;align-items: center;}.book .row .image{flex-grow: 1;flex-basis: 15rem;}.book .row .image img{width:100%;}.book .row form{flex-grow: 1;flex-basis: 20rem;padding:.5rem;box-shadow: 0 1rem 2rem rgba(0,0,0,.1);border-radius: .5rem;}.book .row form .inputBox{padding:.5rem 0;}.book .row form .inputBox input{width:100%;padding:.5rem;border:.1rem solid rgba(0,0,0,.1);font-size: 1rem;color:#333;text-transform: none;}.book .row form .inputBox h3{font-size: 1rem;padding:.5rem 0;color:#666;}/* 套餐部分 */.packages .box-container{display: flex;flex-wrap: wrap;gap:1rem;}.packages .box-container .box{flex:1 1 25rem;border-radius: .5rem;box-shadow: 0 1rem 2rem rgba(0,0,0,.1);}.packages .box-container .box img{height: 15rem;width:100%;background-size: contain;}.packages .box-container .box .content{padding:0.5rem;}.packages .box-container .box .content h3{font-size:2rem;color:#333;}.packages .box-container .box .content h3 i{color:#ffa500;}.packages .box-container .box .content p{font-size:1rem;color:#666;padding:0.5rem 0;}.packages .box-container .box .content .stars i{font-size:1.5rem;color:#ffa500;}.packages .box-container .box .content .price{font-size: 1.5rem;color:#333;padding-top: 0.5rem;}.packages .box-container .box .content .price span{color:#666;font-size: 1rem;text-decoration: line-through;}

2021.6.7

新增服务和相册页面

<!-- 服务部分 -->
<section class="services" id="services"><h1 class="heading"><span>s</span><span>e</span><span>r</span><span>v</span><span>i</span><span>c</span><span>e</span><span>s</span></h1><div class="box-container"><div class="box"><i class="fas fa-hotel"></i><h3>affordable hotels</h3><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div><div class="box"><i class="fas fa-utensils"></i><h3>food and drinks</h3><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div><div class="box"><i class="fas fa-bullhorn"></i><h3>safty guide</h3><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div><div class="box"><i class="fas fa-globe-asia"></i><h3>around the world</h3><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div><div class="box"><i class="fas fa-plane"></i><h3>fastest travel</h3><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div><div class="box"><i class="fas fa-hiking"></i><h3>adventures</h3><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div></div>
</section>
<!-- 相册部分 --><section class="gallery" id="gallery"><h1 class="heading"><span>g</span><span>a</span><span>l</span><span>l</span><span>e</span><span>r</span><span>y</span></h1><div class="box-container"><div class="box"><img src="data:images/g-1.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-2.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-3.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-4.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-5.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-6.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-7.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-8.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div><div class="box"><img src="data:images/g-9.jpg" alt=""><div class="content"><h3>美丽景色</h3><p>这是你梦中向往的地方</p><a href="#" class="btn">查看 更多</a></div></div></div></section>

css

      /* 服务部分 */.services .box-container{display: flex;flex-wrap: wrap;gap:1rem;}.services .box-container .box{flex: 1 1 20rem;border-radius: .5rem;padding: 1rem;text-align: center;}.services .box-container .box i{padding:0.5rem;font-size: 2.5rem;color:#ffa500;}.services .box-container .box h3{font-size: 1.5rem;color:#333;}.services .box-container .box p{font-size: 1rem;color:#666;padding:0.5rem 0;}.services .box-container .box:hover{box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);}/* 相册部分 */.gallery .box-container{display: flex;flex-wrap: wrap;gap:1rem;}.gallery .box-container .box{overflow: hidden;box-shadow: 0 1rem 2rem rgba(0,0,0,.1);border:1rem solid #fff;border-radius: .5rem;flex:1 1 20rem;height: 15rem;position: relative;}.gallery .box-container .box img{height: 100%;width:100%;object-fit: cover;}.gallery .box-container .box .content{position: absolute;top:-100%; left:0;height: 100%;width:100%;text-align: center;background:rgba(0,0,0,.7);padding:1rem;padding-top: 2.5rem;}.gallery .box-container .box:hover .content{top:0;}.gallery .box-container .box .content h3{font-size: 1.5rem;color:#ffa500;}.gallery .box-container .box .content p{font-size: 1rem;color:#eee;padding:.5rem 0;}

2021.6.8

新增评价banner，联系我们部分，完善底部

<!-- 评价部分 -->
<section class="review" id="review"><h1 class="heading"><span>r</span><span>e</span><span>v</span><span>i</span><span>e</span><span>w</span></h1><div class="swiper-container review-slider"><div class="swiper-wrapper"><div class="swiper-slide"><div class="box"><img src="data:images/pic1.png" alt=""><h3>小黑</h3><p>xxxxxxxxxx</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></div></div><div class="swiper-slide"><div class="box"><img src="data:images/pic2.png" alt=""><h3>小白</h3><p>xxxxxxxxxxxx</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></div></div><div class="swiper-slide"><div class="box"><img src="data:images/pic3.png" alt=""><h3>小红</h3><p>xxxxxxxxxxxx</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></div></div><div class="swiper-slide"><div class="box"><img src="data:images/pic4.png" alt=""><h3>小黄</h3><p>xxxxxxxxxxxxx</p><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></div></div></div></div>
</section>
<!-- 联系我们 -->
<section class="contact" id="contact"><h1 class="heading"><span>c</span><span>o</span><span>n</span><span>t</span><span>a</span><span>c</span><span>t</span></h1><div class="row"><div class="image"><img src="data:images/contact-img.svg" alt=""></div><form action=""><div class="inputBox"><input type="text" placeholder="您的姓名"><input type="email" placeholder="您的邮箱"></div><div class="inputBox"><input type="number" placeholder="您的电话"><input type="text" placeholder="反馈主题"></div><textarea placeholder="您反馈的内容" name="" id="" cols="30" rows="10"></textarea><input type="submit" class="btn" value="发送给我们"></form></div></section><!-- 品牌赞助 -->
<section class="brand-container"><div class="swiper-container brand-slider"><div class="swiper-wrapper"><div class="swiper-slide"><img src="data:images/1.jpg" alt=""></div><div class="swiper-slide"><img src="data:images/2.jpg" alt=""></div><div class="swiper-slide"><img src="data:images/3.jpg" alt=""></div><div class="swiper-slide"><img src="data:images/4.jpg" alt=""></div><div class="swiper-slide"><img src="data:images/5.jpg" alt=""></div><div class="swiper-slide"><img src="data:images/6.jpg" alt=""></div></div></div></section><!-- 底部 --><section class="footer"><div class="box-container"><div class="box"><h3>关于我们</h3><p>xxxxxx</p></div><div class="box"><h3>分支机构位置</h3><a href="#">成都</a><a href="#">北京</a><a href="#">上海</a><a href="#">深圳</a></div><div class="box"><h3>快速链接</h3><a href="#home">home</a><a href="#book">book</a><a href="#packages">packages</a><a href="#services">services</a><a href="#gallery">gallery</a><a href="#review">review</a><a href="#contact">contact</a></div><div class="box"><h3>关于我们</h3><a href="#">weibo</a><a href="#">qq</a><a href="#">twitter</a><a href="#">wechat</a></div></div><h1 class="credit"> created by <span>  </span> | all rights reserved! </h1></section>/* 联系我们 */.contact .row{display: flex;flex-wrap: wrap;gap:1rem;align-items: center;}.contact .row .image{flex:1 1 25rem;}.contact .row .image img{width:100%;}.contact .row form{flex:1 1 25rem;padding:1rem;box-shadow: 0 1rem 2rem rgba(0,0,0,.1);border-radius: .5rem;}.contact .row form .inputBox{display: flex;flex-wrap: wrap;justify-content: space-between;}.contact .row form .inputBox input, .contact .row form textarea{width:49%;margin:1rem 0;padding:1rem;font-size: 1rem;font-weight: bold;color:#333;background:#f7f7f7;text-transform: none;}.contact .row form textarea{height: 8rem;resize: none;width:100%;}/* 评价部分 */.review .review-slider{padding-bottom: 1rem;}.review .box{padding:1rem;text-align: center;box-shadow: 0 1rem 2rem rgba(0,0,0,.1);border-radius: .5rem;}.review .box img{height:7rem;width:7rem;border-radius: 50%;object-fit: cover;margin-bottom: 1rem;}.review .box h3{color:#333;font-size: 1.5rem;}.review .box p{color:#666;font-size: 1rem;padding:1rem 0;}.review .box .stars i{color:#ffa500;font-size: 1.5rem;}/* 品牌 */.brand-container{text-align: center;}/* 底部 */.footer{background:#333;}.footer .box-container{display: flex;flex-wrap: wrap;gap:1rem;}.footer .box-container .box{padding:1rem 0;flex:1 1 12rem;}.footer .box-container .box h3{font-size: 1.5rem;padding:.5rem 0;color:#fff;}.footer .box-container .box p{font-size: 1.0rem;padding:.5rem 0;color:#eee;}.footer .box-container .box a{display: block;font-size: 1rem;padding:.5rem 0;color:#eee;}.footer .box-container .box a:hover{color:#ffa500;text-decoration: underline;}.footer .credit{text-align: center;padding:1rem 0.5rem;margin-top: 0.5rem;font-size: 1rem;font-weight: normal;color:#fff;border-top: .1rem solid rgba(255,255,255,.2);}.footer .credit span{color:#ffa500;}var swiper1 = new Swiper(".review-slider", {spaceBetween: 10,loop:true,autoplay: {delay: 2500,disableOnInteraction: false,},breakpoints: {640: {slidesPerView: 1,},768: {slidesPerView: 2,},1024: {slidesPerView: 3,},},
});var swiper2 = new Swiper(".brand-slider", {spaceBetween: 20,loop:true,autoplay: {delay: 2500,disableOnInteraction: false,},breakpoints: {450: {slidesPerView: 2,},768: {slidesPerView: 3,},991: {slidesPerView: 4,},1200: {slidesPerView: 5,},},
});

2021.6.8

适配多端设备

尽管大多数情况已经用了flex布局，但有些地方还是不能够适配多端设备，比如说标题，又或者是小标题在调整一定比例后还是会出现不兼容的情况。

然后做了如下修改基本适配了大多数情况
在header中添加menu-bar
html

<div id="menu-bar" class="fas fa-bars"></div>

css

      /* 设配多端 */#menu-bar{color:#fff;border:.1rem solid #fff;border-radius: .5rem;font-size: 1.5rem;padding:.5rem 1rem;cursor: pointer;display: none;}@media (max-width:1200px){html{font-size: 80%;} }@media (max-width:768px){#menu-bar{display: initial;}header .navbar{position: absolute;top: -1000%; right:0; left: 0;background: #333;border-top: .1rem solid rgba(255,255,255,.2);padding:1rem 1.5rem;}header .navbar.active{top: 100%;}header .navbar a{display: block;border-radius: .5rem;padding:1rem;margin:1rem 0;    background:#222;}}@media (max-width:450px){html{font-size: 60%;}.contact .row form .inputBox input{width:100%;}.footer  .box-container .box{flex: 1 1 18rem;padding: 1rem 0;text-align: center;}}

let menu = document.querySelector('#menu-bar');
menu.addEventListener('click', () =>{menu.classList.toggle('fa-times');navbar.classList.toggle('active');
});

最终效果

2021.10.18

偶然看到显示上有个bug修改了一下

.brand-container{width: 100%;overflow: hidden;text-align: center;
}.review{width: 100%;overflow: hidden;
}

HTML+CSS+JavaScript实现旅游网站官网（已完成）相关推荐

HTML旅游网页设计制作 DW旅游网站官网滚动网页 DIV旅游风景介绍网页设计与实现
HTML旅游网页设计制作 DW旅游网站官网滚动网页 DIV旅游风景介绍网页设计与实现...
基于HTML+CSS+JavaScript仿瓜子二手车官网【学生网页设计作业源码】
Web前端大作业——城旅游景点介绍(html css javascript) html旅游网站设计与实现
web前端大作业(基于HTML+CSS+JavaScript仿阴阳师游戏官网首页作业制作)
学生网站模板：南京旅游网站设计——六朝古都-南京旅游(10页) HTML+CSS+JavaScript 出游旅游主题度假酒店计划出行网站设计
HTML5期末大作业:南京旅游网站设计--六朝古都-南京旅游(10页) HTML+CSS+JavaScript 出游旅游主题度假酒店计划出行网站设计常见网页设计作业题材有个人. 美食. 公司. ...
HTML5响应式手机模板：【超炫购物模板】——仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板
HTML5响应式手机模板:电商网站设计--仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板手机网站模板电商网站手机模板响应式手机网站 html5手机网站模板 ...
HTML5期末大作业：英雄联盟网站设计——英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业
HTML5期末大作业:英雄联盟网站设计--英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商 ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...