猫眼APP热映

最新推荐文章于 2024-05-22 11:23:16 发布
最新推荐文章于 2024-05-22 11:23:16 发布
阅读量131 收藏
点赞数
分类专栏： 猫眼APP静态界面布局与样式设定 文章标签： css css3 html html5 sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/110389267
版权
这是一个关于网页设计的示例，展示了电影‘热映’页面的布局。网页包含头部导航，选择城市下拉菜单，搜索框，电影海报，影片介绍，评分和评论，以及购票链接。设计中使用了CSS进行样式定义，包括渐变背景，顶部和底部边栏，以及不同元素的样式。此外，还展示了‘资讯’部分，包括两条资讯条目。
摘要由CSDN通过智能技术生成 
<!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/reying.css">
    <script src="./JS/auto-size.js"></script>
    <title>热映</title>
</head>

<body>
    <!-- 渐变 -->
    <!-- div1 -->
    <div class="top"></div>
    <header class="dai_reYing">
        <select name="" id="">
            <optgroup label="四川">四川</optgroup>
            <option value="成都" selected>成都</option>
            <option value="绵阳">绵阳</option>
            <optgroup label="浙江">浙江</optgroup>
            <option value="杭州">杭州</option>
            <option value="温州">温州</option>
        </select>
        <div>
            <nav>
                <ul>
                    <li class="rey"><a href="./reying.html">热映</a></li>
                    <li class="daiy"><a href="./daiying.html">待映</a></li>
                    <li><a href="#3">找片</a></li>
                </ul>
            </nav>

        </div>
        <label for="sousuo"><img src="./IMG/fangdajing.jpg" alt=""></label>
    </header>
    <!-- 搜索框 -->
    <form class="select">
        <input type="text" id="sousuo" required>
        <label for="sousuo">
            <span><i></i>找影视剧、影人、影院</span>
        </label>
    </form>
    <!-- 图片  -->
    <img src="./IMG/reyingdatu.jpg" alt="">
    <!-- 主体 -->
    <article>
        <section>
            <div class="jieshao no_border">
                <a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
                <!-- 图片右侧 -->
                <div>
                    <!-- 左文字 -->
                    <div>
                        <!-- 1 -->
                        <div>
                            <p>但丁密码</p>
                            <i></i>
                        </div>
                        <section>
                            <p>观众<span>6.5</span></p>
                            <p>专业<span>6.5</span></p>
                        </section>
                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="./xuanzuo.html"  class="red">购票</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 资讯 -->
        <div>
            <!-- 上 -->
            <div>
                <div>
                    <span>资讯</span>
                </div>
                <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
            </div>
            <!-- 下 -->
            <div>
                <div>
                    <span>资讯</span>
                </div>
                <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
            </div>
        </div>

        <section>
            <div class="jieshao">
                <a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
                <!-- 图片右侧 -->
                <div>
                    <!-- 左文字 -->
                    <div>
                        <!-- 1 -->
                        <div>
                            <p>但丁密码</p>
                            <i></i>
                        </div>
                        <section>
                            <p>观众<span>6.5</span></p>
                            <p>专业<span>6.5</span></p>
                        </section>
                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="./xuanzuo.html"  class="red">购票</a>
                    </div>
                </div>
            </div>
            <div class="jieshao">
                <a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
                <!-- 图片右侧 -->
                <div>
                    <!-- 左文字 -->
                    <div>
                        <!-- 1 -->
                        <div>
                            <p>但丁密码</p>
                            <i></i>
                        </div>
                        <section>
                            <p>观众<span>6.5</span></p>
                            <p>专业<span>6.5</span></p>
                        </section>
                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="./xuanzuo.html"  class="red">购票</a>
                    </div>
                </div>
            </div>

            <div class="jieshao">
                <a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
                <!-- 图片右侧 -->
                <div>
                    <!-- 左文字 -->
                    <div>
                        <!-- 1 -->
                        <div>
                            <p>但丁密码</p>
                            <i></i>
                        </div>
                        <section>
                            <p>观众<span>6.5</span></p>
                            <p>专业<span>6.5</span></p>
                        </section>
                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="./xuanzuo.html"  class="red">购票</a>
                    </div>
                </div>
            </div>

        </section>
    </article>
    <footer>
        <ul>
            <a href="./reying.html"  class="reying"><li></li></a>
            <a href="./yingyuan.html" class="yingyuan"><li></li></a>
            <a href="./faxian.html" class="faxian"><li></li></a>
            <a href="./my.html" class="my"><li></li></a>
            </a>
        </ul>
    </footer>
    <!-- 底部黑色 -->
    <div class="bottom"></div>
