猫眼APP影院静态界面

最新推荐文章于 2022-06-02 22:58:16 发布
最新推荐文章于 2022-06-02 22:58:16 发布
阅读量891 收藏 1
点赞数
分类专栏： 猫眼APP静态界面布局与样式设定 文章标签： html5 html css3 css sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/110389897
版权 
<!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/yingyuan.css">
    <script src="./JS/auto-size.js"></script>
</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>
            <p>影院</p>
        </div>
        <i></i>
        <label for="sousuo"><img src="./IMG/fangdajing.jpg" alt=""></label>
    </header>
    <!-- div2 -->
    <!-- 图片 -->
    <div>
        <img src="./IMG/yingyuandatu.jpg" alt="爆米花套餐">
    </div>
    <!-- 影院信息 -->
    <article>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p><a href="./choose_fyt.html">太平洋影城(新城市店)</a></p>
                    <span>14.9</span>
                    <span>元起</span>
                </div>
                <!-- 第二行 -->
                <p>
                    青羊区西大街1号新城市广场A栋2楼
                </p>
                <!-- 第三行 -->
                <div>
                    <span>座</span>
                    <span>团</span>
                    <span>退</span>
                    <span>改签</span>
                    <span>会员卡</span>
                </div>
                <!-- 第四行 -->
                <div>
                    <span>慧</span>
                    <p>惠侠探杰克:永不回头等2部影片特惠</p>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                1.4km
            </div>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p><a href="./choose_fyt.html">UME影城(金牛店)</a></p>
                    <span>24.4</span>
                    <span>元起</span>
                </div>
                <!-- 第二行 -->
                <p>金牛区沙湾路1号汇龙湾广场3楼</p>
                <!-- 第三行 -->
                <div>
                    <span>座</span>
                    <span>团</span>
                    <span>退</span>
                    <span>改签</span>
                    <span>会员卡</span>
                </div>
                <!-- 第四行 -->
                <div>
                    <span>慧</span>
                    <p>惠侠探杰克:永不回头等2部影片特惠</p>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                1.5km
            </div>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p><a href="./choose_fyt.html">峨影1958电影城</a></p>
                    <span>14.9</span>
                    <span>元起</span>
                </div>
                <!-- 第二行 -->
                <p>青羊区清江东路360号（近成温立交桥）</p>
                <!-- 第三行 -->
                <div>
                    <span>座</span>
                    <span>团</span>
                    <span>退</span>
                    <span>改签</span>
                    <span>会员卡</span>
                </div>
                <!-- 第四行 -->
                <div>
                    <span>慧</span>
                    <p>惠侠探杰克:永不回头等2部影片特惠</p>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                2.0km
            </div>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p><a href="./choose_fyt.html">太平洋影城(沙湾店)</a></p>
                    <span>19.9</span>
                    <span>元起</span>
                </div>
                <!-- 第二行 -->
                <p>金牛区二环路北一段10号凯德广场4楼</p>
                <!-- 第三行 -->
                <div>
                    <span>座</span>
                    <span>团</span>
                    <span>退</span>
                    <span>改签</span>
                    <span>会员卡</span>
                </div>
                <!-- 第四行 -->
                <div>
                    <span>慧</span>
                    <p>惠侠探杰克:永不回头等2部影片特惠</p>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                2.4km
            </div>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p><a href="./choose_fyt.html">幸福蓝海国际影城</a></p>
                    <span>28.9</span>
                    <span>元起</span>
                </div>
                <!-- 第二行 -->
                <p>青羊区二环路西二段19号仁和春天广场C座5楼</p>
                <!-- 第三行 -->
                <div>
                    <span>座</span>
                    <span>团</span>
                    <span>退</span>
                    <span>改签</span>
                    <span>会员卡</span>
                </div>
                <!-- 第四行 -->
                <div>
                    <span>慧</span>
                    <p>惠侠探杰克:永不回头等2部影片特惠</p>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                2.5km
            </div>
        </section>
        <section>
            <!-- 左边 -->
            <div>
                <!-- 第一行 -->
                <div>
                    <p><a href="./choose_fyt.html">橙天嘉禾影城(富力店)</a></p>
                    <span>14.4</span>
                    <span>元起</span>
                </div>
                <!-- 第二行 -->
                <p>青羊区上西顺城街289富力天汇mall7楼</p>
                <!-- 第三行 -->
                <div>
                    <span>座</span>
                    <span>团</span>
                    <span>退</span>
                    <span>改签</span>
                    <span>会员卡</span>
                </div>
                <!-- 第四行 -->
                <div>
                    <span>慧</span>
                    <p>惠侠探杰克:永不回头等2部影片特惠</p>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                2.7km
            </div>
        </section>

    </article>
    <!-- 定位框 -->
    <aside>
        <!-- 左边 -->
        <div>
            <i></i>
            <span>金牛区二环路北一段</span>
        </div>
        <!-- 右边 -->
        <i></i>
    </aside>
    <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>
        </ul>
    </footer>
    <div class="bottom"></div>
