• 旅游网页(HTML+CSS+JS)

    前言

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

    💓 个人主页：普通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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>旅游网title>
    8.     <link rel="stylesheet" href="./css/style.css">
    9.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    10.     
    11.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    12.     
    13.     <script src="https://unpkg.com/element-ui/lib/index.js">script>
    14. head>
    15. <body>
    16.     
    17.     <header>
    18.         <div id="menu-bar" class="el-icon-s-unfold">div>
    19.         <a href="#" class="logo"><span>Chenspan>Qinga>
    20.         <nav class="navbar">
    21.             <a href="#home">首页a>
    22.             <a href="#book">预定a>
    23.             <a href="#packages">旅游a>
    24.             <a href="#services">服务a>
    25.             <a href="#gallery">景色a>
    26.             <a href="#review">评价a>
    28.         nav>
    29.         
    30.         <div class="icons">
    31.             <i class="el-icon-search" id="search-btn">i>
    32.             <i class="el-icon-user" id="login-btn">i>
    33.         div>
    34.         
    35.         <form action="" class="search-bar-container">
    36.             <input type="search" id="search-bar" placeholder="search here...">
    37.             <label for="search-bar" class="el-icon-search">label>
    38.         form>
    39.     header>
    40.     
    41.     <div class="login-form-container">
    42.         <i class="el-icon-close" id="form-close">i>
    43.         <form action="">
    44.             <h3>登录h3>
    45.             <input type="email" class="box" placeholder="请输入您的邮箱">
    46.             <input type="password" class="box" placeholder="请输入您的密码">
    47.             <input type="submit" value="login now" class="btn">
    48.             <input type="checkbox" id="remember">
    49.             <label for="remember">记住账号label>
    50.             <p>忘记密码? <a href="#">点击这里a>p>
    51.             <p>没有账号? <a href="#">去注册a>p>
    52.         form>
    53.     div>
    54.     
    55.     <section class="home" id="home">
    56.  
    57.         <div class="content">
    58.             <h3>旅游是一种信仰h3>
    59.             <p>和我们一起去远方,寻找诗和梦想p>
    60.             <a href="#" class="btn">查看更多a>
    61.         div>
    62.  
    63.         <div class="controls">
    64.             <span class="vid-btn active" data-src="images/vid-1.mp4">span>
    65.             <span class="vid-btn" data-src="./images/vid-2.mp4">span>
    66.             <span class="vid-btn" data-src="images/vid-3.mp4">span>
    67.             <span class="vid-btn" data-src="images/vid-4.mp4">span>
    68.             <span class="vid-btn" data-src="images/vid-5.mp4">span>
    69.         div>
    70.  
    71.         <div class="video-container">
    72.             <video src="images/vid-1.mp4" id="video-slider" loop autoplay muted>video>
    73.         div>
    74.  
    75.     section>
    76.     
    77.     <section class="book" id="book">
    78.  
    79.         <h1 class="heading">
    80.             <span>预span>
    81.             <span>订span>
    82.             <span>信span>
    83.             <span>息span>
    84.         h1>
    85.  
    86.         <div id="info" class="row">
    87.  
    88.             <div class="image">
    89.                 <img src="images/book-img.svg" alt="">
    90.             div>
    91.  
    92.             <form action="">
    93.                 <div class="inputBox">
    94.                     <h3>where toh3>
    95.                     <input type="text" placeholder="去哪里">
    96.                 div>
    97.                 <div class="inputBox">
    98.                     <h3>how manyh3>
    99.                     <input type="number" placeholder="多少人用行">
    100.                 div>
    101.                 <div class="inputBox">
    102.                     <h3>多久到h3>
    103.                     <input type="date">
    104.                 div>
    105.                 <div class="inputBox">
    106.                     <h3>多久离开h3>
    107.                     <input type="date">
    108.                 div>
    109.                 <input type="submit" class="btn" value="立即 预定">
    110.             form>
    111.  
    112.         div>
    113.  
    114.     section>
    115.  
    116.     
    117.  
    118. <section class="packages" id="packages">
    119.  
    120.     <h1 class="heading">
    121.         <span>热span>
    122.         <span>门span>
    123.         <span>城span>
    124.         <span>市span>
    125.     h1>
    126.  
    127.     <div class="box-container">
    128.  
    129.         <div class="box">
    130.             <img src="images/p-1.jpg" alt="">
    131.             <div class="content">
    132.                 <h3> <i class="fas fa-map-marker-alt">i> 成都 h3>
    133.                 <p>和我在成都的街头走一走。p>
    134.                 <div class="stars">
    135.                     <i class="fas fa-star">i>
    136.                     <i class="fas fa-star">i>
    137.                     <i class="fas fa-star">i>
    138.                     <i class="fas fa-star">i>
    139.                     <i class="far fa-star">i>
    140.                 div>
    141.                 <div class="price"> $90.00 <span>$120.00span> div>
    142.                 <a href="#info" class="btn">立即 预订a>
    143.             div>
    144.         div>
    145.         <div class="box">
    146.             <img src="images/p-2.jpg" alt="">
    147.             <div class="content">
    148.                 <h3> <i class="fas fa-map-marker-alt">i> 上海 h3>
    149.                 <p>这里有你梦想中的迪士尼。p>
    150.                 <div class="stars">
    151.                     <i class="fas fa-star">i>
    152.                     <i class="fas fa-star">i>
    153.                     <i class="fas fa-star">i>
    154.                     <i class="fas fa-star">i>
    155.                     <i class="far fa-star">i>
    156.                 div>
    157.                 <div class="price"> $90.00 <span>$120.00span> div>
    158.                 <a href="#info" class="btn">立即 预订a>
    159.             div>
    160.         div>
    161.  
    162.         <div class="box">
    163.             <img src="images/p-3.jpg" alt="">
    164.             <div class="content">
    165.                 <h3> <i class="fas fa-map-marker-alt">i> 广州 h3>
    166.                 <p>两千多年沉淀，打磨出中国独树一帜的海阔天空之城。p>
    167.                 <div class="stars">
    168.                     <i class="fas fa-star">i>
    169.                     <i class="fas fa-star">i>
    170.                     <i class="fas fa-star">i>
    171.                     <i class="fas fa-star">i>
    172.                     <i class="far fa-star">i>
    173.                 div>
    174.                 <div class="price"> $90.00 <span>$120.00span> div>
    175.                 <a href="#info" class="btn">立即 预订a>
    176.             div>
    177.         div>
    178.  
    179.         <div class="box">
    180.             <img src="images/p-4.jpg" alt="">
    181.             <div class="content">
    182.                 <h3> <i class="fas fa-map-marker-alt">i> 深圳 h3>
    183.                 <p>有钱人的天堂.创业者向往的城市。p>
    184.                 <div class="stars">
    185.                     <i class="fas fa-star">i>
    186.                     <i class="fas fa-star">i>
    187.                     <i class="fas fa-star">i>
    188.                     <i class="fas fa-star">i>
    189.                     <i class="far fa-star">i>
    190.                 div>
    191.                 <div class="price"> $90.00 <span>$120.00span> div>
    192.                 <a href="#info" class="btn">立即 预订a>
    193.             div>
    194.         div>
    195.  
    196.         <div class="box">
    197.             <img src="images/p-5.jpg" alt="">
    198.             <div class="content">
    199.                 <h3> <i class="fas fa-map-marker-alt">i> 北京 h3>
    200.                 <p>北京你爱来不来。p>
    201.                 <div class="stars">
    202.                     <i class="fas fa-star">i>
    203.                     <i class="fas fa-star">i>
    204.                     <i class="fas fa-star">i>
    205.                     <i class="fas fa-star">i>
    206.                     <i class="far fa-star">i>
    207.                 div>
    208.                 <div class="price"> $90.00 <span>$120.00span> div>
    209.                 <a href="#info" class="btn">立即 预订a>
    210.             div>
    211.         div>
    212.  
    213.         <div class="box">
    214.             <img src="images/p-6.jpg" alt="">
    215.             <div class="content">
    216.                 <h3> <i class="fas fa-map-marker-alt">i> 武汉 h3>
    217.                 <p style="font-size: 0.75rem;">武汉的樱花有如我和你初见时的阳光只是多了一些忧愁。p>
    218.                 <div class="stars">
    219.                     <i class="fas fa-star">i>
    220.                     <i class="fas fa-star">i>
    221.                     <i class="fas fa-star">i>
    222.                     <i class="fas fa-star">i>
    223.                     <i class="far fa-star">i>
    224.                 div>
    225.                 <div class="price"> $90.00 <span>$120.00span> div>
    226.                 <a href="#info" class="btn">立即 预订a>
    227.             div>
    228.         div>
    229.     div>
    230. section>
    232. <section class="services" id="services">
    233.  
    234.     <h1 class="heading">
    235.         <span>服span>
    236.         <span>务span>
    237.     h1>
    238.  
    239.     <div class="box-container">
    240.  
    241.         <div class="box">
    242.             <i class="fas fa-hotel">i>
    243.             <h3>经济型酒店h3>
    244.             <p>价格相对亲民、提供基本住宿服务的酒店。p>
    245.         div>
    246.         <div class="box">
    247.             <i class="fas fa-utensils">i>
    248.             <h3>食物与饮料h3>
    249.             <p>提供丰富多样、美味可口的选择，让您在旅途中尽享口腹之欲。p>
    250.         div>
    251.         <div class="box">
    252.             <i class="fas fa-bullhorn">i>
    253.             <h3>安全指南h3>
    254.             <p>遵循当地的法律法规，注意个人财物安全。p>
    255.         div>
    256.         <div class="box">
    257.             <i class="fas fa-globe-asia">i>
    258.             <h3>旅游指南h3>
    259.             <p>体验不同地方的风土人情、美食、历史和自然景观。p>
    260.         div>
    261.         <div class="box">
    262.             <i class="fas fa-plane">i>
    263.             <h3>最快旅行方式h3>
    264.             <p>不同交通工具的速度决定了从一点到另一点的旅行时间。p>
    265.         div>
    266.         <div class="box">
    267.             <i class="fas fa-hiking">i>
    268.             <h3>冒险h3>
    269.             <p>旅游者可能会选择攀岩、徒步穿越、漂流、潜水等活动。p>
    270.         div>
    271.  
    272.     div>
    273. section>
    275.  
    276. <section class="gallery" id="gallery">
    277.  
    278.     <h1 class="heading">
    279.         <span>景span>
    280.         <span>色span>
    281.     h1>
    282.  
    283.     <div class="box-container">
    284.  
    285.         <div class="box">
    286.             <img src="images/g-1.jpg" alt="">
    287.             <div class="content">
    288.                 <h3>宽窄巷子h3>
    289.                 <p>宽窄巷子是由宽巷子、窄巷子和井巷子三条平行的小巷组成的。它们保存了清末民初的建筑风貌，展示了老成都的市井生活和风土人情。p>
    290.             div>
    291.         div>
    292.         <div class="box">
    293.             <img src="images/g-2.jpg" alt="">
    294.             <div class="content">
    295.                 <h3>锦里古街h3>
    296.                 <p>锦里古街以其仿古建筑和川西民居风格著称，是体验四川民俗文化和品尝地方美食的好去处。p>
    297.             div>
    298.         div>
    299.         <div class="box">
    300.             <img src="images/g-3.jpg" alt="">
    301.             <div class="content">
    302.                 <h3>都江堰h3>
    303.                 <p>都江堰是世界上最古老的水利工程之一，至今仍在使用。它由李冰父子在公元前256年修建，用以灌溉成都平原。p>
    304.             div>
    305.         div>
    306.         <div class="box">
    307.             <img src="images/g-4.webp" alt="">
    308.             <div class="content">
    309.                 <h3>青城山h3>
    310.                 <p> 青城山是道教名山，被誉为“青城天下幽”。它以其茂密的植被和秀丽的自然风光闻名。p>
    311.             div>
    312.         div>
    313.         <div class="box">
    314.             <img src="images/g-5.png" alt="">
    315.             <div class="content">
    316.                 <h3>武侯祠h3>
    317.                 <p>武侯祠是纪念三国时期蜀汉丞相诸葛亮的祠堂，融合了蜀汉文化和三国历史。p>
    318.             div>
    319.         div>
    320.         <div class="box">
    321.             <img src="images/g-6.jpeg" alt="">
    322.             <div class="content">
    323.                 <h3>大熊猫繁育研究基地h3>
    324.                 <p>成都大熊猫繁育研究基地致力于保护和繁育大熊猫，是世界上重要的大熊猫保护研究机构之一。游客可以近距离观察大熊猫的生活和活动，并了解大熊猫保护的相关知识。p>
    325.             div>
    326.         div>
    327.         <div class="box">
    328.             <img src="images/g-7.jpg" alt="">
    329.             <div class="content">
    330.                 <h3>文殊院h3>
    331.                 <p>文殊院是成都著名的佛教寺院，以其悠久的历史和丰富的文化底蕴著称。寺院内有精美的佛教雕塑和壁画，是佛教信徒和文化爱好者的重要参拜地。p>
    332.             div>
    333.         div>
    334.         <div class="box">
    335.             <img src="images/g-8.jpeg" alt="">
    336.             <div class="content">
    337.                 <h3>杜甫草堂h3>
    338.                 <p>杜甫草堂是唐代大诗人杜甫居住过的地方，如今成为了纪念杜甫的博物馆和园林。草堂内有杜甫的诗碑和故居，是了解杜甫生平和作品的重要场所。p>
    339.             div>
    340.         div>
    341.         <div class="box">
    342.             <img src="images/g-9.jpg" alt="">
    343.             <div class="content">
    344.                 <h3>春熙路h3>
    345.                 <p>春熙路是成都最繁华的商业步行街之一，集中了众多的购物中心、餐饮和娱乐设施。这里是体验成都现代都市生活和购物的好去处，也是游客和本地人聚集的热门地点。p>
    346.             div>
    347.         div>
    348.     div>
    349. section>
    351. <section class="review" id="review">
    352.  
    353.     <h1 class="heading">
    354.         <span>评span>
    355.         <span>价span>
    356.     h1>
    357.  
    358.     <div class="swiper-container review-slider">
    359.  
    360.         <div class="swiper-wrapper">
    361.  
    362.             <div class="swiper-slide">
    363.                 <div class="box">
    364.                     <img src="images/pic1.png" alt="">
    365.                     <h3>小黑h3>
    366.                     <p>2024-04-24p>
    367.                     <div class="stars">
    368.                         <i class="fas fa-star">i>
    369.                         <i class="fas fa-star">i>
    370.                         <i class="fas fa-star">i>
    371.                         <i class="fas fa-star">i>
    372.                         <i class="far fa-star">i>
    373.                     div>
    374.                 div>
    375.             div>
    376.             <div class="swiper-slide">
    377.                 <div class="box">
    378.                     <img src="images/pic2.png" alt="">
    379.                     <h3>小白h3>
    380.                     <p>2023-09-02p>
    381.                     <div class="stars">
    382.                         <i class="fas fa-star">i>
    383.                         <i class="fas fa-star">i>
    384.                         <i class="fas fa-star">i>
    385.                         <i class="fas fa-star">i>
    386.                         <i class="far fa-star">i>
    387.                     div>
    388.                 div>
    389.             div>
    390.             <div class="swiper-slide">
    391.                 <div class="box">
    392.                     <img src="images/pic3.png" alt="">
    393.                     <h3>小红h3>
    394.                     <p>2023-07-23p>
    395.                     <div class="stars">
    396.                         <i class="fas fa-star">i>
    397.                         <i class="fas fa-star">i>
    398.                         <i class="fas fa-star">i>
    399.                         <i class="fas fa-star">i>
    400.                         <i class="far fa-star">i>
    401.                     div>
    402.                 div>
    403.             div>
    404.             <div class="swiper-slide">
    405.                 <div class="box">
    406.                     <img src="images/pic4.png" alt="">
    407.                     <h3>小黄h3>
    408.                     <p>2023-12-20p>
    409.                     <div class="stars">
    410.                         <i class="fas fa-star">i>
    411.                         <i class="fas fa-star">i>
    412.                         <i class="fas fa-star">i>
    413.                         <i class="fas fa-star">i>
    414.                         <i class="far fa-star">i>
    415.                     div>
    416.                 div>
    417.             div>
    418.  
    419.         div>
    420.  
    421.     div>
    422. section>
    425.  
    432.  
    434.  
    438.  
    451.  
    453.  
    455.  
    457. <section class="brand-container">
    458.  
    459.     <div class="swiper-container brand-slider">
    460.         <div class="swiper-wrapper">
    461.             <div class="swiper-slide"><img src="images/1.jpg" alt="">div>
    462.             <div class="swiper-slide"><img src="images/2.jpg" alt="">div>
    463.             <div class="swiper-slide"><img src="images/3.jpg" alt="">div>
    464.             <div class="swiper-slide"><img src="images/4.jpg" alt="">div>
    465.             <div class="swiper-slide"><img src="images/5.jpg" alt="">div>
    466.             <div class="swiper-slide"><img src="images/6.jpg" alt="">div>
    467.         div>
    468.     div>
    469.  
    470. section>
    471.  
    473.  
    474. <section class="footer">
    475.  
    476.     <div class="box-container">
    477.  
    478.         <div class="box">
    479.             <h3>关于我们h3>
    480.             <p>陈情p>
    481.             <p>mosa0309p>
    482.         div>
    483.         <div class="box">
    484.             <h3>分支机构位置h3>
    485.             <a href="#">成都a>
    486.             <a href="#">北京a>
    487.             <a href="#">上海a>
    488.             <a href="#">深圳a>
    489.         div>
    490.         <div class="box">
    491.             <h3>快速链接h3>
    492.             <a href="#home">首页a>
    493.             <a href="#book">预定a>
    494.             <a href="#packages">热门城市a>
    495.             <a href="#services">服务a>
    496.             <a href="#gallery">景色a>
    497.             <a href="#review">评价a>
    498.             <a href="#contact">联系我们a>
    499.         div>
    500.         <div class="box">
    501.             <h3>关于我们h3>
    502.             <a href="#">微博a>
    503.             <a href="#">qqa>
    504.             <a href="#">微信a>
    505.             <a href="#">抖音a>
    506.         div>
    507.  
    508.     div>
    509.  
    510.     <h1 class="credit"> created by <span> ChenQing span> | all rights reserved! h1>
    511.  
    512. section>
    513.  
    514.  
    515.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js">script>
    516.     <script src="./js/script.js">script>
    517. body>
    518. html>

    CSS

    1.  
    2.  
    3. *{
    4.     margin:0;
    5.     padding:0;
    6.     box-sizing: border-box;
    7.     text-transform: capitalize;
    8.     outline: none; 
    9.     border:none;
    10.     text-decoration: none;
    11.     transition: all .2s linear;
    12.     scroll-behavior: smooth;
    13.   }
    14.   /* 导航栏 */
    15.   header{
    16.     position: fixed;
    17.     top:0; 
    18.     left: 0; 
    19.     right:0;
    20.     background:#333;
    21.     z-index: 1000;
    22.     display: flex;
    23.     align-items: center;
    24.     justify-content: space-between;
    25.     padding:1rem 5%;
    26.   }
    27.  
    28.     header .logo span{
    29.         color: #ffa500;
    30.     }
    31.  
    32.     header .logo{
    33.     font-size: 1.5rem;
    34.     font-weight: bolder;
    35.     color:#fff;
    36.     text-transform: uppercase;
    37.     }
    38.  
    39.     header .navbar a{
    40.         color:#fff;
    41.         font-size: 1rem;
    42.         font-weight: bold;
    43.         margin:0 .8rem;
    44.       }
    45.  
    46.     header .navbar a:hover{
    47.         color:#ffa500;
    48.       }
    49.  
    50.       header .icons i{
    51.         font-size: 1.2rem;
    52.         color:#fff;
    53.         cursor: pointer;
    54.         margin-right: 1rem;
    55.       }
    56.  
    57.       header .icons i:hover{
    58.         color:#ffa500;
    59.       }
    60.  
    61.       /* 搜索框 */
    62.       header .search-bar-container{
    63.         position: absolute;
    64.         top:-100%; left: 0; right:0;
    65.         padding: 0.5em 1rem;
    66.         background:#333;
    67.         border-top: .1rem solid rgba(255,255,255,.2);
    68.         display: flex;
    69.         align-items: center;
    70.         z-index: 1001;
    71.       }
    72.       
    73.       header .search-bar-container.active{
    74.         top:100%;    
    75.       }
    76.  
    77.       header .search-bar-container #search-bar{
    78.         width:100%;
    79.         padding:.5rem;
    80.         text-transform: none;
    81.         color:#333;
    82.         font-size: 1rem;
    83.       }
    84.  
    85.      
    86.       header .search-bar-container label{
    87.         color:#fff;
    88.         cursor: pointer;
    89.         font-size: 1rem;
    90.         margin-left: 1rem;
    91.       }
    92.       
    93.       header .search-bar-container label:hover{
    94.         color:#ffa500;
    95.       } 
    96.  
    97.       /* 登录表单 */
    98.       .login-form-container{
    99.         position: fixed;
    100.         top:-120%; left: 0;
    101.         z-index: 10000;
    102.         min-height: 100vh;
    103.         width:100%;
    104.         background:rgba(0,0,0,.7);
    105.         display: flex;
    106.         align-items: center;
    107.         justify-content: center;
    108.       }
    109.       
    110.       .login-form-container.active{
    111.         top:0;
    112.       }
    113.       
    114.       .login-form-container form{
    115.         margin:2rem;
    116.         padding:1.5rem 2rem;
    117.         border-radius: .5rem;
    118.         background:#fff;
    119.         width:30rem;
    120.       }
    121.       
    122.       .login-form-container form h3{
    123.         font-size: 2rem;
    124.         color:#444;
    125.         text-transform: uppercase;
    126.         text-align: center;
    127.         padding:1rem 0;
    128.       }
    129.       
    130.       .login-form-container form .box{
    131.         width:100%;
    132.         padding:1rem;
    133.         font-size: 1.5rem;
    134.         color:#333;
    135.         margin:.6rem 0;
    136.         border:.1rem solid rgba(0,0,0,.3);
    137.         text-transform: none;
    138.       }
    139.       
    140.       .login-form-container form .box:focus{
    141.         border-color: #ffa500;
    142.       }
    143.       
    144.       .login-form-container form #remember{
    145.         margin-top: 1.5rem;
    146.       }
    147.       
    148.       .login-form-container form label{
    149.         font-size: 1.5rem;
    150.       }
    151.       
    152.       .login-form-container form .btn{
    153.         display: block;
    154.         width:100%;
    155.       }
    156.       
    157.       .login-form-container form p{
    158.         padding:.5rem 0;
    159.         font-size: 1.0rem;
    160.         color:#666;
    161.       }
    162.       
    163.       .login-form-container form p a{
    164.         color:#ffa500;
    165.       }
    166.       
    167.       .login-form-container form p a:hover{
    168.         color:#333;
    169.         text-decoration: underline;
    170.       }
    171.       
    172.       .login-form-container #form-close{
    173.         position: absolute;
    174.         top:2rem; right:3rem;
    175.         font-size: 4rem;
    176.         color:#fff;
    177.         cursor: pointer;
    178.       }
    179.  
    180.       .btn{
    181.         display: inline-block;
    182.         margin-top: 1rem;
    183.         background:#ffa500;
    184.         color:#fff;
    185.         padding:.8rem 3rem;
    186.         border:.2rem solid #ffa500;
    187.         cursor: pointer;
    188.         font-size: 1.5rem;
    189.       }
    190.       
    191.       .btn:hover{
    192.         background:rgba(255, 165, 0,.2);
    193.         color:#ffa500;
    194.       }
    195.  
    196.       /* 主页的视频播放区 */
    197.  
    198.       .home{
    199.         min-height: 100vh;
    200.         display: flex;
    201.         align-items: center;
    202.         justify-content: center;
    203.         flex-direction: column;
    204.         position: relative;
    205.         z-index: 0;
    206.       }
    207.       
    208.       .home .content{
    209.         text-align: center;
    210.       }
    211.       
    212.       .home .content h3{
    213.         font-size: 2rem;
    214.         color:#fff;
    215.         text-transform: uppercase;
    216.         text-shadow: 0 .3rem .5rem rgba(0,0,0,.1);
    217.       }
    218.       
    219.       .home .content p{
    220.         font-size: 2rem;
    221.         color:#fff;
    222.         padding:.5rem 0;
    223.       }
    224.       
    225.        .home .video-container video{
    226.         position: absolute;
    227.         top:0; left: 0;
    228.         z-index: -1;
    229.         height: 100%;
    230.         width:100%;
    231.         object-fit: cover;
    232.       }
    233.       
    234.       
    235.       .home .controls{
    236.         padding:0.5rem;
    237.         border-radius: 4rem;
    238.         background:rgba(0,0,0,.7);
    239.         position: relative;
    240.         top:10rem;
    241.       }
    242.       
    243.       .home .controls .vid-btn{
    244.         height:2rem;
    245.         width:2rem;
    246.         display: inline-block;
    247.         border-radius: 50%;
    248.         background:#fff;
    249.         cursor: pointer;
    250.         margin:0 .5rem;
    251.       }
    252.       
    253.       .home .controls .vid-btn.active{
    254.         background:#ffa500;
    255.       } 
    256.  
    257.       /* 复用的标题样式 */
    258.  
    259.       .heading{
    260.         text-align: center;
    261.         padding:2.5rem 0
    262.       }
    263.       
    264.       .heading span{
    265.         font-size: 2.5rem;
    266.         background:rgba(255, 165, 0,.2);
    267.         color:#ffa500;
    268.         border-radius: .5rem;
    269.         padding:.2rem 1rem;
    270.       }
    271.       
    272.       .heading span.space{
    273.         background:none;
    274.       }
    275.       
    276.       section{
    277.         padding:2rem 5%;
    278.       }
    279.  
    280.       /* 预定部分 */
    281.       .book .row{
    282.         display: flex;
    283.         flex-wrap: wrap;
    284.         gap:1rem;
    285.         align-items: center;
    286.       }
    287.       
    288.       .book .row .image{
    289.         flex-grow: 1;
    290.         flex-basis: 15rem;
    291.       }
    292.       
    293.       .book .row .image img{
    294.         width:100%;
    295.         object-fit: cover;
    296.       }
    297.  
    298.       .book .row form{
    299.         flex-grow: 1;
    300.         flex-basis: 20rem;
    301.         padding:.5rem;
    302.         box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    303.         border-radius: .5rem;
    304.       }
    305.       
    306.       .book .row form .inputBox{
    307.         padding:.5rem 0;
    308.       }
    309.       
    310.       .book .row form .inputBox input{
    311.         width:100%;
    312.         padding:.5rem;
    313.         border:.1rem solid rgba(0,0,0,.1);
    314.         font-size: 1rem;
    315.         color:#333;
    316.         text-transform: none;
    317.       }
    318.       
    319.       .book .row form .inputBox h3{
    320.         font-size: 1rem;
    321.         padding:.5rem 0;
    322.         color:#666;
    323.       }
    324.       /* 旅游部分 */
    325.  
    326.       .packages .box-container{
    327.         display: flex;
    328.         flex-wrap: wrap;
    329.         gap:1rem;
    330.       }
    331.       
    332.       .packages .box-container .box{
    333.         flex:1 1 25rem;
    334.         border-radius: .5rem;
    335.         box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    336.       }
    337.       
    338.       .packages .box-container .box img{
    339.         height: 15rem;
    340.         width:100%;
    341.         background-size: contain;
    342.         object-fit: cover;
    343.       }
    344.       
    345.       .packages .box-container .box .content{
    346.         padding:0.5rem;
    347.       }
    348.       
    349.       .packages .box-container .box .content h3{
    350.         font-size:2rem;
    351.         color:#333;
    352.       }
    353.       
    354.       .packages .box-container .box .content h3 i{
    355.         color:#ffa500;
    356.       }
    357.       
    358.       .packages .box-container .box .content p{
    359.         font-size:1rem;
    360.         color:#666;
    361.         padding:0.5rem 0;
    362.       }
    363.       
    364.       .packages .box-container .box .content .stars i{
    365.         font-size:1.5rem;
    366.         color:#ffa500;
    367.       }
    368.       
    369.       .packages .box-container .box .content .price{
    370.         font-size: 1.5rem;
    371.         color:#333;
    372.         padding-top: 0.5rem;
    373.       }
    374.       
    375.       .packages .box-container .box .content .price span{
    376.         color:#666;
    377.         font-size: 1rem;
    378.         text-decoration: line-through;
    379.       }
    380.       
    381.       /* 服务部分 */
    382.       .services .box-container{
    383.         display: flex;
    384.         flex-wrap: wrap;
    385.         gap:1rem;
    386.       }
    387.       
    388.       .services .box-container .box{
    389.         flex: 1 1 20rem;
    390.         border-radius: .5rem;
    391.         padding: 1rem;
    392.         text-align: center;
    393.       }
    394.       
    395.       .services .box-container .box i{
    396.         padding:0.5rem;
    397.         font-size: 2.5rem;
    398.         color:#ffa500;
    399.       }
    400.       
    401.       .services .box-container .box h3{
    402.         font-size: 1.5rem;
    403.         color:#333;
    404.       }
    405.       
    406.       .services .box-container .box p{
    407.         font-size: 1rem;
    408.         color:#666;
    409.         padding:0.5rem 0;
    410.         text-wrap: nowrap;
    411.       }
    412.       
    413.       .services .box-container .box:hover{
    414.         box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
    415.       }
    416.       /* 景色部分 */
    417.       .gallery .box-container{
    418.         display: flex;
    419.         flex-wrap: wrap;
    420.         gap:1rem;
    421.       }
    422.       
    423.       .gallery .box-container .box{
    424.         overflow: hidden;
    425.         box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    426.         border:1rem solid #fff;
    427.         border-radius: .5rem;
    428.         flex:1 1 20rem;
    429.         height: 15rem;
    430.         position: relative;
    431.       }
    432.       
    433.       .gallery .box-container .box img{
    434.         height: 100%;
    435.         width:100%;
    436.         background-size: cover;
    437.         object-fit: cover;
    438.       }
    439.       
    440.       .gallery .box-container .box .content{
    441.         position: absolute;
    442.         top:-100%; left:0;
    443.         height: 100%;
    444.         width:100%;
    445.         text-align: center;
    446.         background:rgba(0,0,0,.7);
    447.         padding:1rem;
    448.         padding-top: 2.5rem;
    449.       }
    450.       
    451.       .gallery .box-container .box:hover .content{
    452.         top:0;
    453.       }
    454.       
    455.       .gallery .box-container .box .content h3{
    456.         font-size: 1.5rem;
    457.         color:#ffa500;
    458.       }
    459.       
    460.       .gallery .box-container .box .content p{
    461.         font-size: 1rem;
    462.         color:#eee;
    463.         padding:.5rem 0;
    464.       }
    465.  
    466.  
    467.  
    468.       /* 联系我们 */
    469.  
    470.       .contact .row{
    471.         display: flex;
    472.         flex-wrap: wrap;
    473.         gap:1rem;
    474.         align-items: center;
    475.       }
    476.       
    477.       .contact .row .image{
    478.         flex:1 1 25rem;
    479.       }
    480.       
    481.       .contact .row .image img{
    482.         width:100%;
    483.         object-fit: cover;
    484.       }
    485.       
    486.       .contact .row form{
    487.         flex:1 1 25rem;
    488.         padding:1rem;
    489.         box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    490.         border-radius: .5rem;
    491.       }
    492.       
    493.       .contact .row form .inputBox{
    494.         display: flex;
    495.         flex-wrap: wrap;
    496.         justify-content: space-between;
    497.       }
    498.       
    499.       .contact .row form .inputBox input, .contact .row form textarea{
    500.         width:49%;
    501.         margin:1rem 0;
    502.         padding:1rem;
    503.         font-size: 1rem;
    504.         font-weight: bold;
    505.         color:#333;
    506.         background:#f7f7f7;
    507.         text-transform: none;
    508.       }
    509.       
    510.       .contact .row form textarea{
    511.         height: 8rem;
    512.         resize: none;
    513.         width:100%;
    514.       }
    515.  
    516.       /* 评价部分 */
    517.       .review{
    518.         width: 100%;
    519.         overflow: hidden;
    520.       }
    521.       .review .review-slider{
    522.         padding-bottom: 1rem;
    523.       }
    524.       
    525.       .review .box{
    526.         padding:1rem;
    527.         text-align: center;
    528.         box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    529.         border-radius: .5rem;
    530.       }
    531.       
    532.       .review .box img{
    533.         height:7rem;
    534.         width:7rem;
    535.         border-radius: 50%;
    536.         object-fit: cover;
    537.         margin-bottom: 1rem;
    538.         object-fit: cover;
    539.       }
    540.       
    541.       .review .box h3{
    542.         color:#333;
    543.         font-size: 1.5rem;
    544.       }
    545.       
    546.       .review .box p{
    547.         color:#666;
    548.         font-size: 1rem;
    549.         padding:1rem 0;
    550.       }
    551.       
    552.       .review .box .stars i{
    553.         color:#ffa500;
    554.         font-size: 1.5rem;
    555.       }
    556.  
    557.  
    558.       /* 品牌赞助 */
    559.       .brand-container{
    560.         width: 100%;
    561.         overflow: hidden;
    562.         text-align: center;
    563.       }
    564.  
    565.       /* 底部 */
    566.       .footer{
    567.         background:#333;
    568.       }
    569.       
    570.       .footer .box-container{
    571.         display: flex;
    572.         flex-wrap: wrap;
    573.         gap:1rem;
    574.       }
    575.       
    576.       .footer .box-container .box{
    577.         padding:1rem 0;
    578.         flex:1 1 12rem;
    579.       }
    580.       
    581.       .footer .box-container .box h3{
    582.         font-size: 1.5rem;
    583.         padding:.5rem 0;
    584.         color:#fff;
    585.       }
    586.       
    587.       .footer .box-container .box p{
    588.         font-size: 1.0rem;
    589.         padding:.5rem 0;
    590.         color:#eee;
    591.       }
    592.       
    593.       .footer .box-container .box a{
    594.         display: block;
    595.         font-size: 1rem;
    596.         padding:.5rem 0;
    597.         color:#eee;
    598.       }
    599.       
    600.       .footer .box-container .box a:hover{
    601.         color:#ffa500;
    602.         text-decoration: underline;
    603.       }
    604.       
    605.       .footer .credit{
    606.         text-align: center;
    607.         padding:1rem 0.5rem;
    608.         margin-top: 0.5rem;
    609.         font-size: 1rem;
    610.         font-weight: normal;
    611.         color:#fff;
    612.         border-top: .1rem solid rgba(255,255,255,.2);
    613.       }
    614.       
    615.       .footer .credit span{
    616.         color:#ffa500;
    617.       }
    618.  
    619.       /* 设配多端 */
    620.       #menu-bar{
    621.         color:#fff;
    622.         border:.1rem solid #fff;
    623.         border-radius: .5rem;
    624.         font-size: 1.5rem;
    625.         padding:.5rem 1rem;
    626.         cursor: pointer;
    627.         display: none;
    628.       }
    629.  
    630.       @media (max-width:1200px){
    631.  
    632.          html{
    633.           font-size: 80%;
    634.         } 
    635.       
    636.       }
    637.       
    638.       @media (max-width:768px){
    639.       
    640.         #menu-bar{
    641.           display: initial;
    642.         }
    643.       
    644.         header .navbar{
    645.           position: absolute;
    646.           top: -1000%; right:0; left: 0;
    647.           background: #333;
    648.           border-top: .1rem solid rgba(255,255,255,.2);
    649.           padding:1rem 1.5rem;
    650.         }
    651.       
    652.         header .navbar.active{
    653.            top: 100%;
    654.         }
    655.       
    656.         header .navbar a{
    657.           display: block;
    658.           border-radius: .5rem;
    659.           padding:1rem;
    660.           margin:1rem 0;    
    661.           background:#222;
    662.         }
    663.       
    664.       }
    665.       
    666.       @media (max-width:450px){
    667.       
    668.         html{
    669.           font-size: 60%;
    670.         }
    671.       
    672.  
    673.         .contact .row form .inputBox input{
    674.           width:100%;
    675.         }
    676.  
    677.         .footer  .box-container .box{
    678.           flex: 1 1 18rem;
    679.           padding: 1rem 0;
    680.           text-align: center;
    681.         }
    682.       
    683.       }

    JS

    1. let searchBtn = document.querySelector('#search-btn');
    2. let searchBar = document.querySelector('.search-bar-container');
    3. let formBtn = document.querySelector('#login-btn');
    4. let loginForm = document.querySelector('.login-form-container');
    5. let formClose = document.querySelector('#form-close');
    6. let menu = document.querySelector('#menu-bar');
    7. let navbar = document.querySelector('.navbar');
    8. let videoBtn = document.querySelectorAll('.vid-btn');
    9.  
    10. window.onscroll = () =>{
    11.     searchBtn.classList.remove('el-icon-close');
    12.     searchBar.classList.remove('active');
    13.     menu.classList.remove('el-icon-close');
    14.     navbar.classList.remove('active');
    15.     loginForm.classList.remove('active');
    16. }
    17.  
    18. searchBtn.addEventListener('click', () =>{
    19.     searchBtn.classList.toggle('el-icon-close');
    20.     searchBar.classList.toggle('active');
    21. });
    22.  
    23. formBtn.addEventListener('click', () =>{
    24.     loginForm.classList.add('active');
    25. });
    26.  
    27. formClose.addEventListener('click', () =>{
    28.     loginForm.classList.remove('active');
    29. });
    30.  
    31. videoBtn.forEach(btn =>{
    32.     btn.addEventListener('click', ()=>{
    33.         document.querySelector('.controls .active').classList.remove('active');
    34.         btn.classList.add('active');
    35.         let src = btn.getAttribute('data-src');
    36.         document.querySelector('#video-slider').src = src;
    37.     });
    38. });
    39.  
    40. var swiper1 = new Swiper(".review-slider", {
    41.     spaceBetween: 10,
    42.     loop:true,
    43.     autoplay: {
    44.         delay: 2500,
    45.         disableOnInteraction: false,
    46.     },
    47.     breakpoints: {
    48.         640: {
    49.           slidesPerView: 1,
    50.         },
    51.         768: {
    52.           slidesPerView: 2,
    53.         },
    54.         1024: {
    55.           slidesPerView: 3,
    56.         },
    57.     },
    58. });
    59.  
    60. var swiper2 = new Swiper(".brand-slider", {
    61.     spaceBetween: 20,
    62.     loop:true,
    63.     autoplay: {
    64.         delay: 2500,
    65.         disableOnInteraction: false,
    66.     },
    67.     breakpoints: {
    68.         450: {
    69.           slidesPerView: 2,
    70.         },
    71.         768: {
    72.           slidesPerView: 3,
    73.         },
    74.         991: {
    75.           slidesPerView: 4,
    76.         },
    77.         1200: {
    78.           slidesPerView: 5,
    79.         },
    80.       },
    81. });
    82.  
    83.  
    84. menu.addEventListener('click', () =>{
    85.   menu.classList.toggle('fa-times');
    86.   navbar.classList.toggle('active');
    87. });
    88.

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

  • 相关阅读:
    unix多进程多线程
    1.go语言vscode集成开发环境搭建
    Lambda
    2023最新UI酒桌喝酒游戏小程序源码 娱乐小程序源码 带流量主
    网络编程入门
    机器学习 之 客户分群案例
    Linux线程的概念
    三年精进笃行，用友YonSuite“数智飞轮”高速运转起来了！
    隆云通吸顶多参数传感器
    黑*头条_第4章_文章搜索前后端成形记 & 实名认证审核
  • 原文地址：https://blog.csdn.net/2302_78381559/article/details/139597315