Logo

菜单

发布于 2026-01-05 3 阅读
0

使用 HTML、CSS 和 Javascript 构建响应式旅游网站视频教程，开始吧！

使用 HTML、CSS 和 Javascript 构建的响应式旅游网站

视频教程

我们走吧

网站预览 GIF

本文将教你如何仅使用 HTML、CSS 和 Javascript 创建一个超棒的全响应式旅行网站。它不仅完全响应式，还具备滚动动画、平滑滚动、平铺式动画背景图片轮播等诸多功能。

您可以下载代码。

那么我们就不浪费时间了，直接来看看如何编写代码吧。

我们走吧

视频教程

如果您喜欢边看视频边跟着做，可以选择观看视频教程。

我们走吧

所以，要开始编写代码或阅读本文，首先需要设置文件夹。

在这个项目中，我们将使用Google Fonts 字体、AOS动画库和Fontawesome图标库。

所以你可以手动添加 CDN，也可以从这个仓库下载启动文件。

GitHub 仓库

仓库中还包含了所有图片。

希望你现在已经有了初始文件。我们先从导航栏开始。

导航栏

要创建导航栏，我们需要创建一个标题header，该标题将包含导航栏以及主要部分。

index.html


<header>
    <nav class="navbar">
        <ul class="links-container">
            <li class="link-item"><a href="#travel">Travel</a></li>
            <li class="link-item"><a href="#explore-section">Explore</a></li>
            <li class="link-item"><a href="#hero-section"><img src="img/logo.png" class="logo" alt=""></a></li>
            <li class="link-item"><a href="#services">Services</a></li>
            <li class="link-item"><a href="#booknow">Book Now</a></li>
        </ul>
    </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

href链接的值代表id我们接下来要创建的各个部分。ids点击链接后，您将被带到相应的部分。

但要为导航栏链接添加平滑滚动效果，请确保已将其添加scroll-behaviour到 HTML 代码中。

style.css


html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Poppins', sans-serif;
    background: #161813;
    overflow-x: hidden;
}

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100px;
    padding: 20px 10vw;
}

.navbar.bg{
    background: #161813;
}

