旅游网页(HTML+CSS+JS)

news2024/12/30 2:09:13

前言

本篇博客就不给大家讲解了,直接上代码

💓 个人主页:普通young man-CSDN博客

⏩ 文章专栏:https://blog.csdn.net/2302_78381559/category_12644031.html?spm=1001.2014.3001.5482icon-default.png?t=N7T8https://blog.csdn.net/2302_78381559/category_12644031.html?spm=1001.2014.3001.5482

      若有问题 评论区见📝

🎉欢迎大家点赞👍收藏⭐文章
————————————————

目录

网页展示

代码

HTML

CSS

JS

需要文件的老铁私信我,免费的,给个三连就行



网页展示

代码

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="./css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div id="menu-bar" class="el-icon-s-unfold"></div>
        <a href="#" class="logo"><span>Chen</span>Qing</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="el-icon-search" id="search-btn"></i>
            <i class="el-icon-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="el-icon-search"></label>
        </form>
    </header>
    <!-- 登录表单 -->
    <div class="login-form-container">
        <i class="el-icon-close" id="form-close"></i>
        <form action="">
            <h3>登录</h3>
            <input type="email" class="box" placeholder="请输入您的邮箱">
            <input type="password" class="box" placeholder="请输入您的密码">
            <input type="submit" value="login now" class="btn">
            <input type="checkbox" id="remember">
            <label for="remember">记住账号</label>
            <p>忘记密码? <a href="#">点击这里</a></p>
            <p>没有账号? <a href="#">去注册</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>
    <!-- 预订部分 -->
    <section class="book" id="book">

        <h1 class="heading">
            <span>预</span>
            <span>订</span>
            <span>信</span>
            <span>息</span>
        </h1>

        <div id="info" 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>热</span>
        <span>门</span>
        <span>城</span>
        <span>市</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="#info" 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="#info" 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="#info" 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="#info" 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="#info" 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="#info" class="btn">立即 预订</a>
            </div>
        </div>
    </div>
</section>
<!-- 服务部分 -->
<section class="services" id="services">

    <h1 class="heading">
        <span>服</span>
        <span>务</span>
    </h1>

    <div class="box-container">

        <div class="box">
            <i class="fas fa-hotel"></i>
            <h3>经济型酒店</h3>
            <p>价格相对亲民、提供基本住宿服务的酒店。</p>
        </div>
        <div class="box">
            <i class="fas fa-utensils"></i>
            <h3>食物与饮料</h3>
            <p>提供丰富多样、美味可口的选择,让您在旅途中尽享口腹之欲。</p>
        </div>
        <div class="box">
            <i class="fas fa-bullhorn"></i>
            <h3>安全指南</h3>
            <p>遵循当地的法律法规,注意个人财物安全。</p>
        </div>
        <div class="box">
            <i class="fas fa-globe-asia"></i>
            <h3>旅游指南</h3>
            <p>体验不同地方的风土人情、美食、历史和自然景观。</p>
        </div>
        <div class="box">
            <i class="fas fa-plane"></i>
            <h3>最快旅行方式</h3>
            <p>不同交通工具的速度决定了从一点到另一点的旅行时间。</p>
        </div>
        <div class="box">
            <i class="fas fa-hiking"></i>
            <h3>冒险</h3>
            <p>旅游者可能会选择攀岩、徒步穿越、漂流、潜水等活动。</p>
        </div>

    </div>
</section>
<!-- 景色部分 -->

