0
点赞
收藏
分享

微信扫一扫

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

DT_M 2022-02-26 阅读 48
javascripthtmlcss

想直接看效果点这里

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

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

首页

在这里插入图片描述
在这里插入图片描述

（

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

js

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

新增预定页面和套餐页面

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

    <!-- 预订部分 -->
    <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;
      }

新增服务和相册页面

在这里插入图片描述
在这里插入图片描述

<!-- 服务部分 -->
<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;
      }

新增评价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>  </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,
        },
      },
});

适配多端设备

尽管大多数情况已经用了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;
        }
      
      }

js

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

最终效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

.review{
    width: 100%;
    overflow: hidden;
}
举报

相关推荐

html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript

html静态网页web课程与设计web前端期末大作业学生网页作业html系统/运维

基于HTML旅游网站项目的设计与实现——联途旅游网服务平台网站HTML模板HTML+CSS+JavaScript

htmlcssicoHTML5移动开发

HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

旅游网站设计HTML期末大作业HTMLjavascript期末作业HTML作业学生网站设计作业源码HTMLHtml/CSS前端开发

HTML静态网页作业——澳门英文旅游网站设计与实现HTML+CSS+JavaScript

html静态页面web课程与设计html期末大作业学生我那工业作业期末网页作业Java编程语言

Web前端大作业——城旅游景点介绍(HTML+CSS+JavaScript) html旅游网站设计与实现

web大学生期末作业javascript大作业web前端实训作业htmll大作业html系统/运维

小米官网首页（html+css+JavaScript）

html5css3typescript网盘轮播图编程语言

用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

csshtml插入图片Html/CSS前端开发

html大学生网站开发实践作业：旅游网站设计——联途旅游网(39页) HTML+CSS+JavaSc 旅游网页html 开心旅游网html 旅游网前端框架HTML模板

网页设计旅游网页htmlhtml5旅游作业htmlcss

学生网站模板：旅游出行网站设计——旅游网设计(15页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生旅游网站模板

csshtmljavascriptcss3前端

web前端大作业：旅游网页主题网站设计——武汉旅游网页设计(11页)HTML+CSS+JavaScript

web大学生期末作业javascript大作业web前端实训作业htmll大作业html系统/运维
0 条评论