CSS+Div景区网站模板如何快速搭建？-网站模板-锦华智联科技

模板特点

响应式设计: 适配桌面、平板和手机等各种设备。
现代美观: 使用了卡片式布局、柔和的阴影和流畅的过渡效果。
模块化结构: 页面分为清晰的几个部分,易于理解和修改。
易于定制: 使用 CSS 变量来管理颜色、字体等主题,方便一键更换风格。
纯前端实现: 不依赖 JavaScript（除了轮播图部分，我会提供一个纯CSS的替代方案和JS的增强方案），结构清晰,加载速度快。

最终效果预览

这是一个静态模板的示意图，您可以复制下面的代码到 HTML 文件中,在浏览器中打开查看实际效果。

（图片来源网络，侵删）

顶部: Logo、导航菜单、搜索和用户图标。
横幅: 大图展示景区特色,带有吸引人的标题和行动号召按钮。
特色介绍: 以卡片形式展示景区的几个核心亮点。
景点画廊: 图片网格,展示不同景点的照片。
游客评价: 展示来自游客的正面评价。
最新资讯: 展示景区的新闻或活动。
页脚: 包含联系方式、快速链接、社交媒体图标和版权信息。

完整代码

您可以将以下所有代码复制到一个 .html 文件中（index.html）,然后直接在浏览器中打开。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">山水间 - 您的梦幻之旅</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* --- 全局和变量定义 --- */
        :root {
            --primary-color: #2c7a7b; /* 主色调，青绿色 */
            --secondary-color: #38b2ac; /* 次要色调，青色 */
            --text-dark: #2d3748;      /* 深色文字 */
            --text-light: #718096;     /* 浅色文字 */
            --bg-light: #f7fafc;       /* 浅色背景 */
            --white: #ffffff;          /* 白色 */
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1); /* 悬停阴影 */
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
        }
        .container {
            max-width: 1100px;
            margin: auto;
            padding: 0 20px;
            overflow: hidden;
        }
        h1, h2, h3 {
            margin-bottom: 1rem;
            color: var(--text-dark);
        }
        h2 {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--secondary-color);
            margin: 0 auto 1rem;
            border-radius: 2px;
        }
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        a:hover {
            color: var(--secondary-color);
        }
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--white);
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s ease, transform 0.2s ease;
        }
        .btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }
        .section {
            padding: 60px 0;
        }
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }
        /* --- 导航栏 --- */
        #main-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            background: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links li {
            padding: 0 15px;
        }
        .nav-links a {
            color: var(--text-dark);
            font-weight: 500;
        }
        .nav-icons {
            display: flex;
            gap: 15px;
        }
        .nav-icons i {
            font-size: 1.2rem;
            color: var(--text-light);
            cursor: pointer;
        }
        .nav-icons i:hover {
            color: var(--primary-color);
        }
        /* --- 横幅 --- */
        #banner {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center/cover;
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
        }
        .banner-content h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }
        .banner-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        /* --- 特色介绍 --- */
        #features {
            background: var(--bg-light);
        }
        .features-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        .feature-card {
            background: var(--white);
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }
        .feature-card i {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        /* --- 景点画廊 --- */
        #gallery {
            background: var(--white);
        }
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: var(--shadow);
            cursor: pointer;
        }
        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: var(--white);
            padding: 15px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        .gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
        /* --- 游客评价 --- */
        #testimonials {
            background: var(--bg-light);
        }
        .testimonials-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .testimonial-card {
            background: var(--white);
            padding: 25px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            text-align: center;
        }
        .testimonial-card img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 15px;
            object-fit: cover;
        }
        .testimonial-text {
            font-style: italic;
            margin-bottom: 15px;
            color: var(--text-light);
        }
        .testimonial-author {
            font-weight: bold;
            color: var(--text-dark);
        }
        .stars {
            color: #fbbf24; /* 黄色 */
            margin-bottom: 15px;
        }
        /* --- 最新资讯 --- */
        #news {
            background: var(--white);
        }
        .news-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        .news-card {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        .news-card:hover {
            transform: translateY(-5px);
        }
        .news-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .news-content {
            padding: 20px;
        }
        .news-date {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        /* --- 页脚 --- */
        #main-footer {
            background: var(--text-dark);
            color: var(--white);
            padding: 60px 0 20px;
        }
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        .footer-about p, .footer-links ul, .footer-contact p {
            margin-bottom: 15px;
        }
        .footer-links ul {
            list-style: none;
        }
        .footer-links a {
            color: #cbd5e0;
        }
        .footer-links a:hover {
            color: var(--secondary-color);
        }
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        .social-icons i {
            font-size: 1.5rem;
            color: #cbd5e0;
            transition: color 0.3s ease;
        }
        .social-icons i:hover {
            color: var(--secondary-color);
        }
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #4a5568;
            font-size: 0.9rem;
            color: #a0aec0;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            .nav-links, .nav-icons {
                display: none; /* 在移动端隐藏导航链接和图标，可以配合汉堡菜单使用 */
            }
            .banner-content h1 {
                font-size: 2.5rem;
            }
            h2 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header id="main-nav">
        <div class="container">
            <a href="#" class="logo">山水间</a>
            <ul class="nav-links">
                <li><a href="#banner">首页</a></li>
                <li><a href="#features">景区特色</a></li>
                <li><a href="#gallery">景点画廊</a></li>
                <li><a href="#testimonials">游客评价</a></li>
                <li><a href="#news">最新资讯</a></li>
                <li><a href="#main-footer">联系我们</a></li>
            </ul>
            <div class="nav-icons">
                <a href="#"><i class="fas fa-search"></i></a>
                <a href="#"><i class="fas fa-user"></i></a>
            </div>
        </div>
    </header>
    <main>
        <!-- 横幅 -->
        <section id="banner">
            <div class="container">
                <div class="banner-content">
                    <h1>探索自然，放松身心</h1>
                    <p>在山水间，发现最美的风景，体验最纯粹的宁静</p>
                    <a href="#" class="btn">立即预订</a>
                </div>
            </div>
        </section>
        <!-- 特色介绍 -->
        <section id="features" class="section">
            <div class="container">
                <h2 class="section-title">景区特色</h2>
                <div class="features-container">
                    <div class="feature-card">
                        <i class="fas fa-mountain"></i>
                        <h3>雄奇山峰</h3>
                        <p>巍峨的山峦层峦叠嶂，云雾缭绕，让您感受大自然的鬼斧神工。</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-water"></i>
                        <h3>清澈溪流</h3>
                        <p>潺潺流水，清澈见底，是您夏日戏水、垂钓的绝佳去处。</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-tree"></i>
                        <h3>茂密森林</h3>
                        <p>负氧离子爆棚的天然氧吧，漫步林间，呼吸最新鲜的空气。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 景点画廊 -->
        <section id="gallery" class="section">
            <div class="container">
                <h2 class="section-title">景点画廊</h2>
                <div class="gallery-container">
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="主峰风光">
                        <div class="gallery-overlay">
                            <h3>主峰风光</h3>
                            <p>登顶主峰，俯瞰群山，心旷神怡。</p>
                        </div>
                    </div>
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1544735716-392fe2489ffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="云海奇观">
                        <div class="gallery-overlay">
                            <h3>云海奇观</h3>
                            <p>雨后初晴，云海翻腾，如梦似幻。</p>
                        </div>
                    </div>
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="古寺禅音">
                        <div class="gallery-overlay">
                            <h3>古寺禅音</h3>
                            <p>千年古刹，晨钟暮鼓，洗涤心灵。</p>
                        </div>
                    </div>
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="溪流瀑布">
                        <div class="gallery-overlay">
                            <h3>溪流瀑布</h3>
                            <p>飞流直下三千尺，疑是银河落九天。</p>
                        </div>
                    </div>
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="花海秘境">
                        <div class="gallery-overlay">
                            <h3>花海秘境</h3>
                            <p>四季花开，芬芳满园，是摄影爱好者的天堂。</p>
                        </div>
                    </div>
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="星空营地">
                        <div class="gallery-overlay">
                            <h3>星空营地</h3>
                            <p>远离城市光害，抬头便是璀璨银河。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 游客评价 -->
        <section id="testimonials" class="section">
            <div class="container">
                <h2 class="section-title">游客评价</h2>
                <div class="testimonials-container">
                    <div class="testimonial-card">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="游客头像">
                        <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="fas fa-star"></i>
                        </div>
                        <p class="testimonial-text">"这里的风景真的太美了！空气清新，让人感觉整个人都放松了，强烈推荐给所有想逃离城市喧嚣的朋友。"</p>
                        <p class="testimonial-author">- 李小姐</p>
                    </div>
                    <div class="testimonial-card">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="游客头像">
                        <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="fas fa-star"></i>
                        </div>
                        <p class="testimonial-text">"带着家人来玩，孩子们在溪边玩得不亦乐乎，服务也很周到，下次一定还会再来。"</p>
                        <p class="testimonial-author">- 王先生</p>
                    </div>
                    <div class="testimonial-card">
                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="游客头像">
                        <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>
                        <p class="testimonial-text">"摄影爱好者的天堂！光线、构图，每一处都是大片，缆车和栈道修得也很好，很安全。"</p>
                        <p class="testimonial-author">- 张老师</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 最新资讯 -->
        <section id="news" class="section">
            <div class="container">
                <h2 class="section-title">最新资讯</h2>
                <div class="news-container">
                    <div class="news-card">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="新闻图片">
                        <div class="news-content">
                            <p class="news-date">2025年10月26日</p>
                            <h3>国庆黄金周圆满落幕，感谢您的陪伴</h3>
                            <p>回顾黄金周的精彩瞬间，我们与您共同创造了美好的回忆...</p>
                            <a href="#">阅读更多</a>
                        </div>
                    </div>
                    <div class="news-card">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="新闻图片">
                        <div class="news-content">
                            <p class="news-date">2025年10月15日</p>
                            <h3>冬季旅游优惠政策正式发布</h3>
                            <p>为了回馈广大游客，景区决定在11月至次年2月推出门票折扣...</p>
                            <a href="#">阅读更多</a>
                        </div>
                    </div>
                    <div class="news-card">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="新闻图片">
                        <div class="news-content">
                            <p class="news-date">2025年9月30日</p>
                            <h3>全新观光索道正式投入运营</h3>
                            <p>历时一年建设，全新的观光索道将于10月1日正式对游客开放...</p>
                            <a href="#">阅读更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer id="main-footer">
        <div class="container">
            <div class="footer-container">
                <div class="footer-about">
                    <h3>关于山水间</h3>
                    <p>山水间景区致力于为游客提供最原生态的自然风光和最贴心的旅游服务，我们期待您的光临，与您一同探索大自然的奥秘。</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="#">门票预订</a></li>
                        <li><a href="#">交通指南</a></li>
                        <li><a href="#">酒店住宿</a></li>
                        <li><a href="#">旅游攻略</a></li>
                        <li><a href="#">常见问题</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-map-marker-alt"></i> 中国·XX省·XX市·XX区山水大道1号</p>
                    <p><i class="fas fa-phone"></i> 客服热线: 400-123-4567</p>
                    <p><i class="fas fa-envelope"></i> 邮箱: info@shan-shuijian.com</p>
                    <p><i class="fas fa-clock"></i> 营业时间: 08:00 - 18:00</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 山水间旅游景区. 保留所有权利. | <a href="#">隐私政策</a> | <a href="#">使用条款</a></p>
            </div>
        </div>
    </footer>