<section class="gallery" id="gallery">

    <h1 class="heading">
        <span>景</span>
        <span>色</span>
    </h1>

    <div class="box-container">

        <div class="box">
            <img src="images/g-1.jpg" alt="">
            <div class="content">
                <h3>宽窄巷子</h3>
                <p>宽窄巷子是由宽巷子、窄巷子和井巷子三条平行的小巷组成的。它们保存了清末民初的建筑风貌,展示了老成都的市井生活和风土人情。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-2.jpg" alt="">
            <div class="content">
                <h3>锦里古街</h3>
                <p>锦里古街以其仿古建筑和川西民居风格著称,是体验四川民俗文化和品尝地方美食的好去处。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-3.jpg" alt="">
            <div class="content">
                <h3>都江堰</h3>
                <p>都江堰是世界上最古老的水利工程之一,至今仍在使用。它由李冰父子在公元前256年修建,用以灌溉成都平原。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-4.webp" alt="">
            <div class="content">
                <h3>青城山</h3>
                <p> 青城山是道教名山,被誉为“青城天下幽”。它以其茂密的植被和秀丽的自然风光闻名。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-5.png" alt="">
            <div class="content">
                <h3>武侯祠</h3>
                <p>武侯祠是纪念三国时期蜀汉丞相诸葛亮的祠堂,融合了蜀汉文化和三国历史。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-6.jpeg" alt="">
            <div class="content">
                <h3>大熊猫繁育研究基地</h3>
                <p>成都大熊猫繁育研究基地致力于保护和繁育大熊猫,是世界上重要的大熊猫保护研究机构之一。游客可以近距离观察大熊猫的生活和活动,并了解大熊猫保护的相关知识。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-7.jpg" alt="">
            <div class="content">
                <h3>文殊院</h3>
                <p>文殊院是成都著名的佛教寺院,以其悠久的历史和丰富的文化底蕴著称。寺院内有精美的佛教雕塑和壁画,是佛教信徒和文化爱好者的重要参拜地。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-8.jpeg" alt="">
            <div class="content">
                <h3>杜甫草堂</h3>
                <p>杜甫草堂是唐代大诗人杜甫居住过的地方,如今成为了纪念杜甫的博物馆和园林。草堂内有杜甫的诗碑和故居,是了解杜甫生平和作品的重要场所。</p>
            </div>
        </div>
        <div class="box">
            <img src="images/g-9.jpg" alt="">
            <div class="content">
                <h3>春熙路</h3>
                <p>春熙路是成都最繁华的商业步行街之一,集中了众多的购物中心、餐饮和娱乐设施。这里是体验成都现代都市生活和购物的好去处,也是游客和本地人聚集的热门地点。</p>
            </div>
        </div>
    </div>
</section>
<!-- 评价部分 -->
<section class="review" id="review">

    <h1 class="heading">
        <span>评</span>
        <span>价</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>2024-04-24</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>2023-09-02</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>2023-07-23</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>2023-12-20</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>联</span>-->
<!--        <span>系</span>-->
<!--        <span>我</span>-->
<!--        <span>们</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>陈情</p>
            <p>mosa0309</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">首页</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>
        </div>
        <div class="box">
            <h3>关于我们</h3>
            <a href="#">微博</a>
            <a href="#">qq</a>
            <a href="#">微信</a>
            <a href="#">抖音</a>
        </div>

    </div>

    <h1 class="credit"> created by <span> ChenQing </span> | all rights reserved! </h1>

</section>


    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="./js/script.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;
    scroll-behavior: smooth;
  }
  /* 导航栏 */
  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 5%;
  }

    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:-100%; 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;
      } 

      /* 复用的标题样式 */

      .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 5%;
      }

      /* 预定部分 */
      .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%;
        object-fit: cover;
      }

      .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;
        object-fit: cover;
      }
      
      .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;
      }
      
      /* 服务部分 */
      .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;
        text-wrap: nowrap;
      }
      
      .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%;
        background-size: cover;
        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;
      }



      /* 联系我们 */

      .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%;
        object-fit: cover;
      }
      
      .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{
        width: 100%;
        overflow: hidden;
      }
      .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;
        object-fit: cover;
      }
      
      .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{
        width: 100%;
        overflow: hidden;
        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;
      }

      /* 设配多端 */
      #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 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 menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
let videoBtn = document.querySelectorAll('.vid-btn');

window.onscroll = () =>{
    searchBtn.classList.remove('el-icon-close');
    searchBar.classList.remove('active');
    menu.classList.remove('el-icon-close');
    navbar.classList.remove('active');
    loginForm.classList.remove('active');
}

