猫眼APP静态界面布局与样式设定

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

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

<body>
    <!-- div1 -->
    <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>
    <!-- 背景图上方区域 -->
    <!-- div 2 -->
    <div>
        <!-- 左边全部 -->
        <div>
            <!-- 左边字 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p>太平洋影城(新城市店)</p>
                    <p>8.0<span>分</span></p>
                </div>
                <!-- 第二行 -->
                <p>青羊区西大街1号新城市广场A栋2楼</p>
                <!-- 第三行 -->
                <div>
                    <span>改签</span>
                    <span>取机票</span>
                    <span>儿童优惠</span>
                    <span>可停车</span>
                    <span>WIFI</span>
                </div>
            </div>
            <!-- 右边箭头 -->
            <div>
                <img src="./IMG/arrows.png">
            </div>
        </div>
        <!-- 右边地图 -->
        <div>
            <figure>
                <img src="./IMG/ditu.jpg" alt="地图">
                <figcaption>地图</figcaption>
            </figure>
        </div>
    </div>
    <!-- 折扣卡与观影套餐 -->
    <!-- div3 -->
    <div>
        <p><i></i><a href="#2">折扣卡</a></p>
        <p><i></i><a href="#2">观影套餐</a></p>
    </div>
    <!-- 图片区域 -->
    <!-- div4 -->
    <div>
        <div>
            <!-- 第一张 -->
            <div>
                <input type="radio" id="img1" name="xuanze" checked>
                <label for="img1">
                    <img src="./IMG/reying1.jpg" alt="">
                </label>
                <!-- 介绍 -->
                <div>
                    <!-- 左  -->
                    <div>
                        <p>机械师2：复活 <span>9.0</span><span>分</span></p>
                        <p>片长： 97分钟</p>
                    </div>
                    <!-- 右箭头  -->
                    <div><a href=""><i></i></a></div>
                </div>
            </div>
            <!-- 第二张 -->
            <div>
                <input type="radio" id="img2" name="xuanze">
                <label for="img2">
                    <img src="./IMG/reying2.jpg" alt="">
                </label>
                <!-- 介绍 -->
                <div>
                    <!-- 左  -->
                    <div>
                        <p>惊天破 <span>9.0</span><span>分</span></p>
                        <p>片长： 97分钟</p>
                    </div>
                    <!-- 右箭头  -->
                    <div><a href=""><i></i></a></div>
                </div>
            </div>
            <!-- 第三张 -->
            <div>
                <input type="radio" id="img3" name="xuanze">
                <label for="img3">
                    <img src="./IMG/reying3.jpg" alt="">
                </label>
                <!-- 介绍 -->
                <div>
                    <!-- 左  -->
                    <div>
                        <p>侠探杰克 <span>9.0</span><span>分</span></p>
                        <p>片长： 97分钟</p>
                    </div>
                    <!-- 右箭头  -->
                    <div><a href=""><i></i></a></div>
                </div>
            </div>
        </div>
        
    </div>
    <!-- div 5 -->
    <div></div>
    <!-- 黄色区域 -->
    <!-- div 6 -->
    <div>
        <p>购票享低价,首单更优惠,还送10元礼包</p>
        <p>￥33开卡 ></p>
    </div>
    <!-- 整个选择部分 -->
    <!-- div 7 -->
    <div>
        <p><a href="#">今天10月16日</a></p>
        <!-- 场次 -->
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <span>17:30</span>
                    <span>国语3D</span>
                    <span>41<i>元</i></span>
                </div>
                <!-- 第二行 -->
                <div>
                    <span>19:07散场</span>
                    <span>激光3号厅</span>
                    <span>折扣卡:37元</span>
                </div>
            </div>
            <!-- 右边 -->
            <p><a href="./xuanzuo.html">选座购票</a></p>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <span>18:10</span>
                    <span>英语3D</span>
                    <span>41<i>元</i></span>
                </div>
                <!-- 第二行 -->
                <div>
                    <span>19:47散场</span>
                    <span>激光2号厅</span>
                    <span>折扣卡:37元</span>
                </div>
            </div>
            <!-- 右边 -->
            <p><a href="./xuanzuo.html">选座购票</a></p>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <span>18:50</span>
                    <span>英语3D</span>
                    <span>41<i>元</i></span>
                </div>
                <!-- 第二行 -->
                <div>
                    <span>20:27散场</span>
                    <span>全景声厅(大)</span>
                    <span>折扣卡:37元</span>
                </div>
            </div>
            <!-- 右边 -->
            <p><a href="./xuanzuo.html">选座购票</a></p>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <span>19:30</span>
                    <span>国语3D</span>
                    <span>41<i>元</i></span>
                </div>
                <!-- 第二行 -->
                <div>
                    <span>21:07散场</span>
                    <span>激光3号厅</span>
                    <span>折扣卡:37元</span>
                </div>
            </div>
            <!-- 右边 -->
            <p><a href="./xuanzuo.html">选座购票</a></p>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <span>20:10</span>
                    <span>英语3D</span>
                    <span>41<i>元</i></span>
                </div>
                <!-- 第二行 -->
                <div>
                    <span>21:47散场</span>
                    <span>激光2号厅</span>
                    <span>折扣卡:37元</span>
                </div>
            </div>
            <!-- 右边 -->
            <p><a href="./xuanzuo.html">选座购票</a></p>
        </section>
    </div>
    <div class="bottom"></div>