.links-container{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

.logo{
    height: 50px;
    margin-top: 10px;
}

.link-item{
    margin: 0 20px;
    transition: .5s;
}

.link-item a{
    color: #fff;
    text-decoration: none;
    padding: 20px;
}

.link-item:hover{
    transform: scale(1.2);
}
Enter fullscreen mode Exit fullscreen mode
输出

导航栏

英雄篇

现在要创建英雄区域，我们将main在 header 中使用nav.

index.html


<main class="hero-section" id="hero-section">

    <div class="hero-section-content" data-aos="fade-up">
        <h1 class="hero-section-title">wonderful experience</h1>
        <p class="hero-section-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

    <!-- scroll down img -->
    <img src="img/down arrow.png" class="scroll-down-icon" alt="scroll down indicator">
</main>
Enter fullscreen mode Exit fullscreen mode

如果你仔细观察，会发现我data-aos在代码中使用了属性。这个属性是AOS库提供的自定义属性，用于添加滚动动画。在这个例子中，我添加了fade-up一个特效。不过，要让它生效，你需要配合 GitHub 仓库中提供的 CDNAOS.init()使用。app.js

请确保您已下载代码库以开始使用。

style.css


.hero-section{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.hero-section-title{
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 80px;
    text-align: center;
    text-transform: capitalize; 
}

.hero-section-sub-heading{
    text-align: center;
    text-transform: capitalize;
    margin: 20px 0;
    font-size: 20px;
}

.scroll-down-icon{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    animation: down ease 1s infinite;
}

@keyframes down{
    from { bottom: 10% }
    to { bottom: 8% }
}
Enter fullscreen mode Exit fullscreen mode
输出

英雄篇

现在来说说整个网站最精彩的部分——背景图片轮播。

图片轮播

img要创建图片轮播，首先在内容下方创建一个元素，然后在上方以网格形式img创建 6divs个背景元素black。这些 div 元素会在需要时覆盖整个图片。所以基本上，我们会显示和隐藏这些 div 元素，并在两者之间使用 JavaScript 切换背景图片。

为此，请在之前.background在内部创建一个div 。mainhero-section-content

index.html


<div class="background">
    <img src="img/img1.png" class="background-image" alt="hero-section image">

    <!-- grid -->
    <div class="grid-slider">
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
    </div>

</div>
Enter fullscreen mode Exit fullscreen mode

并列举一些风格。



.background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.background::before, .background::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
}

.background::before{
    top: 0;
    left: 0;
    background: var(--gradient-top);
}

.background::after{
    bottom: 0;
    background: var(--gradient-bottom);
}

.grid-slider{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.grid-item{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 1;
    transition: .5s;
}

.grid-item.hide{
    opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

如果你查看上面的代码，你会发现我使用了 `[]`::before和::after`[]` 在图像上创建了一些线性渐变来营造深度感。我使用的变量位于仓库的 CSS 文件中。

输出

背景图片

现在要让这个滑块正常工作，只需将这段简单的 JS 代码添加到app.js文件中即可。



//header

// slider images array

const sliderImgs = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png", "img6.png"];
let sliderImage = document.querySelector('.background-image');
let sliderGrids = [...document.querySelectorAll('.grid-item')];

let currentImage = 0;

setInterval(() => {
    changeSliderImage();
}, 5000);

const changeSliderImage = () => {
    sliderGrids.map((gridItem, index) => {
        setTimeout(() => {
            gridItem.classList.remove('hide');

            setTimeout(() => {

                if(index == sliderGrids.length - 1){
                    if(currentImage >= sliderImgs.length - 1){
                        currentImage = 0;
                    } else{
                        currentImage++;
                    }

                    sliderImage.src = `img/${sliderImgs[currentImage]}`;

                    sliderGrids.map((item, i) => {
                        setTimeout(() => {
                            item.classList.add('hide')
                        }, i * 100);
                    })

                }

            }, 100);

        }, index * 100);
    })
}
Enter fullscreen mode Exit fullscreen mode

添加此代码后，滑块即可正常工作。上面的代码基本上是利用超时机制来隐藏和显示这 6 个 div 元素，并在两次显示之间切换src图片。

输出

滑块

探索部分

创建下一个部分，即“探索部分”，其实很简单。只需将以下内容添加到index.html文件中即可。

index.html


<section class="explore-section" id="explore-section">
    <h1 class="section-title" data-aos="fade-up">Explore the world</h1>
    <p class="section-para" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum
        sem augue, vitae bibendum nibh tempor nec. Aenean quis commodo lectus, in rhoncus lorem</p>

    <!-- grid -->

    <div class="tours-container">
        <div class="tour-card" data-aos="fade-up">
            <img src="img/australia.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Australia</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/maldives.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Maldives</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/paris.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Paris</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/dubai.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Dubai</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/india.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">India</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/italy.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Italy</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode
style.css


/* explore section */

.explore-section{
    position: relative;
    width: 100%;
    padding: 80px 10vw;
    color: #fff;
}

.section-title{
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
}

.section-para{
    width: 50%;
    min-width: 300px;
    display: block;
    margin: 30px auto;
    text-align: center;
    line-height: 25px;
    opacity: 0.6;
}

.tours-container{
    position: relative;
    width: 100%;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
    margin-top: 100px;
}

.tour-card{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    box-shadow: 0;
    overflow: hidden;
    padding: 10px;
    display: flex;
    align-items: end;
}

.tour-card:nth-child(2){
    grid-row: span 2;
}

.tour-card:last-child{
    grid-column: span 2;
}

.tour-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
    z-index: -1;
}

.tour-card:hover .tour-img{
    opacity: 0.8;
    transform: scale(1.1);
}

.tour-name{
    font-weight: 300;
}

.tour-action{
    margin-left: 20px;
    font-size: 14px;
    position: relative;
}

.tour-action::before{
    content: '';
    position: absolute;
    left: -20px;
    top: 2px;
    background: url('img/pin.png');
    width: 15px;
    height: 15px;
    background-size: contain;
}
Enter fullscreen mode Exit fullscreen mode
输出

探索

如果您查看输出结果，会发现导航栏和探索部分重叠在一起，导致导航栏内容无法完全阅读。为了解决这个问题，我们需要使用 JavaScript 在滚动一定距离后为导航栏添加背景。

app.js


// nav

const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
    if(scrollY >= 188){
        navbar.classList.add('bg');
    } else{
        navbar.classList.remove('bg')
    }
})
Enter fullscreen mode Exit fullscreen mode

添加此内容后，您将在滚动 Y 轴 188 行后看到导航栏的背景颜色发生变化。

服务部门

