云南旅游主题网页源码（大作业html）

原创已于 2025-05-11 09:19:02 修改 · 388 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#前端 #html5 #课程设计 #html
于 2025-05-11 09:12:06 首次发布
前端同时被 2 个专栏收录
20 篇文章
订阅专栏
前端demo
14 篇文章
订阅专栏
这是网页！不是在宣传，这个网页作业！！！！

这是网页！不是在宣传，这个网页作业！！！！

这是网页！不是在宣传，这个网页作业！！！！

「云南旅游网页」
链接：https://pan.quark.cn/s/970efa15f75d

链接：https://pan.quark.cn/s/970efa15f75d

链接：https://pan.quark.cn/s/970efa15f75d
之前代做的大作业（doge），全部放出来，放着也是吃灰~

纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七彩云南 - 发现最美的旅行</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #e74c3c;
            --secondary-color: #2ecc71;
        }

/* 自定义导航栏 */
.navbar {
    transition: all 0.3s;
    background-color: white;
    border-bottom: 1px solid #eee;
}
.navbar-scrolled {
    background: white !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

        /* 轮播图优化 */
        .carousel-item {
            height: 80vh;
            min-height: 400px;
        }
        .carousel-item img {
            height: 100%;
            object-fit: cover;
            filter: brightness(0.6);
        }

        /* 特色卡片 */
        .feature-card {
            transition: transform 0.3s;
            overflow: hidden;
            border: none;
            border-radius: 15px;
        }
        .feature-card:hover {
            transform: translateY(-10px);
        }
        .feature-card img {
            height: 250px;
            object-fit: cover;
        }

        /* 景点推荐 */
        .spot-card {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }
        .spot-card img {
            height: 300px;
            object-fit: cover;
            transition: transform 0.3s;
        }
        .spot-overlay {
            position: absolute;
            bottom: -100%;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            color: white;
            transition: all 0.3s;
            padding: 20px;
        }
        .spot-card:hover .spot-overlay {
            bottom: 0;
        }

        /* 数据统计 */
        .counter-box {
            border-left: 3px solid var(--primary-color);
            padding-left: 30px;
            margin: 20px 0;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .carousel-item {
                height: 60vh;
            }
            .feature-card {
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#mainNav">

<!-- 导航栏 -->
<nav id="mainNav" class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/logo.png" alt="logo" style="height:40px;"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link active text-dark" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link text-dark" href="spots.html">景点推荐</a></li>
                <li class="nav-item"><a class="nav-link text-dark" href="culture.html">民族文化</a></li>
                <li class="nav-item"><a class="nav-link text-dark" href="routes.html">行程路线</a></li>
                <li class="nav-item"><a class="nav-link text-dark" href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- 轮播图 -->
<div id="homeCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#homeCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#homeCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#homeCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/111.jfif" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block">
                <h2>探索云南秘境</h2>
                <p>发现最壮丽的山川美景</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/222.jpeg" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block">
                <h2>多彩民族文化</h2>
                <p>感受25个少数民族的风情</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/333.jpg" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block">
                <h2>云南特色美食</h2>
                <p>开启味蕾的奇妙旅程</p>
            </div>
        </div>
    </div>
</div>

<!-- 特色板块 -->
<section class="container py-5">
    <div class="row g-4">
        <div class="col-md-4">
            <div class="feature-card card h-100 shadow">
                <img src="img/444.jfif" class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">古镇漫游</h5>
                    <p class="card-text">漫步丽江、大理古城，感受时光停驻的美好</p>
                    <a href="#" class="btn btn-primary">探索路线</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="feature-card card h-100 shadow">
                <img src="img/5555.jpg" class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">茶马古道</h5>
                    <p class="card-text">体验千年茶文化，探访普洱原产地</p>
                    <a href="#" class="btn btn-primary">文化之旅</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="feature-card card h-100 shadow">
                <img src="img/666.jpg" class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">梯田奇观</h5>
                    <p class="card-text">元阳梯田，大地雕刻的艺术品</p>
                    <a href="#" class="btn btn-primary">摄影指南</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 景点推荐 -->
<section class="bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-5">热门景点推荐</h2>
        <div class="row g-4">
            <div class="col-md-3 col-6">
                <div class="spot-card">
                    <img src="img/1.jpg" class="w-100">
                    <div class="spot-overlay">
                        <h5>玉龙雪山</h5>
                        <p>遗落人间的冰雪仙境</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="spot-card">
                    <img src="img/7777.jfif" class="w-100">
                    <div class="spot-overlay">
                        <h5>香格里拉</h5>
                        <p>梦中的净土桃源</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="spot-card">
                    <img src="img/888.jpg" class="w-100">
                    <div class="spot-overlay">
                        <h5>泸沽湖</h5>
                        <p>湖光山色间的神秘之境</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="spot-card">
                    <img src="img/999.webp" class="w-100">
                    <div class="spot-overlay">
                        <h5>丽江古城</h5>
                        <p>岁月沉淀的诗意街巷</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="spot-card">
                    <img src="img/2.jpg" class="w-100">
                    <div class="spot-overlay">
                        <h5>大理洱海</h5>
                        <p>风花雪月里的浪漫之湖</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="spot-card">
                    <img src="img/3.webp" class="w-100">
                    <div class="spot-overlay">
                        <h5>虎跳峡</h5>
                        <p>江水奔腾的激昂峡谷</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- 数据统计 -->
<section class="py-5 bg-dark text-white">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3">
                <div class="counter-box">
                    <h3 class="counter" data-target="25">0</h3>
                    <p>少数民族</p>
                </div>
            </div>
        </div>
    </div>
</section>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    // 导航栏滚动效果
    $(window).scroll(function(){
        $('.navbar').toggleClass('navbar-scrolled', $(this).scrollTop() > 50);
    });

    // 计数器动画
    $('.counter').each(function() {
        $(this).prop('Counter',0).animate({
            Counter: $(this).data('target')
        },{
            duration: 2000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });

    // 图片悬停效果
    $('.spot-card').hover(
        function() { $(this).find('img').css('transform', 'scale(1.05)'); },
        function() { $(this).find('img').css('transform', 'scale(1)'); }
    );
</script>

</body>
</html>