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

最新推荐文章于 2024-06-11 13:36:31 发布
最新推荐文章于 2024-06-11 13:36:31 发布
阅读量223 收藏 1
点赞数
分类专栏： 猫眼APP静态界面布局与样式设定 文章标签： html5 css3 sass css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/110387684
版权 
<!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/daiying.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>
    <!-- 主体 -->
    <article>
        <section>
            <p>预告片推荐</p>
            <div>
                <img src="./IMG/yugao1.jpg" alt="">
                <img src="./IMG/yugao2.jpg" alt="">
                <img src="./IMG/yugao1.jpg" alt="">
            </div>
        </section>
        <section>
            <p>近期最受期待</p>
            <div>
                <figure>
                    <p>16年待定</p>
                    <img src="./IMG/qidai1.jpg" alt="">
                    <figcaption>
                        三生三世十里桃花
                    </figcaption>
                    <p>210666人想看</p>
                </figure>
                <figure>
                    <p>16年待定</p>
                    <img src="./IMG/qidai1.jpg" alt="">
                    <figcaption>
                        三生三世十里桃花
                    </figcaption>
                    <p>210666人想看</p>
                </figure>
                <figure>
                    <p>16年待定</p>
                    <img src="./IMG/qidai1.jpg" alt="">
                    <figcaption>
                        三生三世十里桃花
                    </figcaption>
                    <p>210666人想看</p>
                </figure>
                <figure>
                    <p>16年待定</p>
                    <img src="./IMG/qidai1.jpg" alt="">
                    <figcaption>
                        三生三世十里桃花
                    </figcaption>
                    <p>210666人想看</p>
                </figure>
                <figure>
                    <p>16年待定</p>
                    <img src="./IMG/qidai1.jpg" alt="">
                    <figcaption>
                        三生三世十里桃花
                    </figcaption>
                    <p>210666人想看</p>
                </figure>
            </div>
        </section>
        <section>
            <p>10月26日 周三</p>
            <div class="jieshao">
                <a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
                <!-- 图片右侧 -->
                <div>
                    <!-- 左文字 -->
                    <div>
                        <!-- 1 -->
                        <div>
                            <p>但丁密码</p>
                        </div>
                        <!-- 2 -->
                        <div>
                            <span>42886</span><span>人想看</span>
                        </div>

                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="" class="red"><i></i>想看</a>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <p>10月26日 周五</p>
            <div class="jieshao">
                <a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
                <!-- 图片右侧 -->
                <div>
                    <!-- 左文字 -->
                    <div>
                        <!-- 1 -->
                        <div>
                            <p>但丁密码</p>
                            <i></i>
                        </div>
                        <!-- 2 -->
                        <div>
                            <span>42886</span><span>人想看</span>
                        </div>
                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="" >预售</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>
                        <!-- 2 -->
                        <div>
                            <span>42886</span><span>人想看</span>
                        </div>

                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="">预售</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>
                        <!-- 2 -->
                        <div>
                            <span>42886</span><span>人想看</span>
                        </div>

                        <p>蓝灯在初上，福安豪杰谜团</p>
                        <p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
                    </div>
                    <!-- 右 -->
                    <div>
                        <a href="">预售</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>
        </ul>
    </footer>
    <!-- 底部黑色 -->
    <div class="bottom"></div>
</body>

</html>