本节中，我使用了 Font Awesome 作为图标，因此请确保您已安装其 CDN，以便在您的代码中看到这些图标。

index.html


<section class="services-section" id="services">
    <h1 class="section-title" data-aos="fade-up">Why Us ?</h1>
    <p class="section-para" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

    <!-- services grid -->
    <div class="serives-grid">
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-earth-americas card-icon"></i>
            <p class="service-text">We are based all over the world</p>
        </div>
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-coins card-icon"></i>
            <p class="service-text">Travel the World,Without thinking</p>
        </div>
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-book-open card-icon"></i>
            <p class="service-text">Get to know about local cultures</p>
        </div>
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-person-snowboarding card-icon"></i>
            <p class="service-text">Have you best experience</p>
        </div>
    </div>

    <div class="bg-circle"></div>

    <div class="travel-grid" id="travel">
        <img src="img/img1.png" data-aos="fade-up" alt="">
        <img src="img/img2.png" data-aos="fade-up" alt="">
        <img src="img/img3.png" data-aos="fade-up" alt="">
        <img src="img/img4.png" data-aos="fade-up" alt="">
        <img src="img/img5.png" data-aos="fade-up" alt="">
        <img src="img/img6.png" data-aos="fade-up" alt="">
        <img src="img/australia.png" data-aos="fade-up" alt="">
        <img src="img/dubai.png" data-aos="fade-up" alt="">
        <img src="img/maldives.png" data-aos="fade-up" alt="">
        <img src="img/paris.png" data-aos="fade-up" alt="">
        <img src="img/india.png" data-aos="fade-up" alt="">
        <img src="img/italy.png" data-aos="fade-up" alt="">
    </div>

</section>
Enter fullscreen mode Exit fullscreen mode
style.css


/* services section */

.services-section{
    color: #fff;
    padding: 80px 10vw;
}

.serives-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.service-card{
    margin-top: 100px;
    width: 100%;
    height: 250px;
    border-radius: 20px;
    border: 1px solid #2D2D2D;
    background: #161813;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
    position: relative;
}

.card-icon{
    text-align: center;
    font-size: 60px;
    z-index: 1;
}

.service-text{
    text-align: center;
    padding: 0 20px;
    z-index: 1;
}

.circle{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    clip-path: circle(0% at 100% 100%);
    transition: .5s;
}

.service-card:nth-child(1) .circle{
    background: url(img/img5.png);
    background-size: cover;
}

.service-card:nth-child(2) .circle{
    background: url(img/img2.png);
    background-size: cover;
}

.service-card:nth-child(3) .circle{
    background: url(img/img6.png);
    background-size: cover;
}

.service-card:nth-child(4) .circle{
    background: url(img/img4.png);
    background-size: cover;
}

.service-card:hover .circle{
    clip-path: circle(141.4% at 100% 100%);
}

.travel-grid{
    width: 100%;
    columns: 3;
    column-gap: 20px;
    margin-top: 200px;
}

.travel-grid img{
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 10px;
}

.bg-circle{
    z-index: -1;
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--sphere-gradient-one);
    right: -250px;
}
Enter fullscreen mode Exit fullscreen mode
输出

服务

书籍章节和页脚

最后但同样重要的是，立即预订和页脚。

index.html


<!-- contact section -->
<section class="book-section" id="booknow">
    <div class="book-content" data-aos="fade-up">
        <h1 class="book-now-title">Book your travel today</h1>
        <p class="book-now-text">Give yourself and your family a peacfull and wonderful vacation this holiday</p>

        <button class="book-now">book now</button>
    </div>
    <div class="bg-circle-2"></div>
    <img src="img/book.png" data-aos="fade-up" class="book-now-img" alt="">
</section>

<!-- footer -->
<footer class="footer">
    <img src="img/logo.png" class="footer-logo" alt="">
    <div class="footer-text">
        <p>Travel the world, on this holiday</p>
        <p>Email - support@travel.com</p>
        <p>Phone - 99 88 776655, 99 88 776644</p>
    </div>
    <p class="copyright-line">This design is a concept design. Made by Modern Web ❤️</p>
</footer>
Enter fullscreen mode Exit fullscreen mode
style.css


/* book now section */

.book-section{
    position: relative;
    display: flex;
    padding: 0 10vw;
    align-items: center;
    width: 100%;
    height: 100vh;
    gap: 30px;
}