</body>
</html>

如何使用和定制这个模板

替换图片:
- 横幅图片：找到 url('https://...') 并替换为您自己的横幅图片链接。
- 景点画廊图片：替换 <img src="..."> 中的 src 属性为您自己的图片。
- 游客评价头像：可以替换为真实游客的照片或使用 https://randomuser.me/api/ 这样的服务生成随机头像。
- 新闻图片：同样替换为您自己的新闻配图。
修改文字内容:
- 直接在 HTML 文件中修改 <h1>, <p>, <a> 等标签内的文字，如“山水间”、“探索自然，放松身心”等。
更改颜色主题:
（图片来源网络，侵删）
- 在 <style> 标签的开头，找到 root 选择器。
- 修改 CSS 变量的值即可，将 --primary-color: #2c7a7b; 改成您喜欢的颜色,整个网站的主色调就会随之改变。
添加更多页面:
- 这个模板是 index.html（首页），您可以创建 about.html（关于我们）、gallery.html（景点详情页）、contact.html（联系我们）等。
- 为了保持网站风格统一，请将 #main-nav 和 #main-footer 部分复制到其他所有页面中。

进阶功能建议

JavaScript 交互:
- 轮播图: 为横幅或新闻模块添加一个自动播放的图片轮播效果。
- 表单验证: 在“联系我们”页面添加一个联系表单，并用 JavaScript 进行简单的输入验证。
- 移动端菜单: 为移动端添加一个“汉堡菜单”,点击后展开导航链接。
- 平滑滚动: 让点击导航链接时，页面能平滑地滚动到对应部分,而不是瞬间跳转。
后端集成:

当网站功能复杂后，可以将前端与后端（如 Node.js, Python, PHP）结合，实现用户注册登录、门票在线购买、订单管理等功能。
（图片来源网络，侵删）