@mixin f__ce {
    display: flex;
    align-items: center;
}
@mixin f_be_sta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
@mixin f_be_ce {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.daiy {
    >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 {
    >article {
        margin-top: 3.7rem;
        margin-bottom: 3.5rem;
        >section:nth-of-type(1),>section:nth-of-type(2) {
            >p:nth-child(1) {
                font-size: 0.36rem;
                padding: 0.2rem 0.45rem;
            }
            >div {
                padding: 0.37rem 0 0.37rem 0.45rem;
                background-color: white;
                @include f__ce;
                width: 10.3rem;
                overflow-x: scroll;
                &::-webkit-scrollbar {
                    display: none;
                }
                >img {
                    width: 4.55rem;
                    margin-right: 0.3rem;
                }
                >figure {
                    font-size: 0.36rem;
                    width: 2.53rem;
                    box-sizing: border-box;
                    margin-right: 0.3rem;
                    >p:nth-of-type(1) {
                        margin-bottom: 0.3rem;
                        padding: 0 0.1rem;
                    }
                    >img {
                        height: 3.45rem;
                    }
                    >figcaption {
                        margin: 0.27rem 0 0.15rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        padding: 0 0.1rem;
                    }
                    >p:nth-of-type(2) {
                        font-size: 0.32rem;
                        color: #989898;
                        padding: 0 0.1rem;
                    }
                }
            }
        }
        >section:nth-of-type(n+3) {
            >p:nth-child(1) {
                font-size: 0.36rem;
                padding: 0.2rem 0.45rem;
            }

        }
    }
}
V________
关注
专栏目录
基于自动化工具autox.js的抢票（猫眼）
Java_wucao的博客
10-24 2万+
1.看到朋友圈抢周杰伦、林俊杰演唱会票贼难信息，特研究了一段时间，用autox.js写了自动化抢票脚本，购票页面自动点击下单。
猫眼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猫眼PC静态页面（初学者）
05-08
html+css，含css的一些特效，适合前端初学者练习的静态网页。
猫眼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
猫眼APP我的界面布局
V________的博客
11-30 251
<!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
最新！基于autoxjs写的一个猫眼抢票脚本，自动点击
m0_63289473的博客
04-22 3593
最近发现朋友圈抢周杰伦，林俊杰，陈奕迅等演唱会门票很难抢，研究了一些时间，不断升级写出最新版的猫眼抢票代码，从预约页面等待会自动点击下单（仅用于安卓机），大大提高抢票成功率。你需要掌握一定的autoxjx基础，最起码得会部署环境，如果实在不会可以私我。功能：能抢倒计时，能抢回流。运行截图可以看我前几个帖子。
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）是构建网页内容的...
猫眼抢票脚本
最新发布
JAVAsuperGod的博客
06-11 1377
猫眼抢票，autojs，安卓
基于Auto.js的猫眼抢票助手
m0_61239576的博客
05-27 1302
基于Auto.js的猫眼抢票助手
使用URL SCHEME启动天猫客户端并跳转到某个商品页面的方法
到底是天堂还是地狱...
12-03 3804
NSString *urlString = @“http://detail.tmall.com/item.htm?spm=a215v.7217581.610138.10.sO6nZp&id=36615660686&areaId=410100&cat_id=2&rn=ebe1860b08257aacbac424ed12d5208c&user_id=1098342976&is_b=1”; NSURL
详解&lt；meta name=“viewport“ content=“width=device-width“&gt；标签
热门推荐
RUCwang的博客
01-13 2万+
详解&lt;meta name="viewport" content="width=device-width"&gt;标签 我们拿到一个设计稿，以iPhone7为基准的， 好的，我们按照习惯在html插入标签 &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=...
手把手教你用RecyclerView实现猫眼电影选择效果
weixin_33754065的博客
11-07 468
一、简介 在官方推出RecyclerView 控件之后，越来越多的人都使用它代替之前的ListView。除了最普通的列表显示，RecyclerView还可以其他的很多效果，例如Banner等。在最近的一个电影票平台项目中，使用RecyclerView实现了仿猫眼的电影选择控件，如...
html头部中各式各样的meta
weixin_30668887的博客
06-05 225
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
猫眼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
小程序显示富文本内容格式混乱问题解决
qq_40387717的博客
07-07 1821
今天遇到一个小程序富文本显示格式混乱的问题 简单点来说就是在不该换行的地方他换行了. 开始以为是标签的问题 , 因为有些h5 标签小程序不支持 富文本内容源码: <p> <span style="font-size: 10.5pt;">1、</span> <span style="font-size: 10.5pt;"> <font>每位用户均可使用签到系统，会员签到赠送额外积分</font> </sp
仿猫眼电影静态html
08-12
通过CSS样式来设置页面的布局、颜色、字体、边距等各种样式效果，使页面的外观与猫眼电影官网相似。同时，可以使用JavaScript脚本来实现一些交互效果，例如点击导航栏切换菜单、图片轮播等功能。 仿猫眼电影静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值