HTML+CSS+JavaScript实现旅游网站官网（已完成）_Jacky的笔记_html旅游网页制作代码

网络 02-07 5864

想直接看效果点这里

2021.6.14 很多人问源代码和图片资源 https://gitee.com/JackySei/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>  <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="images/vid-1.mp4"></span> <span class="vid-btn" data-src="./images/vid-2.mp4"></span> <span class="vid-btn" data-src="images/vid-3.mp4"></span> <span class="vid-btn" data-src="images/vid-4.mp4"></span> <span class="vid-btn" data-src="images/vid-5.mp4"></span> </div> <div class="video-container"> <video src="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; }

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="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="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="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="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="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="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="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="images/g-1.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-2.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-3.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-4.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-5.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-6.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-7.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="images/g-8.jpg" alt=""> <div class="content"> <h3>美丽景色</h3> <p>这是你梦中向往的地方</p> <a href="#" class="btn">查看更多</a> </div> </div> <div class="box"> <img src="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="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="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="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="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="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="images/1.jpg" alt=""></div> <div class="swiper-slide"><img src="images/2.jpg" alt=""></div> <div class="swiper-slide"><img src="images/3.jpg" alt=""></div> <div class="swiper-slide"><img src="images/4.jpg" alt=""></div> <div class="swiper-slide"><img src="images/5.jpg" alt=""></div> <div class="swiper-slide"><img src="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> JackySei </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

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; }