</body>

</html>

.rey {
    >a {
        color: #b42019!important;
        background-color: white;
    }
}
footer>ul> .reying>li {
    display: inline-block;
    width: 0.77rem;            
    height: 1.14rem;    
    background-image: url("../IMG/icon100.png");
    background-size: 5.6rem 5.1rem;
    background-position: 0rem -2.77rem!important;
}
body {       
    >img {
        width: 10.8rem;
        margin-top: 3.6rem;
    }
    >article {
        margin-bottom: 3.5rem;
        >section {
            .no_border {
                border: 0;
            }
        }
        // 资讯
        >div:nth-of-type(1) {
            background-color: white;
            >div {
                display: flex;
                align-items: center;
                >div {
                    margin-right: 0.3rem;
                    >span {
                        font-size: 0.25rem;
                        display: inline-block;
                        color: #ff9700;
                        border: 2px solid #ff9700;
                        padding: 0rem 0.07rem 0.02rem;
                        border-radius: 5px;
                        margin-left: 1.6rem;
                        vertical-align: 0.07rem;
                    }
                }
                p {
                    padding: 0.2rem 0;
                    font-size: 0.3rem;
                    color: #626262;
                    flex: 1;
                    border-top: 2px solid #eaeaea;
                    border-bottom: 2px solid #eaeaea;
                }
            }
            >div:nth-of-type(2) {
                >p {
                    border: 0;
                }
                border-bottom: 2px solid #eaeaea;
            }
        }
    }
}
V________
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
猫眼app产品分析和原型绘制
zpjlkjxy的博客
05-27 6735
本项目为学习产品知识和技能过程中的一个小结，针对猫眼电影app的简单产品分析，顺便巩固xmind和axure技能。 项目名称 ：猫眼电影app 产品背景：中国电影市场近10年（2009年-2019年）由高速增长阶段过渡到低速增长阶段，与北美地区还存在较大差距，预计未来一段时间将保持低速增长态势。 产品介绍：猫眼电影是美团旗下的一家集媒体内容、在线购票、用户互动社交、电影衍生品销售等服务的一站式电影互联网平台。 发展历程及现状：猫眼电影原名“美团电影”,是美团网于2012年推出的一款子产品，后来.
vue实现仿猫眼电影
qq_49178370的博客
10-20 1278
vue实现仿猫眼电影
基于Android Studio 实现仿猫眼电影APP 1.0
编程乐学的博客
11-16 973
基于Android Studio 实现仿猫眼电影APP 1.0 随着智能手机的普及和移动互联网的发展，移动应用不断涌现，其中包括许多电影相关的应用。猫眼App是中国一款非常受欢迎的电影资讯和票务平台，为用户提供了电影排片信息、购买电影票等功能，深受用户喜爱。
基于 Android Studio 实现猫眼电影App 2.0（电影购票）
编程乐学的博客
05-22 1223
基于Android studio 软件 java语言实现的 猫眼电影app 2.0 版本 页面布局、控件、ico资源等进行了美化，新增购票、修改密码、退出登录、预约等功能！
uni-app项目之电影预告
wsaicyj的博客
11-07 636
uni-app练手项目-电影预告
猫眼产品分析
zhuhengv的博客
12-23 9953
一、前言 本文试图通过对猫眼电影的版本迭代历程分析、用户分析、功能分析、运营分析以及数据表现来回答以下几个问题： （1）猫眼电影的产品定位？ （2）猫眼电影产品设计及运营中有哪些亮点和策略？ （3）产品以后的迭代方向？ 二、产品定位及运营 产品定位主要围绕以下几个方面展开： （1）产品概述及发展历程 （2）产品理念 （3）用户分析 2.1产品概述及发展历程 2
小程序项目之猫眼案例-代码
weixin_44867717的博客
10-19 3052
小程序项目之猫眼案例-源码 小程序页面结构 <!-- 简介 --> <view class="detail"> <!-- 背景滤镜 --> <div class="filter" style="background-image: url(https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-21.jpg)"></div> <view class="wrap"> <
uniapp猫眼电影小程序（附带猫眼电影api接口）
热门推荐
zwy0724的博客
04-13 1万+
此项目为自学uniapp后编写的一个简单项目，仅供学习使用，项目中使用了部分猫眼官网api，请知悉 主页 采用了后端webapi接口，接口为自己编写的，可供学习时调用，如果有新的接口需求，可以留言看情况增加 中间的热映采用了猫眼API，下面附图 搜索页 因为搜索页需要大量的数据支撑，所以这个页面的所有接口均采用猫眼提供的API，包含了三个接口 模糊查询，分页模糊查询，查询电影详情，如图 以上项目会逐步完善，并且同步发布到我的github上，相关接口和源码也可以去下...
猫眼电影产品分析
pmcaff2008的博客
12-13 7891
一、前言    本文试图通过对猫眼电影的版本迭代历程分析、用户分析、功能分析、运营分析以及数据表现来回答以下几个问题：    （1）猫眼电影的产品定位？    （2）猫眼电影产品设计及运营中有哪些亮点和策略？    （3）产品以后的迭代方向？    本文所有数据均来自于互联网，由于数据来源有限及个人能力所限，观点仅作抛砖引玉。二、产品定位及运营    产品定位主要围绕以下几个方面展开：    （1
基于java开发的猫眼电影app
05-10
《基于Java开发的猫眼电影App深度解析》 在当今数字化时代，移动应用已经成为人们生活中不可或缺的一部分，尤其在娱乐领域，电影票务类App如猫眼电影，以其便捷的购票体验，深受用户喜爱。本文将深入探讨如何使用...
猫眼APP.rp
10-22
猫眼APP.rp
类似猫眼的电影票务app ui .xd素材下载
04-20
3. **猫眼App**：猫眼是中国知名的在线票务平台，集电影票预订、演出票购买、电影资讯、影评分享等功能于一体，其界面设计通常被视为行业标准和参考模板。 4. **UI素材**：UI素材是设计师在构建用户界面时使用的...
猫眼类似 电影票务app ui .xd素材下载
04-20
【标题】中的“猫眼类似电影票务app ui .xd素材下载”表明这是一个与猫眼电影App类似的用户界面设计资源，适用于UI设计师进行电影票务应用的界面设计参考。.xd格式是Adobe XD（Experience Design）软件所使用的文件...
Axure-APP原型设计-图片轮盘式导航-猫眼电影app为例
12-18
“猫眼”首页中的“正在热映”“即将上映”“热门演出”等栏目，均采用图片轮盘式导航。用户通过筛选进入心仪影院，选择准备观看的电影，以及日期、场次。在“影院”页面中用户可以选择影片，依旧采用了图片轮盘式...
猫眼APP登录页静态界面
V________的博客
11-30 1398
<!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 1110
<!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 865
<!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 392
<!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演唱会抢票脚本
最新发布
06-09
猫眼APP是一个流行的在线票务平台，用户可以通过它购买演唱会门票。由于演唱会门票通常需求量大且热门，有时官方抢票会非常紧张。虽然官方没有直接提供抢票脚本，但一些用户可能会寻找第三方工具或编写自动化脚本来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值