纯CSS完成影院选座

纯CSS完成影院选择

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS外部样式表 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/app-xuanzuo.css">
    <!-- 导入JS -->
    <script src="./js/auto-size.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <nav>
            <ul>
                <li>
                    <a href="../app-dianyingxiangqing/app-dianyingxiangqing.html"><img src="./img/fanhuijiantou.gif" alt=""></a>
                </li>
                <li>机械师2:复活</li>
            </ul>
            <ul>
                <li><img src="./img/fenxiang.jpg" alt=""></li>
            </ul>
        </nav>
        <nav>
            <ul>
                <li>
                    <p>太平洋影城(新城市店)</p>
                    <p>今天10月21日 17:30 <span>国语3D</span></p>
                </li>
                <li class="heihei"><a href="../app-fangying/app-fangying.html"> 换一场</a></li>
            </ul>
            <ul>
                <li><span></span>&nbsp可选</li>
                <li><span></span>&nbsp已售</li>
                <li><span></span>&nbsp已选</li>
                <li><span></span>&nbsp情侣座</li>
            </ul>
        </nav>
    </header>
    <!-- 主体 -->
    <article>
        <div> <img src="./img/jiguangyingmu.jpg" alt=""></div>
        <section class="xz">
            <ul>
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>5</p>
                <p>6</p>
                <p>7</p>
                <p>8</p>
                <p>9</p>
                <p>10</p>
                <p>11</p>

            </ul>

            <div class="xz01">
                <!-- 第一排 -->
                <ul class="xz-01">
                    <input type="checkbox" id="xz-01-01">
                    <label for="xz-01-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-02">
                    <label for="xz-01-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-03">
                    <label for="xz-01-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-04">
                    <label for="xz-01-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-05">
                    <label for="xz-01-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-06">
                    <label for="xz-01-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-07">
                    <label for="xz-01-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-08">
                    <label for="xz-01-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-09">
                    <label for="xz-01-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-10">
                    <label for="xz-01-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-11">
                    <label for="xz-01-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-12">
                    <label for="xz-01-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-13">
                    <label for="xz-01-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-14">
                    <label for="xz-01-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-15">
                    <label for="xz-01-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第二排 -->
                <ul class="xz-02">
                    <input type="checkbox" id="xz-02-01">
                    <label for="xz-02-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-02">
                    <label for="xz-02-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-03">
                    <label for="xz-02-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-04">
                    <label for="xz-02-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-05">
                    <label for="xz-02-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-06">
                    <label for="xz-02-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-07">
                    <label for="xz-02-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-08">
                    <label for="xz-02-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-09">
                    <label for="xz-02-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-10">
                    <label for="xz-02-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-11">
                    <label for="xz-02-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-12">
                    <label for="xz-02-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-13">
                    <label for="xz-02-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-14">
                    <label for="xz-02-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-15">
                    <label for="xz-02-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第三排 -->
                <ul class="xz-03">
                    <input type="checkbox" id="xz-03-01">
                    <label for="xz-03-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-02">
                    <label for="xz-03-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-03">
                    <label for="xz-03-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-04">
                    <label for="xz-03-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-05">
                    <label for="xz-03-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-06">
                    <label for="xz-03-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-07">
                    <label for="xz-03-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-08">
                    <label for="xz-03-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-09">
                    <label for="xz-03-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-10">
                    <label for="xz-03-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-11">
                    <label for="xz-03-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-12">
                    <label for="xz-03-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-13">
                    <label for="xz-03-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-14">
                    <label for="xz-03-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-15">
                    <label for="xz-03-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第四排 -->
                <ul class="xz-04">
                    <input type="checkbox" id="xz-04-01">
                    <label for="xz-04-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-02">
                    <label for="xz-04-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-03">
                    <label for="xz-04-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-04">
                    <label for="xz-04-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-05">
                    <label for="xz-04-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-06">
                    <label for="xz-04-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-07">
                    <label for="xz-04-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-08">
                    <label for="xz-04-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-09">
                    <label for="xz-04-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-10">
                    <label for="xz-04-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-11">
                    <label for="xz-04-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-12">
                    <label for="xz-04-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-13">
                    <label for="xz-04-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-14">
                    <label for="xz-04-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-15">
                    <label for="xz-04-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 空 -->
                <ul class="xz-00">
                    <input type="checkbox" id="xz-01-00">
                    <label for="xz-01-00">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-02">
                    <label for="xz-00-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-03">
                    <label for="xz-00-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-04">
                    <label for="xz-00-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-05">
                    <label for="xz-00-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-06">
                    <label for="xz-00-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-07">
                    <label for="xz-00-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-08">
                    <label for="xz-00-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-09">
                    <label for="xz-00-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-10">
                    <label for="xz-00-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-11">
                    <label for="xz-00-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-12">
                    <label for="xz-00-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-13">
                    <label for="xz-00-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-14">
                    <label for="xz-00-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-15">
                    <label for="xz-00-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第五排 -->
                <ul class="xz-05">
                    <input type="checkbox" id="xz-05-01">
                    <label for="xz-05-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-02">
                    <label for="xz-05-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-03">
                    <label for="xz-05-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-04">
                    <label for="xz-05-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-05">
                    <label for="xz-05-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-06">
                    <label for="xz-05-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-07">
                    <label for="xz-05-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-08">
                    <label for="xz-05-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-09">
                    <label for="xz-05-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-10">
                    <label for="xz-05-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-11">
                    <label for="xz-05-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-12">
                    <label for="xz-05-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-13">
                    <label for="xz-05-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-14">
                    <label for="xz-05-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-15">
                    <label for="xz-05-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第六排 -->
                <ul class="xz-06">
                    <input type="checkbox" id="xz-06-01">
                    <label for="xz-06-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-02">
                    <label for="xz-06-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-03">
                    <label for="xz-06-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-04">
                    <label for="xz-06-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-05">
                    <label for="xz-06-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-06">
                    <label for="xz-06-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-07">
                    <label for="xz-06-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-08">
                    <label for="xz-06-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-09">
                    <label for="xz-06-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-10">
                    <label for="xz-06-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-11">
                    <label for="xz-06-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-12">
                    <label for="xz-06-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-13">
                    <label for="xz-06-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-14">
                    <label for="xz-06-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-15">
                    <label for="xz-06-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第七排 -->
                <ul class="xz-07">
                    <input type="checkbox" id="xz-07-01">
                    <label for="xz-07-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-02">
                    <label for="xz-07-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-03">
                    <label for="xz-07-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-04">
                    <label for="xz-07-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-05">
                    <label for="xz-07-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-06">
                    <label for="xz-07-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-07">
                    <label for="xz-07-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-08">
                    <label for="xz-07-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-09">
                    <label for="xz-07-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-10">
                    <label for="xz-07-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-11">
                    <label for="xz-07-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-12">
                    <label for="xz-07-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-13">
                    <label for="xz-07-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-14">
                    <label for="xz-07-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-15">
                    <label for="xz-07-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第八排 -->
                <ul class="xz-08">
                    <input type="checkbox" id="xz-08-01">
                    <label for="xz-08-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-02">
                    <label for="xz-08-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-03">
                    <label for="xz-08-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-04">
                    <label for="xz-08-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-05">
                    <label for="xz-08-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-06">
                    <label for="xz-08-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-07">
                    <label for="xz-08-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-08">
                    <label for="xz-08-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-09">
                    <label for="xz-08-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-10">
                    <label for="xz-08-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-11">
                    <label for="xz-08-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-12">
                    <label for="xz-08-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-13">
                    <label for="xz-08-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-14">
                    <label for="xz-08-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-15">
                    <label for="xz-08-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第九排 -->
                <ul class="xz-09">
                    <input type="checkbox" id="xz-01-09">
                    <label for="xz-01-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-02">
                    <label for="xz-09-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-03">
                    <label for="xz-09-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-04">
                    <label for="xz-09-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-05">
                    <label for="xz-09-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-06">
                    <label for="xz-09-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-07">
                    <label for="xz-09-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-08">
                    <label for="xz-09-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-09">
                    <label for="xz-09-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-10">
                    <label for="xz-09-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-11">
                    <label for="xz-09-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-12">
                    <label for="xz-09-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-13">
                    <label for="xz-09-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-14">
                    <label for="xz-09-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-15">
                    <label for="xz-09-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第10排 -->
                <ul class="xz-10">
                    <input type="checkbox" id="xz-01-10">
                    <label for="xz-01-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-02">
                    <label for="xz-10-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-03">
                    <label for="xz-10-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-04">
                    <label for="xz-10-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-05">
                    <label for="xz-10-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-06">
                    <label for="xz-10-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-07">
                    <label for="xz-10-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-08">
                    <label for="xz-10-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-09">
                    <label for="xz-10-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-10">
                    <label for="xz-10-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-11">
                    <label for="xz-10-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-12">
                    <label for="xz-10-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-13">
                    <label for="xz-10-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-14">
                    <label for="xz-10-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-15">
                    <label for="xz-10-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第11排 -->
                <ul class="xz-11">
                    <input type="checkbox" id="xz-01-11">
                    <label for="xz-01-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-02">
                    <label for="xz-11-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-03">
                    <label for="xz-11-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-04">
                    <label for="xz-11-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-05">
                    <label for="xz-11-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-06">
                    <label for="xz-11-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-07">
                    <label for="xz-11-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-08">
                    <label for="xz-11-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-09">
                    <label for="xz-11-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-10">
                    <label for="xz-11-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-11">
                    <label for="xz-11-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-12">
                    <label for="xz-11-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-13">
                    <label for="xz-11-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-14">
                    <label for="xz-11-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-15">
                    <label for="xz-11-15">
                        <i></i>
                    </label>
                </ul>

            </div>
        </section>

    </article>
    <footer>
        <p>推荐座位</p>
        <div> <input type="radio">
            <label for="xz-05-09">
                <i>1人</i>
            </label>
            <label for="xz-05-09">
                <i>2人</i>
            </label>
            <label for="xz-05-09">
                <i>3人</i>
            </label>
            <label for="xz-05-09">
                <i>4人</i>
            </label>
            <label for="xz-05-09">
                <i>5人</i>
            </label>


        </div>
        <div><span>一次最多选择五个座位</span>
        <span>请先选座</span></div>
    </footer>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS外部样式表 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/app-xuanzuo.css">
    <!-- 导入JS -->
    <script src="./js/auto-size.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <nav>
            <ul>
                <li>
                    <a href="../app-dianyingxiangqing/app-dianyingxiangqing.html"><img src="./img/fanhuijiantou.gif" alt=""></a>
                </li>
                <li>机械师2:复活</li>
            </ul>
            <ul>
                <li><img src="./img/fenxiang.jpg" alt=""></li>
            </ul>
        </nav>
        <nav>
            <ul>
                <li>
                    <p>太平洋影城(新城市店)</p>
                    <p>今天10月21日 17:30 <span>国语3D</span></p>
                </li>
                <li class="heihei"><a href="../app-fangying/app-fangying.html"> 换一场</a></li>
            </ul>
            <ul>
                <li><span></span>&nbsp可选</li>
                <li><span></span>&nbsp已售</li>
                <li><span></span>&nbsp已选</li>
                <li><span></span>&nbsp情侣座</li>
            </ul>
        </nav>
    </header>
    <!-- 主体 -->
    <article>
        <div> <img src="./img/jiguangyingmu.jpg" alt=""></div>
        <section class="xz">
            <ul>
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>5</p>
                <p>6</p>
                <p>7</p>
                <p>8</p>
                <p>9</p>
                <p>10</p>
                <p>11</p>

            </ul>

            <div class="xz01">
                <!-- 第一排 -->
                <ul class="xz-01">
                    <input type="checkbox" id="xz-01-01">
                    <label for="xz-01-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-02">
                    <label for="xz-01-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-03">
                    <label for="xz-01-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-04">
                    <label for="xz-01-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-05">
                    <label for="xz-01-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-06">
                    <label for="xz-01-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-07">
                    <label for="xz-01-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-08">
                    <label for="xz-01-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-09">
                    <label for="xz-01-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-10">
                    <label for="xz-01-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-11">
                    <label for="xz-01-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-12">
                    <label for="xz-01-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-13">
                    <label for="xz-01-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-14">
                    <label for="xz-01-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-01-15">
                    <label for="xz-01-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第二排 -->
                <ul class="xz-02">
                    <input type="checkbox" id="xz-02-01">
                    <label for="xz-02-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-02">
                    <label for="xz-02-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-03">
                    <label for="xz-02-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-04">
                    <label for="xz-02-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-05">
                    <label for="xz-02-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-06">
                    <label for="xz-02-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-07">
                    <label for="xz-02-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-08">
                    <label for="xz-02-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-09">
                    <label for="xz-02-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-10">
                    <label for="xz-02-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-11">
                    <label for="xz-02-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-12">
                    <label for="xz-02-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-13">
                    <label for="xz-02-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-14">
                    <label for="xz-02-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-02-15">
                    <label for="xz-02-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第三排 -->
                <ul class="xz-03">
                    <input type="checkbox" id="xz-03-01">
                    <label for="xz-03-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-02">
                    <label for="xz-03-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-03">
                    <label for="xz-03-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-04">
                    <label for="xz-03-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-05">
                    <label for="xz-03-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-06">
                    <label for="xz-03-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-07">
                    <label for="xz-03-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-08">
                    <label for="xz-03-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-09">
                    <label for="xz-03-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-10">
                    <label for="xz-03-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-11">
                    <label for="xz-03-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-12">
                    <label for="xz-03-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-13">
                    <label for="xz-03-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-14">
                    <label for="xz-03-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-03-15">
                    <label for="xz-03-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第四排 -->
                <ul class="xz-04">
                    <input type="checkbox" id="xz-04-01">
                    <label for="xz-04-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-02">
                    <label for="xz-04-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-03">
                    <label for="xz-04-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-04">
                    <label for="xz-04-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-05">
                    <label for="xz-04-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-06">
                    <label for="xz-04-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-07">
                    <label for="xz-04-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-08">
                    <label for="xz-04-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-09">
                    <label for="xz-04-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-10">
                    <label for="xz-04-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-11">
                    <label for="xz-04-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-12">
                    <label for="xz-04-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-13">
                    <label for="xz-04-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-14">
                    <label for="xz-04-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-04-15">
                    <label for="xz-04-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 空 -->
                <ul class="xz-00">
                    <input type="checkbox" id="xz-01-00">
                    <label for="xz-01-00">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-02">
                    <label for="xz-00-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-03">
                    <label for="xz-00-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-04">
                    <label for="xz-00-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-05">
                    <label for="xz-00-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-06">
                    <label for="xz-00-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-07">
                    <label for="xz-00-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-08">
                    <label for="xz-00-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-09">
                    <label for="xz-00-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-10">
                    <label for="xz-00-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-11">
                    <label for="xz-00-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-12">
                    <label for="xz-00-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-13">
                    <label for="xz-00-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-14">
                    <label for="xz-00-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-00-15">
                    <label for="xz-00-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第五排 -->
                <ul class="xz-05">
                    <input type="checkbox" id="xz-05-01">
                    <label for="xz-05-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-02">
                    <label for="xz-05-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-03">
                    <label for="xz-05-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-04">
                    <label for="xz-05-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-05">
                    <label for="xz-05-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-06">
                    <label for="xz-05-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-07">
                    <label for="xz-05-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-08">
                    <label for="xz-05-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-09">
                    <label for="xz-05-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-10">
                    <label for="xz-05-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-11">
                    <label for="xz-05-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-12">
                    <label for="xz-05-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-13">
                    <label for="xz-05-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-14">
                    <label for="xz-05-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-05-15">
                    <label for="xz-05-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第六排 -->
                <ul class="xz-06">
                    <input type="checkbox" id="xz-06-01">
                    <label for="xz-06-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-02">
                    <label for="xz-06-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-03">
                    <label for="xz-06-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-04">
                    <label for="xz-06-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-05">
                    <label for="xz-06-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-06">
                    <label for="xz-06-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-07">
                    <label for="xz-06-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-08">
                    <label for="xz-06-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-09">
                    <label for="xz-06-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-10">
                    <label for="xz-06-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-11">
                    <label for="xz-06-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-12">
                    <label for="xz-06-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-13">
                    <label for="xz-06-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-14">
                    <label for="xz-06-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-06-15">
                    <label for="xz-06-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第七排 -->
                <ul class="xz-07">
                    <input type="checkbox" id="xz-07-01">
                    <label for="xz-07-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-02">
                    <label for="xz-07-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-03">
                    <label for="xz-07-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-04">
                    <label for="xz-07-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-05">
                    <label for="xz-07-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-06">
                    <label for="xz-07-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-07">
                    <label for="xz-07-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-08">
                    <label for="xz-07-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-09">
                    <label for="xz-07-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-10">
                    <label for="xz-07-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-11">
                    <label for="xz-07-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-12">
                    <label for="xz-07-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-13">
                    <label for="xz-07-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-14">
                    <label for="xz-07-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-07-15">
                    <label for="xz-07-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第八排 -->
                <ul class="xz-08">
                    <input type="checkbox" id="xz-08-01">
                    <label for="xz-08-01">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-02">
                    <label for="xz-08-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-03">
                    <label for="xz-08-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-04">
                    <label for="xz-08-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-05">
                    <label for="xz-08-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-06">
                    <label for="xz-08-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-07">
                    <label for="xz-08-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-08">
                    <label for="xz-08-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-09">
                    <label for="xz-08-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-10">
                    <label for="xz-08-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-11">
                    <label for="xz-08-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-12">
                    <label for="xz-08-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-13">
                    <label for="xz-08-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-14">
                    <label for="xz-08-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-08-15">
                    <label for="xz-08-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第九排 -->
                <ul class="xz-09">
                    <input type="checkbox" id="xz-01-09">
                    <label for="xz-01-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-02">
                    <label for="xz-09-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-03">
                    <label for="xz-09-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-04">
                    <label for="xz-09-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-05">
                    <label for="xz-09-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-06">
                    <label for="xz-09-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-07">
                    <label for="xz-09-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-08">
                    <label for="xz-09-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-09">
                    <label for="xz-09-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-10">
                    <label for="xz-09-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-11">
                    <label for="xz-09-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-12">
                    <label for="xz-09-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-13">
                    <label for="xz-09-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-14">
                    <label for="xz-09-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-09-15">
                    <label for="xz-09-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第10排 -->
                <ul class="xz-10">
                    <input type="checkbox" id="xz-01-10">
                    <label for="xz-01-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-02">
                    <label for="xz-10-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-03">
                    <label for="xz-10-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-04">
                    <label for="xz-10-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-05">
                    <label for="xz-10-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-06">
                    <label for="xz-10-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-07">
                    <label for="xz-10-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-08">
                    <label for="xz-10-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-09">
                    <label for="xz-10-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-10">
                    <label for="xz-10-10" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-11">
                    <label for="xz-10-11" class="touming">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-12">
                    <label for="xz-10-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-13">
                    <label for="xz-10-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-14">
                    <label for="xz-10-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-10-15">
                    <label for="xz-10-15">
                        <i></i>
                    </label>
                </ul>
                <!-- 第11排 -->
                <ul class="xz-11">
                    <input type="checkbox" id="xz-01-11">
                    <label for="xz-01-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-02">
                    <label for="xz-11-02">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-03">
                    <label for="xz-11-03">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-04">
                    <label for="xz-11-04">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-05">
                    <label for="xz-11-05">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-06">
                    <label for="xz-11-06">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-07">
                    <label for="xz-11-07">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-08">
                    <label for="xz-11-08">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-09">
                    <label for="xz-11-09">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-10">
                    <label for="xz-11-10">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-11">
                    <label for="xz-11-11">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-12">
                    <label for="xz-11-12">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-13">
                    <label for="xz-11-13">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-14">
                    <label for="xz-11-14">
                        <i></i>
                    </label>
                    <input type="checkbox" id="xz-11-15">
                    <label for="xz-11-15">
                        <i></i>
                    </label>
                </ul>

            </div>
        </section>

    </article>
    <footer>
        <p>推荐座位</p>
        <div> <input type="radio">
            <label for="xz-05-09">
                <i>1人</i>
            </label>
            <label for="xz-05-09">
                <i>2人</i>
            </label>
            <label for="xz-05-09">
                <i>3人</i>
            </label>
            <label for="xz-05-09">
                <i>4人</i>
            </label>
            <label for="xz-05-09">
                <i>5人</i>
            </label>


        </div>
        <div><span>一次最多选择五个座位</span>
        <span>请先选座</span></div>
    </footer>
