before-web
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.mousewheel.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./js/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <section>
        <header>
            <h1 class="logo">
                <a href="javascript:;">
                    <img src="./images/logo.png" alt="">
                </a>
            </h1>
            <h3>冷昌法 2215 10</h3>
            <ul class="nav">
                <li>
                    <a href="javascript:;">
                        <!-- 未点击 -->
                        <img src="./images/home.png" alt="">
                        <!-- 点击显示 -->
                        <img src="./images/home_gruen.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">历史</a>
                </li>
                <li>
                    <a href="javascript:;">美食</a>
                </li>
                <li>
                    <a href="javascript:;">景点</a>
                </li>
                <li>
                    <a href="javascript:;">名人</a>
                </li>
            </ul>
            <!-- 指示器 -->
            <div class="arrow"></div>
        </header>
        <!-- 内容部分 -->
        <div id="content">
            <ul class="list">
                <!-- 首页 -->
                <li class="home">
                    <div>
                        <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./images/dazhou1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/dazhou2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/dazhou3.webp" alt=""></div>
                            <div class="swiper-slide"><img src="./images/dazhou4.webp" alt=""></div>
                            <div class="swiper-slide"><img src="./images/dazhou5.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/dazhou6.jpg" alt=""></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>

                        <!-- 如果需要滚动条 -->
                        <div class="swiper-scrollbar"></div>
                    </div>
                </div>
                </li>
                <!-- 历史 -->
                <li class="history">
                    <div>
                        <!-- 左侧文本 -->
                        <div class="text">
                            <!-- 上部文本 -->
                            <div class="headText">
                                达州市是人口大市、资源富市、工业重镇、交通枢纽和革命老区，享有“巴人故里、红色达州、中国气都”之称。
                            </div>
                            <!-- 下部文本 -->
                            <div class="contentText">
                                下部文本
                            </div>
                        </div>
                        <!-- 右侧的图片容器 -->
                        <div class="pics">
                            <!-- 一个图片容器 -->
                            <div class="item">
                                <!-- 正面的图片 -->
                                <div class="front">vessel</div>
                                <!-- 背面的图片 -->
                                <div class="back">
                                    <img src="./images/lishi1.webp" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="front">flower</div>
                                <div class="back">
                                    <img src="./images/lishi2.jpg" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="front">settingsun</div>
                                <div class="back">
                                    <img src="./images/lishi3.jpg" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="front">tree</div>
                                <div class="back">
                                    <img src="./images/lishi4.jpg" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="front">mountain</div>
                                <div class="back">
                                    <img src="./images/lishi5.jpg" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="front">spiderman</div>
                                <div class="back">
                                    <img src="./images/lishi6.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- 美食 -->
                <li class="food">
                    <div>
                        <div class="text">吃在西安</div>
                        <div class="pics">
                            <div class="item">
                                <img src="./images/meishi1.webp" alt="">
                                <div class="mask">
                                    麻辣鸡块是四川达州的特色菜品，麻辣酥脆，鲜香可口
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                            <div class="item">
                                <img src="./images/meishi2.webp" alt="">
                                <div class="mask">
                                    石梯蒸鱼是四川达州当地特色菜，石梯是个地名，蒸鱼很有特色
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                            <div class="item">
                                <img src="./images/meishi3.webp" alt="">
                                <div class="mask">
                                    尖椒肥肠是四川达州市达县的一道特色小吃，麻辣入味又好吃
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                            <div class="item">
                                <img src="./images/meishi4.webp" alt="">
                                <div class="mask">
                                    干烧鱼是四川达州传统名菜，用料多为鲤鱼、草鱼等，其中干烧岩鲤最为出名
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                            <div class="item">
                                <img src="./images/meishi5.webp" alt="">
                                <div class="mask">
                                    达县灯影牛肉是四川达州特色美食，薄如蝉翼 ，香辣酥脆
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                            <div class="item">
                                <img src="./images/meishi6.webp" alt="">
                                <div class="mask">
                                    开江豆笋是一种豆制品，很出名，因形似竹笋而得名，还是四川非物质文化遗产
                                </div>
                                <div class="icon"></div>
                            </div>
                        </div>
                        <!-- 机器人动画 -->
                        <div class="robot"></div>
                    </div>
                </li>
                <!-- 景点 -->
                <li class="senery">
                    <div>
                        <div class="text">
                            出名景点
                        </div>
                        <div class="pics">
                            <div class="item" data="view1">
                                <div class="back"></div>
                                <div class="front"></div>
                            </div>
                            <div class="item" data="view2">
                                <div class="back"></div>
                                <div class="front"></div>
                            </div>
                            <div class="item" data="view3">
                                <div class="back"></div>
                                <div class="front"></div>
                            </div>
                            <div class="item" data="view4">
                                <div class="back"></div>
                                <div class="front"></div>
                            </div>
                            <div class="item" data="view5">
                                <div class="back"></div>
                                <div class="front"></div>
                            </div>
                            <div class="item" data="view6">
                                <div class="back"></div>
                                <div class="front"></div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- 名人 -->
                <li class="person">
                    <div>
                        <div class="headText">
                            通州才子绵不绝
                            </div>
                            <div class="bodyText">张三李四</div>
                            <div class="picStage">
                            <div class="picContent">
                            <img src="./images/pp1.jpg" alt="">
                            <img src="./images/pp3.jpg" alt="">
                            <img src="./images/pp6.jpg" alt="">
                            <img src="./images/pp1.jpg" alt="">
                            <img src="./images/pp3.jpg" alt="">
                            <img src="./images/pp6.jpg" alt="">
                            <img src="./images/pp3.jpg" alt="">
                            <img src="./images/pp1.jpg" alt="">
                            <img src="./images/pp6.jpg" alt="">
                            </div>
                            </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
</body>
</html>