</body>

</html>


```css
@mixin  f_be_ce {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@mixin  f_ce_ce {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin  f__ce {
    display: flex;
    align-items: center;
}
@font-face  {
    font-family: "ziti";
    src: url("../Fonts/digital-7_mono.ttf");
}
body{
    background-color: white;
    // 背景图上方区域
    >div:nth-of-type(2) {
        margin-top: 2.25rem;
        padding: 0.4rem 0.5rem 0.3rem 0.4rem;
        border-bottom: 2px solid #e5e5e5;
        @include f_be_ce;
        // 左边全部
        >div:nth-of-type(1) {
            width: 8.2rem;
            @include f_be_ce;
            // 左边字
            >div:nth-of-type(1) {
                // 第一行
                >div:nth-of-type(1) {
                    @include f__ce;
                    font-size: 0.52rem;
                    >p:nth-of-type(2) {
                        margin-left: 0.2rem;
                        font-size: 0.36rem;
                        color: #e8b933;    
                        >span {
                            font-size: 0.3rem;
                        }
                    }
                }
                // 第二行
                >p {
                    font-size: 0.36rem;
                    color: #979797;
                    margin: 0.2rem 0;
                }
                // 第三行
                >div:nth-of-type(2) {
                    @include f__ce;
                    >span {
                        padding: 0.03rem 0.07rem;
                        color: #559dae;
                        border: 2px solid #559dae;
                        box-sizing: border-box;
                        font-size: 0.24rem;
                        margin-right: 0.15rem;
                        border-radius: 0.1rem;
                    }
                }
            }
            // 右边箭头
            >div:nth-of-type(2) {
                >img {
                    width: 0.18rem;
                    height: 0.32rem;
                }
            }                
        }
        // 右边地图
        >div:nth-of-type(2) {
            height: 1.5rem;
            padding-left: 0.55rem;
            text-align: center;
            font-size: 0.36rem;
            border-left: 0.03rem solid #e5e5e5;
            >figure {
                >figcaption {
                    margin-top: 0.2rem;
                    color: #979797;
                }
                >img {
                    width: 0.4rem;
                    height: 0.46rem;
                }
            }
        }
    }
    >div:nth-of-type(3) {
        @include f_ce_ce;
        padding: 0.3rem ;
        >p {
            @include f_ce_ce;
            width: 50%; 
            >a {
                color: #727272;
            }  
            >i {
                margin-right: 0.2rem;
            }
        }
        >p:nth-of-type(1) {
            border-right: 2px solid #e5e5e5;
            box-sizing: border-box;
            >i {
                width: 0.56rem;
                height: 0.44rem;
                background-image: url("../IMG/zhekouka.jpg");
                background-size: 0.56rem 0.44rem;
                background-position: 0rem 0rem;    
            }
        }
        >p:nth-of-type(2)>i {
            width: 0.4rem;
            height: 0.47rem;
            background-image: url("../IMG/icon100.png");
            background-size: 5.6rem 5.1rem;
            background-position: -3.28rem -3.99rem;    
        }
    }
    >div:nth-of-type(4) {
        position: relative;
        height: 6.25rem;
        >div:nth-of-type(1) {
            height: 4.58rem;
            overflow-x: scroll;
            overflow-y: hidden;
            width: 10.8rem;
            background-image: url("../IMG/xiangqingbeijing.jpg");
            @include f__ce;
            ::-webkit-scrollbar {
                display: none;
            }
            // 所有图片共用样式 div1 div2 div3
            >div {
                >input {
                    display: none;
                    &:checked~div{
                        visibility: visible;
                    }
                    &:checked+label>img {
                        transform: scale(1.2);
                        border: 0.03rem solid white;
                    }
                    &:checked+label::before {
                        visibility: visible;;
                    }
                }
                >label {
                    position: relative;
                    >img {
                        width: 2.25rem;
                        margin-right: 0.7rem;
                    }
                    &::before {
                        content: '';
                        border: 0.25rem solid transparent;
                        border-bottom-color: white;
                        position: absolute;
                        bottom: -2.1rem;
                        right: 1.5rem;
                        z-index: 2;
                        visibility: hidden;
                    }
                }
                // 介绍
                >div {
                    visibility: hidden;
                    width: 10.8rem;
                    height: 1.64rem;
                    box-sizing: border-box;
                    position: absolute;
                    z-index: 2;
                    bottom: 0rem;
                    left: 0;
                    padding: 0.3rem 0.45rem;
                    border-bottom: 1px solid #c5c5c5;
                    @include f__ce;
                    // 左
                    >div:nth-of-type(1) {
                        flex: 1;
                        >p:nth-of-type(1) {
                            font-size: 0.42rem;
                            >span:nth-of-type(1) {
                                font-size: 0.36rem;
                                color: #fcb402;
                                margin-left: 0.1rem;
                            }
                            >span:nth-of-type(2) {
                                font-size: 0.3rem;
                                color: #fcb402;
                            }
                        }
                        >p:nth-of-type(2) {
                            font-size: 0.37rem;
                            color: #989898;
                        }
                    }
                    // 右箭头
                    >div:nth-of-type(2) {
                        font-size: 0;
                        >a>i {
                            display: inline-block;
                            width: 0.32rem;
                            height: 0.56rem;
                            background-image: url('../IMG/icon100.png');
                            background-size: 5.6rem 5.1rem;
                            background-position: -3.8rem -3.92rem;
                        }
                    }
                }
            }
            // 第一张
            >div:nth-of-type(1) {
                img{
                    margin-left: 4.3rem;
                }
            }           
        }
    }
    // 灰色
    >div:nth-of-type(5) {
        height: 0.45rem;
        background-color: #f5f5f5;
    }
    // 黄色区域
    >div:nth-of-type(6) {
        @include f_be_ce;
        padding: 0.3rem 0.35rem;
        color: #fcb500;
        background-color: #fef4c9;
    }
    // 整个选择部分
    >div:nth-of-type(7) {
        margin-bottom: 1.7rem;
        // 今日
        >p:nth-of-type(1) {
            border-bottom: 2px solid #e1e1e1;
            box-sizing: border-box;
            >a {
                height: 1.44rem;
                box-sizing: border-box;
                display: inline-block;
                color: #ff432f;
                padding: 0.4rem 0.4rem .3rem ;
                &:hover {
                    border-bottom: 4px solid #ff432f;
                    box-sizing: border-box;         
                }
            }
        }
        // 场次
        >section {
            padding: 0.37rem 0.45rem 0.4rem 0.5rem;
            @include f_be_ce;
            border-bottom: 2px solid #e1e1e1;
            // 左边
            >div:nth-of-type(1) {
                // 第一行
                >div:nth-of-type(1) {
                    @include f_be_ce;
                    width: 7rem;
                    >span:nth-of-type(1) {
                        font-family: ziti;
                        font-size: 0.52rem;
                        font-weight: bold;
                        color: #232323;
                    }
                    >span:nth-of-type(2) {
                        font-size: 0.32rem;
                        margin-right: 0.8rem;
                    }
                    >span:nth-of-type(3) {
                        font-size: 0.47rem;
                        color: #df403f;
                        i {
                            font-style: normal;
                            font-size: 0.28rem;
                        }
                    }
                }
                // 第二行
                >div:nth-of-type(2) {
                    width: 7rem;
                    font-size:  0.34rem;
                    color: #979797;
                    @include f_be_ce;
                    line-height: 2;
                    >span:nth-of-type(3) {
                        color: #ff9900;
                    }
                }
            }
            // 右边
            >p:nth-of-type(1)>a {
                font-size: 0.32rem;
                padding: 0.17rem;
                border: 2px solid #df403f;
                color: #df403f;
                border-radius: 10px;
            }
        }
    }
}
V________
关注
专栏目录
html+css实现猫眼移动端“我的”静态页面
weixin_45762315的博客
11-17 1457
我的 laD842919168 V1 青铜会员 > <!-- 想看 --...
猫眼app产品分析和原型绘制
zpjlkjxy的博客
05-27 6764
本项目为学习产品知识和技能过程中的一个小结，针对猫眼电影app的简单产品分析，顺便巩固xmind和axure技能。 项目名称 ：猫眼电影app 产品背景：中国电影市场近10年（2009年-2019年）由高速增长阶段过渡到低速增长阶段，与北美地区还存在较大差距，预计未来一段时间将保持低速增长态势。 产品介绍：猫眼电影是美团旗下的一家集媒体内容、在线购票、用户互动社交、电影衍生品销售等服务的一站式电影互联网平台。 发展历程及现状：猫眼电影原名“美团电影”,是美团网于2012年推出的一款子产品，后来.
Axure-APP原型设计-图片轮盘式导航-猫眼电影app为例
12-18
图片轮盘式导航集合了图片、文字等页面元素，通过横向交互，供用户动态浏览信息。从交互形态上说，可以认为它是一种“不会循环播放的跑马灯”。 “猫眼”首页中的“正在热映”“即将上映”“热门演出”等栏目，均采用图片轮盘式导航。用户通过筛选进入心仪影院，选择准备观看的电影，以及日期、场次。在“影院”页面中用户可以选择影片，依旧采用了图片轮盘式导航。使得原本可能需要多个页面层级展现的信息，在当前页面即可满足用户的操作需求，大大提升了用户体验。 本案例需要完成的任务有：第一，制作该案例的静态页面；第二，设置图片轮盘式导航；第三，设置日期与场次的交互效果；第四，设置影片、日期和场次的交互效果。
猫眼APP注册界面布局
V________的博客
11-30 390
<!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.cs
html+css猫眼PC静态页面（初学者）
05-08
html+css，含css的一些特效，适合前端初学者练习的静态网页。
微信小程序复习1~6章
weixin_75196106的博客
04-24 544
第一章第二章。
微信小程序 第一~三章总结
最新发布
weixin_75196954的博客
04-25 2008
成功创建项目后，进入如图1-23所示的微信小程序开发者工具界面。我们把微信小程序开发者工具界面划分五大区域：工具栏、模拟区、目录文件区、编辑区和调试区。1.工具栏在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编释、预览，切换后台，清理缓存等。2. 模拟区在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。3.目录文件区。
微信小程序开发的学习资料收集
热门推荐
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
小程序的学习资料收集
weixin_30414245的博客
02-23 2932
收集学习资料 1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/desig...
HTML5+CSS实现猫眼界面
07-21
在"猫眼界面"的实现中，`style.css`文件包含了所有关于布局、颜色、字体和动画的规则。我们可以用CSS选择器如类选择器（`.class`)、ID选择器（`#id`)以及元素选择器（`element`)来定位并修改特定的HTML元素。例如，...
类似猫眼的电影票务app ui .xd素材下载
04-20
3. **猫眼App**：猫眼是中国知名的在线票务平台，集电影票预订、演出票购买、电影资讯、影评分享等功能于一体，其界面设计通常被视为行业标准和参考模板。 4. **UI素材**：UI素材是设计师在构建用户界面时使用的...
HTML + CSS 实现猫眼电影静态页面
07-02
在本项目中，我们将探讨如何使用HTML和CSS技术来创建一个猫眼电影的静态页面。这个练习主要聚焦于浮动布局，这是网页设计中一个基础但至关重要的概念。 首先，HTML（HyperText Markup Language）是构建网页内容的...
微信小程序资源集合
xiechengfa的技术笔记
07-18 6658
1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html
微信小程序踩坑集合
weixin_30326515的博客
03-07 7602
1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4：设计...
猫眼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
猫眼APP静态界面布局，跳转与简单样式
V________的博客
11-30 1127
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshee
猫眼APP影院静态界面
V________的博客
12-01 891
<!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
猫眼APP选座静态界面布局
V________的博客
12-01 401
<!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
08-12
仿猫眼电影的静态HTML是一种仿猫眼电影官网的HTML网页。静态HTML是指在没有动态数据交互的情况下，只使用HTML、CSS、JavaScript等前端技术创建的网页。仿猫眼电影静态HTML是通过模仿猫眼电影官网的布局、样式和功能，使用HTML标签、CSS样式和JavaScript脚本来实现的仿制品。 在仿猫眼电影静态HTML中，可以使用HTML标签来搭建网页的结构，包括头部、导航、内容区和底部等各个部分。通过CSS样式来设置页面的布局、颜色、字体、边距等各种样式效果，使页面的外观与猫眼电影官网相似。同时，可以使用JavaScript脚本来实现一些交互效果，例如点击导航栏切换菜单、图片轮播等功能。 仿猫眼电影静态HTML可以使用网页开发工具如Sublime Text、Visual Studio Code等进行编写和编辑，也可以使用Web浏览器进行预览和调试。通过合理的HTML标签嵌套和设置CSS样式，可以使整个页面看起来更加美观和整洁。 总之，仿猫眼电影的静态HTML是一种通过模仿猫眼电影官网的布局、样式和功能，使用HTML、CSS和JavaScript等前端技术来实现的仿制品。通过合理的标签结构、样式设置和脚本编写，可以创建出与猫眼电影官网相似的静态网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值