猫眼APP选座静态界面布局

最新推荐文章于 2022-08-15 20:18:20 发布
最新推荐文章于 2022-08-15 20:18:20 发布
阅读量401 收藏 2
点赞数
分类专栏： 猫眼APP静态界面布局与样式设定 文章标签： css css3 html5 html sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/110389825
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选座</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/public.css">
    <link rel="stylesheet" href="./CSS/xuanzuo.css">
    <script src="./JS/auto-size.js"></script>
</head>

<body>
    <div class="top"></div>
    <!-- 顶部 -->
    <header class="login_reg">
        <div>
            <a href="javascript:history.go(-1)"><img src="./IMG/fanhuijiantou.gif" alt="返回箭头"></a>
            <p>太平洋影城(新城市店)</p>
        </div>
        <i></i>
    </header>

    <article>
        <header>
            <!-- 上面 -->
            <div>
                <!-- 左边 -->
                <div>
                    <p>太平洋影城(新城市店)</p>
                    <div>
                        <span>今天10月11日</span>
                        <span>17:30</span>
                        <span>国语3D</span>
                    </div>
                </div>
                <!-- 右边 -->
                <span>换一场</span>
            </div>
            <!-- 下面 -->
            <div>
                <p><i></i>可选</p>
                <p><i></i>已售</p>
                <p><i></i>已选</p>
                <p><i></i>情侣座</p>
            </div>
        </header>
        <!-- 灰色部分 -->
        <div>
            <!-- 顶部 -->
            <div><img src="./IMG/yingmu.jpg" alt="XXX"></div>
            <!-- 中部 -->
            <div>
                <!-- 数字 -->
                <div>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span></span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                    <span>11</span>
                </div>
                <!-- 座位 -->
                <div>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 推荐座位 -->
        <div>
            <p>推荐座位</p>
            <div>
                <span>1人</span>
                <span>2人</span>
                <span>3人</span>
                <span>4人</span>
                <span>5人</span>
            </div>
        </div>
        <!-- 一次最多选择5个座位 -->
        <div>
            <p>一次最多选择5个座位</p>
            <p>请先选座</p>
        </div>
    </article>
    <div class="bottom"></div>
</body>

</html>

