H5静态网页设计与制作_川西旅游网设计作品（HTML+CSS+jQuery）

这是一个关于川西旅游的大学生网页作业，采用flex布局，包含轮播、选项卡切换等特效。作品包括首页、列表页和内容页，使用vscode编辑，提供源码下载，并解答常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【导语】大学生网页作业旅游网一共5种不同页面样式，川西旅游题材并采用flex布局方式，内置轮播、选项卡切换、css动效、缩略图移入放大等多种特效。不仅如此，还有网页截图展示，源码在线下载，在线解答常见问题多种干货大学生网页作业等你来下。

一、文章目录

作品介绍
作品截图
代码实现
获取源码
常见问答
更多干货

二、作品介绍

题目：大学生网页作业旅游网
题材：川西旅游
布局方式：flex布局，浮动布局
特效：轮播、选项卡切换、css动效、缩略图移入放大
主要技术：flex弹性盒布局，float浮动布局，swiper、superslide插件
编辑器：vscode（Chinese、Easy LESS、Live Server）

二、作品截图

首页

云曦模板_HTML川西旅游网——首页
2. 列表页
在这里插入图片描述
3. 内容页

三、代码实现

代码目录
- index.html
- list.html
- show.html

HTML首页部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xx旅游网</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="head-top">
            <div class="w">
                <p>欢迎来到xx旅游网</p>

                <form action="" method="get">
                    <input type="text" placeholder="请输入热门景点">

                    <button type="button">
            <img src="./images/search.png" alt="">
          </button>
                </form>
            </div>
        </div>

        <div class="head-con w">
            <div class="logo">
                <a href="/"><img src="./images/logo.png" alt=""></a>
            </div>

            <nav>
                <ul class="nav-box">
                    <li>
                        <a href="">首页</a>
                    </li>

                    <li>
                        <a href="">热门景点</a>
                    </li>

                    <li>
                        <a href="">旅游攻略</a>
                    </li>

                    <li>
                        <a href="">打卡瞬间</a>
                    </li>
                </ul>
            </nav>
        </div>

    </header>

    <!-- 内容 -->
    <section>

        <div class="swiper">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="w">
                            <img src="./images/1.jpg" alt="">
                            <a class="more" href="">点击了解详情</a>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="w">
                            <img src="./images/2.jpg" alt="">
                            <a class="more" href="">点击了解详情</a>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="w">
                            <img src="./images/3.jpg" alt="">
                            <a class="more" href="">点击了解详情</a>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="tabbox w">
            <div class="hd">
                <ul>
                    <li class="on">
                        <img src="./images/tab-ico1.svg" alt=""> <img src="./images/tab-1.svg" alt=""> 热门景点
                    </li>

                    <li>
                        <img src="./images/tab-ico1.svg" alt=""> <img src="./images/tab-1.svg" alt=""> 打卡必去
                    </li>

                    <li>
                        <img src="./images/tab-ico1.svg" alt=""> <img src="./images/tab-1.svg" alt=""> 精彩瞬间
                    </li>
                </ul>
            </div>

            <div class="bd">
                <ul class="clear">
                    <li>
                        <a href="">
                            <img src="./images/c1.jpg" alt="">
                            <div class="text-box">
                                <h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3>
                                <p class="text-hid">
                                    <span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。
                                </p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="">
                            <img src="./images/c2.jpg" alt="">
                            <div class="text-box">
                                <h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3>
                                <p class="text-hid">
                                    <span>07-01</span> 在这里可以看见绵延挺拔的雪山高峰、可以看见千姿百态，惊艳璀璨的冰川，还有五彩斑斓，生机勃勃的原始森林，漫步林中是在纯天然的冰雪王国了。
                                </p>
                            </div>
                        </a>
                    </li>


                    <li>
                        <a href="">
                            <img src="./images/c3.jpg" alt="">
                            <div class="text-box">
                                <h3 class="text-hid">2022川西旅游攻略来袭，打卡点已刷新</h3>
                                <p class="text-hid">