searchBtn.addEventListener('click', () =>{
    searchBtn.classList.toggle('el-icon-close');
    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;
    });
});

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


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

需要文件的老铁私信我,免费的,给个三连就行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1814425.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

最受欢迎的测试用例管理工具,14款软件全方位对比

14款不错的测试用例管理工具对比&#xff1a;PingCode、TestRAIl、Xray、PractiTest、Tricentis qTest、禅道&#xff08;ZenTao&#xff09;、Zephyr、Tapd、TestLink、TestCollab、Testin云测、云效&#xff08;Alibaba Cloud Effect&#xff09;、TeavCloud、FitNesse。 在软…

如何做好期货投资?

期货&#xff0c;这个词对于很多人来说可能还是个陌生的词汇&#xff0c;但是&#xff0c;随着经济的发展和人们对金融投资的需求增加&#xff0c;期货投资也变得越来越受到关注。那么&#xff0c;如何才能做好期货投资呢&#xff1f; 首先&#xff0c;了解期货的基本知识是非…

Linux网络编程(二)Socket编程

Socket编程 一、网络套接字概念&#xff1a;socket 一个文件描述符指向一个套接字&#xff08;该套接字内部由内核借助两个缓冲区实现。&#xff09;在通信过程中&#xff0c; 套接字一定是成对出现的。二、网络字节序和主机字节序的转换函数&#xff08;ip和端口&#xff09…

戎码翼龙NG-EDR白皮书

NG-EDR 很轻 内核轻量不卡机&#xff01; ◆ 戎码翼龙AI原生NG-EDR具备强大的数据采集能力&#xff0c;涵盖了MITRE ATT&CK框架下的终端数据源&#xff0c;能为威胁检测提供强力基础。在技术实现层面&#xff0c;戎码翼龙采用了先进的内核级数据采集技术&#xff0c;以超…

aardio - 关于字符串指针的操作

一、前言&#xff1a; aardio中的字符串&#xff0c;是不可修改的。 我们对字符串变量重新赋值一个不同的字符串&#xff0c;并不是“修改数据”&#xff0c;而是“更换地址”&#xff0c;实际上是赋予了一个新的内存指针。 先看下图&#xff0c;理解一下aardio中字符串变量…

跳动圆点加载动画