@mixin f_ce_ce {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@mixin  f_be_ce {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@mixin f_col_be_ce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
body {
    .login_reg {
        >i {
            display: inline-block;
            width: 0.75rem;
            height: 0.60rem;
            background-image: url("../IMG/fenxiang.jpg");
            background-size: 0.75rem 0.60rem;
            background-position: 0rem 0rem; 
        }
    }
    >article {
        background-color: white;
        margin-top: 2.3rem;
        font-size: 0.4rem;
        margin-bottom: 1.7rem;
        >header {
            padding: 0 0.45rem;
            // 上面
            >div:nth-of-type(1) {
                @include f_be_ce;
                border-bottom: 2px solid #e4e4e4;
                // 左边字
                >div:nth-of-type(1) {
                    padding: 0.3rem 0;
                    >p:nth-of-type(1) {
                        color: black;
                        font-size: 0.52rem;
                    }
                    >div {
                        margin-top: 0.2rem;
                        font-size: 0.34rem;
                        >span {
                            margin-right: 0.25rem;
                            color: #656565;
                        }
                        >span:nth-of-type(3) {
                            color: #e23f35;
                        }
                    }
                }
                // 右边换一场
                >span {
                    font-size: 0.34rem;
                    color: #656565;
                    padding: 0.1rem 0.2rem;
                    border-radius: 0.48rem;
                    border: 2px solid  #e4e4e4;
                }
            }
            // 下面
            >div:nth-of-type(2) {
                @include f_be_ce;
                padding: 0.25rem 0;
                >p {
                    @include f_ce_ce;
                }
                >p>i {
                    color: #636363;
                    width: 0.51rem;
                    height: 0.46rem;
                    background-image: url("../IMG/icon100.png");
                    background-size: 5.6rem 5.1rem;
                    margin-right: 0.25rem;
                }
                >p:nth-of-type(1)>i {
                    background-position: -1.29rem -4.57rem;
                }
                >p:nth-of-type(2)>i {
                    background-position: -1.79rem -4.57rem;
                }
                >p:nth-of-type(3)>i {
                    background-position: -2.29rem -4.57rem;
                }
                >p:nth-of-type(4)>i {
                    width: 1rem;
                    height: 0.5rem;
                    background-position: -2.76rem -4.48rem;
                }
            }
        }
        // 灰色部分
        >div:nth-of-type(1) {
            height: 8.65rem;
            box-sizing: border-box;
            background-color: #f0f0f0;
            // 顶部
            >div:nth-of-type(1) {
                width: 6.32rem;
                margin: 0 auto;
                img {
                    width: 6.33rem;
                    height: 0.61rem;
                }
            }
            // 中部
            >div:nth-of-type(2) {
                display: flex;
                margin-top: 0.45rem;
                // 数字
                >div:nth-of-type(1) {
                    height: 7.2rem;
                    box-sizing: border-box;    
                    font-size: 0.24rem;
                    margin-left: 0.3rem;
                    margin-right: 0.3rem;
                    @include f_col_be_ce;
                    background-color: #a8a8a8;
                    border-radius: 0.45rem;
                    color: white;
                    padding: 0.3rem 0;
                    padding-top: 0.4rem;
                        >span {
                            line-height: 1;
                            height: 0.43rem;
                            display: inline-block;
                            padding: 0 0.05rem;
                        }
                        >span:nth-of-type(5) {
                            margin-top: 0.1rem;
                            height: 0.1rem;
                        }
                }
                // 座位
                >div:nth-of-type(2) {
                    margin-top: 0.3rem;
                    >ul {
                        @include f_ce_ce;
                        >li {
                            display: inline-block;
                            width: 0.53rem;
                            height: 0.43rem;
                            background-image: url('../IMG/icon100.png');
                            background-size: 5.6rem 5.1rem;
                            background-position: -3.75rem -4.55rem;
                            margin-right: 0.1rem;
                            margin-bottom: 0.15rem;
                        }
                    }
                    >ul:nth-of-type(5) {
                        height: 0.3rem;
                        visibility: hidden;
                    }
                    >ul:nth-of-type(1) {
                        >li:nth-of-type(1) {
                            visibility: hidden;
                        }
                    }
                    >ul:nth-of-type(n+6) {
                        >li:nth-of-type(11),>li:nth-of-type(10) {
                            visibility: hidden;
                        }
                    }
                    >ul:nth-last-of-type(1) {
                        >li:nth-of-type(11),>li:nth-of-type(10) {
                            visibility: visible;
                        }
                    }
                }    
            }
        }
        // 推荐座位
        >div:nth-of-type(2) {
            width: 9.9rem;
            margin: 0 auto;
            margin-top: 0.27rem;
            font-size: 0.38rem;
            >div {
                @include f_be_ce;
                padding: 0.27rem 0;
                border-bottom: 2px solid #e4e4e4;
                >span {
                    padding: 0.15rem 0.6rem;
                    border: 1px solid transparent;
                    box-sizing: border-box;
                    border-radius: 20px;
                    border: 2px solid #cacaca;
                    &:hover {
                        color: white;
                        font-weight: bold;
                        background-color: #ef4238;
                    }
                }
            }
        }
        >div:nth-of-type(3) {
            @include f_be_ce;
            font-size: 0.44rem;
            padding: 0.22rem 0.45rem;
            >p:nth-of-type(1) {
                color: #616161;
            }
            >p:nth-of-type(2) {
                border: 1px solid transparent;
                border-radius: 15px;
                @include f_ce_ce;
                width: 4.5rem;
                height: 1.2rem;
                color: white;
                font-weight: bold;
                background-color: #f5ddb0;
            }
        }
    }

}
V________
关注
专栏目录
猫眼APP登录页静态界面
V________的博客
11-30 1406
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <link rel="stylesheet" href="./CSS/reset.c
使用html+css+javascript写的预定电影座位小页面
weixin_53628904的博客
04-30 1230
此项目是仿照vanillawebprojects里的movie-seat-booking写的。 本项目用到的技术有：html+css+javaScript。 虽然项目是仿照着写出来的，但是js的实现方式和vanillawebprojects是不一样的。
网络车票选座购买app_ui界面设计_sketch素材下载.sketch
12-28
网络车票选座购买app ui界面设计 .sketch素材下载 App、sketch、ui界面设计、二维码、购票选座
电影网站 在线选座 全站静态html
02-22
金逸电影网站 HTML 全站 有在线选座
jQuery仿猫眼电影票在线选座购买特效
10-29
jQuery电影票在线选座购买特效
卖座网，微信小程序版，电影院在线选座，热门电影资讯maizuo_wechat-master.zip
09-25
卖座网，微信小程序版，电影院在线选座，热门电影资讯maizuo_wechat-master.zip
jQuery在线选座位插件seat-charts特效代码分享
10-23
主要介绍了jQuery在线选座位插件seat-charts特效，推荐给大家，有需要的小伙伴可以参考下。
高仿猫眼电影选座（选票）模块
04-05
作者ZFbaby，源码ZFSeatsSelection，高仿猫眼选座模块，之前对这了解了下网上几乎没有这类似模块，有也是一些简单的小demo没有任何效果，代码也是惨不忍睹看的一头雾水，索性就自己捣鼓着搞一个车轮:smile:，最终花...
类似猫眼电影选座(iOS)
11-10
【标题】"类似猫眼电影选座(iOS)"的开发实现详解 在iOS应用开发中，构建一个类似猫眼电影选座的功能是一项常见的需求。这个功能允许用户选择他们想要的电影座位，提供良好的用户体验。以下是对这个项目的详细解析：...
电影：Spring Boot + Thymeleaf仿猫眼电影选座系统
02-01
《电影：Spring Boot + Thymeleaf仿猫眼电影选座系统》是一个综合性的项目，旨在利用现代Web技术实现一个类似猫眼电影的在线选座系统。该项目主要涉及的技术栈包括JavaScript、MySQL、Java、Bootstrap、jQuery、...
电影票选座demo
01-20
使用了jquery.seat-charts.js完成电影选座，利用iscroll和swiper完成中间座位选座的滑动和更换场地的功能。
选择座位html,影厅座位预览效果（css3）_html/css_WEB-ITnose
weixin_35621029的博客
06-04 1281
查看 demo 下载源码你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛，电影，搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊，比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享给大家的一个新尝试。注意：我们使用到的某些技术还是非常实验性质的，不是所有浏览器都支持。这个demo需要浏览器支持 transform-style: pr...
html影院选座模板,jQuery在线选座(影院版)
weixin_36081486的博客
07-12 2225
jquery.seat-charts是一款适合电影票、高铁票的在线选座插件,支持自定义样式，支持设置座位状态，并且支持键盘控制座位。查看演示下载资源：2215次 下载资源下载积分：106积分HTML 屏幕电影：天将雄师时间：03月20日 22:15座位：票数：0总价：￥0jQuery首先我们要加载jquery库和选座插件：jQuery S...
【HTML】HTML作业-----影院售票界面
coding加油站
08-15 3175
web前端作业，html作业，影院售票系统
高仿猫眼电影选座（选票）模块-b
weixin_34055787的博客
09-12 3547
上图看效果先：   1）画座位图其实不是很难一般数据都会给坐标，将坐标对应座位画出来就可以了，主要是开场动画要设置默认大小，还有座位图的数量也不是固定的，所以在初始化座位图的时侯就默认算出了整个座位图的大小 -(instancetype)initWithSeatsArray:(NSMutableArray *)seatsArray maxNomarWidth:(CGFloat...
java演出厅选票_高仿猫眼电影选座（选票）模块-b
weixin_29103191的博客
02-27 1657
上图看效果先：1)画座位图其实不是很难一般数据都会给坐标，将坐标对应座位画出来就可以了，主要是开场动画要设置默认大小，还有座位图的数量也不是固定的，所以在初始化座位图的时侯就默认算出了整个座位图的大小-(instancetype)initWithSeatsArray:(NSMutableArray *)seatsArray maxNomarWidth:(CGFloat)maxW seatBtnAc...
仿猫眼电影在线选座组件
鲨鱼不会飞的博客
01-14 6219
前言部分 本文基本实现电影选座的效果，参考的是猫眼的效果来进行编写。2019年开年第一个月这篇可能是这个月的最后一篇了，希望今年继续做到坚持每月写博客的习惯，虽然博客的质量还不行，这主要还是因为能力上差的还多，但是不能轻易放弃，毕竟不能人人都是大神，博客能帮到别人或者帮到自己就有它的价值了。2019希望各位通过努力遇见更好的自己。 下面效果图先来镇楼吧 内容部分 实现步骤 常规的自定义...
HTML5与JQuery混合应用：选座功能逻辑简单实现
热门推荐
Mr_厚厚的博客
03-11 1万+
功能目标： 假设为了实现一个选座功能，用HTML5和JQuery来实现： 首先要将座位分布画出来，但往往是大量的座位，因此要借助JQuery语句通过循环来实现； 然后用户点击其中一个座位后，要得到该座位的横纵坐标，这个要借助index（）实现； 另外要可以根据坐标找到相应的座位标签，并修改其中的内容； 二维数组数据： 这是一个20x30的座位分布，30行，每行20列，首先用一个二维数组记录每个
猫眼电影选座 vue
最新发布
08-30
猫眼电影选座是一个使用Vue编写的电影移动端锁座页面，类似于淘票票和猫眼的功能。该项目经过了超过百个影厅的测试，并包含了座位图生成、座位预览图生成、座位留空检测、座位智能选择最优座位算法、自适应影厅大小、座位图左侧导航栏的过道等功能。 此项目是基于Vue编写的一个智能选座移动客户端。作者在公司需要实现H5端的购票平台时，第一次接触到Vue，并将其用于开发这个选座项目。作者在GitHub和码云上分享了项目代码，包括后端录入数据、接口和前端展示，供大家讨论和完善。 你可以点击[这里](https://github.com/zenghao0219/seat-select)查看项目的GitHub地址，也可以点击[这里](https://gitee.com/xollipop/seat-select)查看项目的码云地址。 如果你想预览该项目的演示，请使用手机访问[这里](demo链接)。该项目还包括座位图生成、座位预览图生成、座位留空检测、座位智能选择最优座位算法、自适应影厅大小、座位图左侧导航栏的过道检测、普通座位的选择逻辑和情侣座位的选择逻辑等功能。 以下是项目的部分截图： (如果有截图的话，请插入截图并进行描述)<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [seat-select:类似猫眼,淘票票,目前最流畅的vue选座移动端,座位选座,情侣座,座位留空检测,智能选座算法,座位...](https://download.csdn.net/download/weixin_42116604/19140192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用vue编写猫眼、淘票票、美团的智能选座移动客户端 (一)](https://blog.csdn.net/solanel/article/details/93620267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值