</body>

</html>

@mixin f__ce {
    display: flex;
    align-items: center;
}
@mixin  f_be_ce {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@mixin i_tu($width,$height,$x,$y) {
    width: $width;
    height: $height;
    background-image: url("../IMG/icon100.png");
    background-size: 5.6rem 5.1rem;
    background-position: $x $y;
}
footer>ul> .yingyuan>li {
    display: inline-block;
    width: 0.77rem;            
    height: 1.14rem;    
    background-image: url("../IMG/icon100.png");
    background-size: 5.6rem 5.1rem;
    background-position: -0.93rem -2.76rem!important;
}
body{
    background-color: white;
    .dai_reYing {
        >div {
            p {
                text-align: center;
                color: white;
                font-size: 0.5rem;
            }
        }
        >i {
            display: inline-block;
            width: 0.63rem;
            height: 0.63rem;
            background-image: url('../IMG/icon100.png');
            background-position: -3.83rem -1.35rem;
            background-size: 5.6rem 5.1rem;
            margin-right: 0.5rem;
        }
    }
    >div:nth-of-type(2) {
        margin-top: 2.25rem;
        >img {
            width: 10.8rem;
        }
    }
    // 影院信息
    >article {
        margin-bottom: 4rem;
        // 每一部分
        >section {
            @include f_be_ce;
            padding: 0.38rem 0.45rem 0.45rem;
            border-bottom: 2px solid #d4d4d4;
            // 左边
            >div:nth-of-type(1) {
                width: 7.5rem;
                >div {
                    @include f__ce;
                }
                // 第一行
                >div:nth-of-type(1) {
                    margin-bottom: 0.24rem;
                    >p>a {
                        color: black;
                        font-size: 0.46rem;
                        margin-right: 0.2rem;
                    }
                    >span:nth-of-type(1) {
                        font-size: 0.34rem;
                        color: #f34c37;
                    }
                    >span:nth-of-type(2) {
                        font-size: 0.34rem;
                        color: #979797;
                    }
                }
                // 第二行
                >p:nth-of-type(1) {
                    margin-bottom: 0.25rem;
                    font-size: 0.36rem;
                    color: #616161;
                }
                // 第三行
                >div:nth-of-type(2) {
                    font-size: 0.3rem;
                    margin-bottom: 0.2rem;
                    @include f__ce;
                    >span {
                        padding: 0rem 0.1rem;
                        box-sizing: border-box;
                        border-radius: 10px;
                        margin-right: 0.1rem;
                    }
                    >span:nth-of-type(1),>span:nth-of-type(2) {
                        color: #5299a8;
                        border: 1px solid #5299a8;
                    }
                    >span:nth-of-type(3),>span:nth-of-type(4) {
                        color: white;
                        background-color: #8cc6e7;
                        border: 1px solid #8cc6e7;
                    }
                    >span:nth-of-type(5) {
                        color: white;
                        background-color: #ffb742;
                        border: 1px solid #ffb742;
                    }
                }
                // 第四行
                >div:nth-of-type(3) {
                    margin-top: 0.28rem;
                    font-size: 0.38rem;
                    color: #989898;
                    >span:nth-of-type(1) {
                        font-size: 0.3rem;
                        color: white;
                        background-color: #f98372;
                        border: 1px solid #f98372;
                        padding: 0rem 0.1rem;
                        box-sizing: border-box;
                        border-radius: 10px;
                        margin-right: 0.1rem;
                    }
                }
            }
            // 右边
            >div:nth-of-type(2) {
                color: #989898;
            }
        }
    }    
    >aside {
        background-color: rgba($color: #eeeeee, $alpha: 0.8);
        width: 9.55rem;
        position: fixed;
        bottom: 3.32rem;
        right: 0.6rem;
        @include f_be_ce;
        padding: 0.14rem 0.3rem;
        font-size: 0.36rem;
        box-sizing: border-box;
        border-radius: 15px;
        z-index: 2;
        >div:nth-of-type(1) {
            @include f_be_ce;
            width: 3.9rem;
            color: #949494;
            >i {
                @include i_tu(0.43rem,0.47rem,-3.91rem,-3.20rem)
            }
        }
        >i {
            @include i_tu(0.44rem,0.47rem,-3.91rem,-2.72rem)

        }
    }
 
}
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
简单仿猫眼电影首页静态页面.rar
08-05
自己练习html和css时做的一个非常简单的仿猫眼电影首页的静态页面，内容是随便写的，主要是为了练习浮动，常规流布局等，仅供参考！
电影静态网页
daozhu_123的博客
12-24 444
电影网页制作，成品展现，不同电影，网页更美观，不同的网页效果，使网页更丰富美观。
猫眼APP详情静态界面
V________的博客
11-30 303
<!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
02-22
金逸电影网站 HTML 全站 有在线选座
html+css猫眼PC静态页面（初学者）
05-08
html+css，含css的一些特效，适合前端初学者练习的静态网页。
Axure-APP原型设计-图片轮盘式导航-猫眼电影app为例
12-18
用户通过筛选进入心仪影院，选择准备观看的电影，以及日期、场次。在“影院”页面中用户可以选择影片，依旧采用了图片轮盘式导航。使得原本可能需要多个页面层级展现的信息，在当前页面即可满足用户的操作需求，大大...
基于vue+node.js制作猫眼电影基本网页
06-16
本文将详细讲解如何基于Vue.js和Node.js技术栈构建一个简易版的猫眼电影网站，适合于大学生在软件工程课程中进行项目实践或作为毕业设计参考。我们将涵盖Vue.js的基本概念、Node.js后端开发以及如何整合这两个技术来...
猫眼.zip微信小程序模板源码纯前端静态小程序源码导入就可显示
02-24
【猫眼.zip微信小程序模板源码】是一款专为学生、程序员和小公司设计的纯前端静态小程序源码，用户只需将其导入即可快速显示并运行。这个模板提供了基础的微信小程序功能，适合用来进行毕业设计、学习研究或快速构建...
猫眼电影小程序前后端分离(node后端).zip
08-05
在猫眼电影小程序中，开发者可能使用了微信小程序开发框架，如微信开发者工具，它提供了丰富的组件和API，便于快速构建用户界面。开发者需要掌握WXML（微信小程序标记语言）和WXSS（微信小程序样式语言），以及...
会员卡模板
09-10
cdr格式的矢量设计LOGO,可以任 意修改颜色文字内容和排版的
HTML + CSS 实现猫眼电影静态页面
王大傻的博客
06-02 4265
HTML + CSS 实现猫眼 电影 静态页面
影院在线售票云平台（仿猫眼电影，附SpringBoot项目源码）
03-16
影院在线售票云平台是模仿猫眼电影开发的在线售票系统，系统分为前端网站及后台管理2部分，主要功能有影院管理，电影管理，影厅管理，排片管理，选座售票，演员管理，评论管理，影片排名，票房收入，票房排名，财务报表，权限控制及系统日志等功能，系统采用SpringBoot ,mybatis,easyui,ajax,mssql数据库等技术开发。提供项目源代码下载，系统功能完善，可直接运行。项目开发语言：SpringBoot ,mybatis,easyui,ajax,mssql数据库项目运行环境：jdk1.8及以上版本,tomcat8.0及以上版本,mysql5.5及以上版本项目开发工具: 本项目开发工具是Intellij Idea目标掌握SpringBoot等技术，熟悉影院在线售票系统流程，主要功能有影院管理，影厅管理，电影管理，排片管理，选座售票，演员管理，评论管理，影片排名，票房收入，票房排名，财务报表，权限控制及系统日志等功能
html+css实现猫眼电影“榜单”静态页面
weixin_45762315的博客
11-17 5996
首页 首页...
影视APP下载页面html源码
php源码
01-16 2287
预览图片： 用记事本打开修改你app下载地址就可以了，然后上传主机根目录解压运行就行了 下载地址： http://www.bytepan.com/uwe5rwt7Kc9
(爬取猫眼电影TOP100的电影信息（含图片、评分等）)
qq_44988175的博客
03-14 5240
爬取猫眼电影TOP100的电影信息（含图片、评分等）让我们直接进入正题一、导入需要的库2.获取页面3.分析页面4.保存文件全部代码 让我们直接进入正题 对猫眼电影的网站进行分析 其链接为：https://maoyan.com/board/4? 一、导入需要的库 本次爬取任务主要依赖于python的requests、beautifulsoup等相关库，如果没有，可以使用pip命令安装 import requests import re import time from bs4 import Beauti
前端猫眼影院后台部分代码
GPANLIN7的博客
01-16 1986
猫眼项目的实现(影院后台)： 所用知识： 1.代理服务器 2.三层架构 3.layUI框架 首先我们建立两个文件夹
爬取猫眼电影top100的代码
black_hole6的博客
10-04 799
废话不说，代码附上：   #encoding:utf-8 import requests import re import json from multiprocessing import Pool #多线程模块 #获取网页源代码 def get_one_page(url): #添加头信息 headers = {'User-Agent':'Mozilla/...
猫眼app演唱会抢票脚本
最新发布
06-09
猫眼APP是一个流行的在线票务平台，用户可以通过它购买演唱会门票。由于演唱会门票通常需求量大且热门，有时官方抢票会非常紧张。虽然官方没有直接提供抢票脚本，但一些用户可能会寻找第三方工具或编写自动化脚本来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值