</body>

</html>
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: CSS Gallery 是一种使用 CSS 技术实现的图库。这种图库通常用于展示图片集合或作为网页的页面背景,而不需要任何 JavaScript 或其他脚本语言的支持。 CSS Gallery 的实现原理通常是使用 CSS3 的一些功能和特性来实现图像的布局和动画效果。比如,可以使用 CSS3 的多列布局来实现图片的分列展示,或者使用 CSS3 的动画效果来实现图片的轮播切换。 另外, CSS Gallery 还可以使用 CSS3 的过渡效果来实现图片的渐变切换,或者使用 CSS3 的变换效果来实现图片的缩放和旋转。这些特性的使用可以使得图片在展示时更加生动和有趣。 由于 CSS Gallery 不依赖于 JavaScript 或其他脚本语言,所以其加载速度相对较快,同时也减少了网页的依赖和复杂性。此外,由于 CSS Gallery 是使用浏览器原生支持的 CSS3 功能实现的,因此在现代浏览器中能够得到良好的兼容性和表现效果。 最后, CSS Gallery 可以通过 CSS 样式表来进行自定义和个性化设置,使得用户可以根据自己的需要调整图库的样式和布局。这种灵活性和可定制性使得 CSS Gallery 成为一种常见和受欢迎的图库实现方式。 ### 回答2: CSS gallery是一种使用CSS技术创建的图片画廊,不需要任何JavaScript或其他编程语言。它是通过CSS选择器和属性来实现图像排列、大小调整、动画效果等。 在创建CSS gallery时,首先需要创建一个容器元素,用于包含所有的图片项。可以使用CSS的display属性来控制容器的布局方式,如设置为flex、grid或者inline-block等来实现不同的布局效果。 接下来,每个图片项可以用CSS选择器来选中,并设置相关的样式。可以通过设置图片的宽度、高度、边框、背景等属性来进行美化。同时,可以使用CSS的伪类和伪元素来实现鼠标悬停时的效果,如添加阴影、放大缩小、移动等动画效果。 在CSS gallery中,常见的效果还包括图片的排序、切换和过渡效果。可以使用CSS的transform和transition属性来实现图片的平移、旋转、缩放等动画效果,通过设置CSS的animation属性来实现图片的自动播放效果。 最后,为了提供用户交互,还可以使用CSS的:checked伪类来实现图片的点击切换效果,通过设置相关的样式来显示不同的图片。 总之,CSS gallery是一种利用CSS技术实现的图片画廊,通过选择器、属性和伪类来实现不同的布局、样式和动画效果,从而展示出美观的图片展示效果。它不仅可以提供良好的用户体验,还可以提高网页加载速度和响应性能。 ### 回答3: CSS gallery 是一种使用 CSS(层叠样式表)来创建的画廊或图片展示效果。这种技术不需要额外的 JavaScript 代码,通过 CSS 的动画和过渡效果来实现图片的切换、放大缩小、轮播等功能。 CSS gallery 使用伪元素(pseudo-elements)和伪类(pseudo-classes)来添加样式和动画效果。通过给不同的图片元素添加不同的类或标签,我们可以实现图片的切换效果。例如,我们可以使用 :hover 伪类来在鼠标滑过时显示放大效果,并使用过渡动画来实现平滑的过渡效果。 另外,我们还可以使用 CSS3 的动画属性来创建自动播放的幻灯片效果。通过使用 @keyframes 规则,我们可以定义不同阶段的动画效果,然后通过 animation 属性将这些动画应用于图片元素。 CSS gallery 的好处是减少了依赖于 JavaScript 的开发和维护工作量,使得网页加载更快且更稳定。另外,使用 CSS 来实现画廊效果也有助于提高用户体验,使用户可以更加流畅地浏览图片。 然而, CSS gallery 也有一些限制。由于不能使用动态的 JavaScript 代码,一些高级功能(如图片的实时加载、图片的预加载、过渡效果的精细控制等)可能无法实现。此外, CSS gallery 的兼容性也存在一定的问题,不同浏览器对于 CSS3 动画和过渡效果的支持程度不同。 总的来说, CSS gallery 是一种简单、快速实现图片展示效果的方法,适用于一些简单的图片展示场景。但在一些复杂的应用场景中,可能需要借助 JavaScript 或其他技术来实现更多功能和效果的控制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值