效果图: 完整代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>跳动圆点加载动画</title><style type="text/css">body {background: #ECF0F1;display: flex;justify-content: center;al…

MATLAB神经网络---激活层

reluLayer 修正线性单元 (ReLU) 层 ReLU 层对输入的每个元素执行阈值运算&#xff0c;其中任何小于零的值都设置为零。 此运算等效于 语法 layer reluLayer 创建一个 ReLU 层。 layer reluLayer(Name,Name) 创建一个 ReLU 层&#xff0c;并使用名称-值对组设置可选的 Nam…

【机器学习】机器学习与金融科技在智能投资中的融合应用与性能优化新探索

文章目录 引言机器学习与金融科技的基本概念机器学习概述监督学习无监督学习强化学习 金融科技概述股票预测风险管理资产配置 机器学习与金融科技的融合应用实时市场数据分析数据预处理特征工程 股票预测与优化模型训练模型评估 风险管理与优化深度学习应用 资产配置与优化强化…

产品管理:抓住关键要素的ABC分类法

目录 简介 ABC 分类法步骤 第一步&#xff1a;收集数据 第二步&#xff1a;处理数据 第三步&#xff1a;根据 ABC 分析表确定分类 第四步&#xff1a;绘制ABC分析图 第五步&#xff1a;根据 ABC 分析的结果&#xff0c;对 ABC 三类商品采取不同的管理策略 附&#xff1…

jenkins 自动化任务构建案例

一新建Item 输入一个名称&#xff0c;点击Freestyle project 进入到配置项 选择 This project is parameterized&#xff0c;点击String Parameter 添加 变量值 command添加执行的命令 二构建 点击build构建触发器 三查看控制台 控制台输出信息无误

双亲委派模型是什么,为什么要使用双亲委派模型

双亲委派模型是什么&#xff0c;为什么要使用双亲委派模型 在Java中&#xff0c;类加载器&#xff08;ClassLoader&#xff09;是负责将类文件加载到JVM中的关键组件。为了确保类加载过程的安全性和稳定性&#xff0c;Java引入了一种叫做双亲委派模型&#xff08;Parent Deleg…

联合数据库,申请出战!新指标“超级老人”揭示老年健康新视角,仅用logistic分析发文二区...

说到老年数据库&#xff0c;大家最熟悉的肯定是Charls&#xff0c;实际上类似免费好用的老年数据库还有很多&#xff0c;在没有思路的时候我们不妨看一下其他数据库的文章&#xff0c;说不定能找到新的思路或者切入点。 今天介绍的这篇文章就提出来一个新的概念-“超级老人”&a…

中国(广州)国际物流装备展圆满收官,铨顺宏邀您6月上海档案展

2024年5月29日-31日&#xff0c;为期三天的第十五届中国(广州)国际物流装备与技术展览会圆满收官。此次展会汇聚了物流装备与技术领域的众多行业精英和领先企业&#xff0c;展示了最新的技术和产品。铨顺宏科技作为物联网设备和技术服务领提供商&#xff0c;携RFID、BLE、UWB和…

按位拆分+前缀和,CF 1879D - Sum of XOR Functions

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1879D - Sum of XOR Functions 二、解题报告 1、思路分析 朴素暴力O(N^2)&#xff0c;考虑优化 由于要求的是异或值乘长度&#xff0c;那么我们可以按位考虑每一位异或值的贡献 我们枚举每一位 每次遍历…

TMCM-BB1是单轴板驱动器

TMCM-BB4 简介 TMCM-BB1和TMCM-BB4是Trinamic插槽式模块的基板。TMCM-BB1是单轴板&#xff0c;提供对一个MCU模块和一个驱动器模块的访问。TMCM-BB4是一个4轴板&#xff0c;提供对41模块插槽的访问。TMCM-0930模块采用单36针PCI插座&#xff0c;整个系统采用主MCU&#xff08;…

[Shell编程学习路线]--shell中重定向和管道符(详细介绍)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f6e0;️Shell编程专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年6月12日10点50分 &#x1f004;️文章质量&#xff1a;93分 ——前言—— 在Shell编程中&#xff0c;重定向和管道符是两个…

超声波清洗机哪家好?四大人气爆单超声波清洗机汇总安利

在日常生活中&#xff0c;我们每天都在与灰尘和污渍作斗争&#xff0c;尤其是对于那些细小、精密的物品&#xff0c;如眼镜。眼镜不仅是视力矫正的工具&#xff0c;更是我们个人形象的一部分。一副干净、明亮的眼镜可以让我们的视线更加清晰。因为保持眼镜的清洁是一件很重要的…

接上篇---dbeaver如何导入csv文件(科学计数法)以及导出csv(科学计数法如何处理)

前提由于我用的是社区版本的&#xff0c;不支持excel&#xff0c;只支持csv导入导出 1.导入时候遇见科学计数法的解决方案&#xff1b; 由于我处理的是一些合同编码&#xff0c;虽然excel我给它设置成了文本类型&#xff0c;但是另存为csv的时候还是会变成科学计数法&#xf…

【关注】科大睿智祝贺企业通过ITSS公示名单

近日&#xff0c;根据信息技术服务标准符合性评估相关规定&#xff0c;现对以下单位进行公示&#xff0c;公示期5个工作日。公示期内如有异议&#xff0c;请提供持有异议的正式书面文件&#xff0c;包括持有异议的原因及证据、单位或个人真实名称及有效联系方式。小编祝贺多家服…

音视频封装的总接

1、封装涉及的基本概念 2、音视频封装基础3、封装总结 4、PS/TS码流封装层次图