.book-now-img{
    position: absolute;
    width: 50%;
    right: 0;
}

.book-content{
    width: 50%;
    color: #fff;
}

.book-now-title{
    font-size: 50px;
    font-weight: 300;
    width: 300px;
}

.book-now-text{
    width: 300px;
    opacity: 0.5;
    line-height: 25px;
    margin: 30px 0;
}

.book-now{
    position: relative;
    padding: 10px 20px;
    outline: none;
    border: none;
    background: #000;
    text-transform: capitalize;
    color: #fff;
    border-radius: 20px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 18px;
    cursor: pointer;
    overflow: hidden;
}

.book-now::before{
    content: '';
    position: absolute;
    top: -10px;
    left: -30px;
    width: 20px;
    height: 200%;
    background: #fff;
    opacity: 0.2;
    transform: rotate(5deg);
    transition: .5s;
}

.book-now:hover::before{
    left: 100%;
}

.bg-circle-2{
    z-index: -1;
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background:  var(--sphere-gradient-two);
    left: -125px;
    bottom: -100px;
}

.footer{
    width: 100%;
    padding: 100px 10vw;
    background: #000;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.footer-logo{
    width: 100px;
    opacity: 0.3;
}

.footer-text{
    color: #fff;
    opacity: 0.5;
    font-size: 20px;
}

.footer-text p{
    margin: 20px 0;
}

.copyright-line{
    width: 100%;
    background: #000;
    color: #fff;
    text-transform: capitalize;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 0;
}
Enter fullscreen mode Exit fullscreen mode
输出

最后一部分

好了，现在要做的就是让这个网站具有响应式设计。只需media-query像这样使用CSS即可。

style.css


/* tab view */

@media screen and (max-width: 996px) {
    .link-item{
        margin: 0 10px;
    }
    .hero-section-title{
        font-size: 60px;
    }
    .tours-container{
        height: 900px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    .tour-card:last-child{
        grid-column: span 1;
    }
    .tour-card:nth-child(3){
        grid-row: span 2;
    }
    .serives-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .service-card:nth-child(3), .service-card:nth-child(4){
        margin-top: 0;
    }
    .travel-grid{
        columns: 2;
    }
    .book-now-img{
        width: 40%;
    }
    .footer-logo{
        width: 70px;
    }
    .footer-text{
        font-size: 16px;
    }
}

/* much smaller device */

@media screen and (max-width:798px){
    .navbar{
        height: auto;
    }

    .link-item{
        margin-top: 80px;
        text-align: center;
    }
    .link-item:nth-child(3){
        margin: -50px -30px 0 -30px;
    }
    .link-item a{
        padding: 10px;
        margin: auto;
        display: block;
    }

    .section-title{
        font-size: 50px;
    }
    .grid-slider{
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-section-sub-heading{
        font-size: 16px;
    }
    .section-para{
        width: 100%;
    }
    .tours-container{
        height: 1200px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
    .tour-card:nth-child(2){
        grid-row: auto;
    }
    .tour-card:last-child{
        grid-column: span 1;
    }
    .tour-card:nth-child(3){
        grid-row: span 1;
    }
    .serives-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .service-card:nth-child(2){
        margin-top: 0;
    }
    .travel-grid{
        columns: 1;
    }
    .book-section{
        height: auto;
        padding: 80px 10vw;
    }
    .bg-circle{
        display: none;
    }
    .bg-circle-2{
        z-index: 2;
    }
    .book-now-img{
        width: 100%;
        opacity: 0.3 !important;
    }
    .book-content{
        width: 100%;
        z-index: 2;
        text-align: center;
    }
    .book-now-title, .book-now-text{
        width: 100%;
    }
}
Enter fullscreen mode Exit fullscreen mode

网站已经完成了。现在它也完全响应式了。

好了，我们已经完成了，这个超棒的响应式旅行网站已经制作完成。如果您在操作过程中遇到任何问题或错误，欢迎留言或在Instagram上私信我。

希望您喜欢这篇文章、网站设计和教程。如果这篇文章对您有所帮助，请务必在我的Instagram和YouTube上关注我。

你可以看看我的YouTube频道，我创作了很多类似的内容，包括全栈电子商务网站和全栈博客网站。

您可以下载代码。感谢阅读👋

文章来源：https://dev.to/themodernweb/responsive-website-using-css-and-js-full-of-animations-3ico
向2020届毕业生致敬！
在 React 中切换深色模式