猫眼APP我的界面布局

最新推荐文章于 2022-10-24 00:03:09 发布
最新推荐文章于 2022-10-24 00:03:09 发布
阅读量236 收藏
点赞数
分类专栏： 猫眼APP静态界面布局与样式设定 文章标签： css css3 html html5 sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/110389185
版权 
<!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/my.css">
    <script src="./JS/auto-size.js"></script>
</head>

<body>
    <!-- div1 -->
    <div class="top"></div>
    <header>
        <img src="./IMG/loading_2.e3d934bf_02.png" alt="猫眼">
        <!-- 文字 -->
        <div>
            <p>IaD842919168</p>
            <span><i>V1</i>&nbsp;&nbsp;青铜会员</span>
        </div>
        <!-- 箭头 -->
        <div><a href="./login.html">></a></div>
    </header>
    <!-- 想看 看过 -->
    <!-- div2 -->
    <div>
        <ul>
            <li>
                <i></i>
                <span>想看&nbsp;0</span>
            </li>
            <li>
                <i></i>
                <span>看过&nbsp;0</span>

            </li>
            <li>
                <i></i>
                <span>影评&nbsp;0</span>

            </li>
            <li>
                <i></i>
                <span>话题&nbsp;0</span>
            </li>
        </ul>
    </div>
    <!-- 我的订单 -->
    <!-- div3 -->
    <div>
        <div class="din">
            <p>我的订单</p>
            <p>全部&nbsp;&nbsp;&gt;</p>
        </div>
        <!-- 2 -->
        <div>
            <ul>
                <li>
                    <i></i>
                    <span>未消费</span>
                </li>
                <li>
                    <i></i>
                    <span>待消费</span>

                </li>
                <li>
                    <i></i>
                    <span>待评价</span>

                </li>
                <li>
                    <i></i>
                    <span>退款</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 我的消息 -->
    <!-- div4 -->
    <div class="din">
        <p>我的消息</p>
        <p>&gt;</p>
    </div>
    <!-- 我的收藏 -->
    <!-- div5 -->
    <div class="din">
        <p>我的收藏</p>
        <p>&gt;</p>
    </div>
    <!-- 会员中心 -->
    <!-- div6 -->
    <div class="din">
        <p>会员中心</p>
        <p>&gt;</p>
    </div>
    <!-- 我的成就 -->
    <!-- div7 -->    
    <div class="din">
        <p>我的成就</p>
        <p>&gt;</p>
    </div>
    <!-- 美团钱包 -->
    <!-- div8 -->  
    <div class="din">
        <p>美团钱包</p>
        <p>&gt;</p>
    </div>
    <!-- 我的余额 -->
    <!-- div9 -->     
    <div class="din">
        <p>我的余额</p>
        <p>0.00元&nbsp;&nbsp;&gt;</p>
    </div>
    <!-- 优惠券 -->
    <!-- div10 -->      
    <div class="din">
        <p>优惠券</p>
        <p>0张可用&nbsp;&nbsp;&gt;</p>
    </div>
    <!-- 商城 -->
    <!-- div11 -->       
    <div class="din">
        <p>商城</p>
        <p>&gt;</p>
    </div>
    <!-- 设置 -->
    <!-- div12 -->  
    <div class="din">
        <p>设置</p>
        <p>手机绑定与更换&nbsp;&nbsp;&gt;</p>
    </div>
    <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_ce_ce {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin  f_be_ce {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin f_col_ce_ce {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@mixin tubiao($width,$height,$x,$y) {
    display: inline-block;
    width: $width;
    height: $height;
    background-image: url('../IMG/icon.png');
    background-position: $x $y;
    background-size: 5rem 3rem;
    margin-bottom: 0.2rem;
}
footer>ul> .my>li {
    display: inline-block;
    width: 0.77rem;            
    height: 1.14rem;    
    background-image: url("../IMG/icon100.png");
    background-size: 5.6rem 5.1rem;
    background-position: -3.02rem -1.57rem!important;
}
body {
    >header {
        width: 10.8rem;
        color: white;
        height: 3.3rem;
        box-sizing: border-box;
        margin-top: 0.75rem;
        padding: 0.7rem 0.5rem;
        background-color: #d33f36;
        @include f__ce;
        >img {
            width: 1.95rem;
            height: 1.95rem;
        }
        // 文字
        >div:nth-of-type(1) {
            flex: 1;
            margin-left: 0.45rem;
            >p {
                font-size: 0.38rem;
                margin-bottom: 0.1rem;
            }
            >span {
                font-size: 0.34rem;
            }
        }
        // 箭头
        >div:nth-of-type(2)>a {
            color: white;
            font-size: 0.6rem;
        }
    }
    >div:nth-of-type(2) {
        background-color: white;
        height: 2.1rem;
        box-sizing: border-box;
        padding: 0.44rem 0 0.4rem;
        font-size: 0.38rem;
        border-bottom: 1px solid  #bebcbc;
        >ul {
            width: 10.8rem;
            @include f_be_ce;
            >li {
                width: 2.7rem;
                @include f_col_ce_ce;
            }
            >li:nth-child(1)>i {
                @include tubiao(0.7rem,0.62rem,0,0)
            }
            >li:nth-child(2)>i {
                @include tubiao(0.7rem,0.58rem,-0.95rem,0)
            }
            >li:nth-child(3)>i {
                @include tubiao(0.75rem,0.55rem,-1.8rem,0)
            }
            >li:nth-child(4)>i {
                @include tubiao(0.67rem,0.65rem,-2.8rem,0)
            }
            >li:nth-child(-n+3) {
                border-right: 1px solid #bebcbc;
            }
        }
    }
    //共用样式
    .din {
        background-color:white;
        border-top: 1px solid #bebcbc;
        font-size: 0.44rem;
        @include f__ce;
        padding: 0.42rem;;
        >p:nth-of-type(1) {
            flex: 1;
        }
        >p:nth-child(2) {
            color: #999999;
        }
    }

    // 我的订单
    >div:nth-of-type(3) {
        margin-top: 0.45rem;
        >div:nth-of-type(2) {
            padding: 0.27rem 0;
            background-color:white;
            border-bottom: 1px solid #bebcbc;
            border-top: 1px solid #bebcbc;
            font-size: 0.34rem;
            >ul {
                width: 10.8rem;
                @include f_be_ce;
                >li {
                    width: 2.7rem;
                    @include f_col_ce_ce;
                }
                >li:nth-child(1)>i {
                    @include tubiao(0.65rem,0.55rem,0,-0.78rem)
                }
                >li:nth-child(2)>i {
                    @include tubiao(0.75rem,0.65rem,-0.95rem,-0.75rem)
                }
                >li:nth-child(3)>i {
                    @include tubiao(0.7rem,0.6rem,-1.85rem,-0.75rem)
                }
                >li:nth-child(4)>i {
                    @include tubiao(0.65rem,0.55rem,-2.85rem,-0.75rem)
                }
            }    
        }
    }
    >div:nth-of-type(4),>div:nth-of-type(8),>div:nth-of-type(12) {
        margin-top: 0.45rem;
    }
    >div:nth-of-type(12) {
        margin-bottom: 4rem;
    }
}
V________
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css猫眼PC静态页面（初学者）
05-08
html+css，含css的一些特效，适合前端初学者练习的静态网页。
UNIAPP实战项目笔记39 我的页面布局
Ggome的博客
11-17 3116
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。具体图片自己替换哈，随便找了个图片的做示例。components 组件。my.vue 我的页面布局。
android TextView设置字体类型
心之痕
04-20 7227
.自定义字体 android Typeface使用TTF字体文件设置字体 我们可以在程序中放入ttf字体文件，在程序中使用Typeface设置字体。 第一步，在assets目录下新建fonts目录，把ttf字体文件放到这。 第二步，程序中调用： AssetManager mgr=getAssets();//得到AssetManager Typeface tf=Typeface.cr
猫眼APP静态界面布局与样式设定
V________的博客
11-30 194
<!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="styleshe
app登录页面
jakelihua
10-24 2184
简介：本文以最简洁的语言，来为读者分享一个漂亮的app个性信息页面，使用的编译器为，的平台为，本文主要讲解思路，就算大家后面使用安卓，微信小程序等等其他平台，只要明白了我的思路，做起来便是很简单的事情。 第二步：CSS渲染 下面把每一步的样式的详细思路标注了出来。 第三步：完整代码 最后的结果：
基于java开发的猫眼电影app
05-10
开发者可以利用XML布局文件来定义界面元素，并通过Java代码进行动态控制，实现复杂的交互效果。 2. **网络通信**：猫眼电影App需要与服务器进行频繁的数据交换，如获取电影信息、查询放映时间、完成支付等。Java的...
类似猫眼的电影票务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）软件所使用的文件...
基于用户认知特点的移动终端APP界面设计.pdf
08-26
总的来说，移动终端APP界面设计需要综合运用认知心理学、用户体验设计、情感化设计和格式塔理论等多种理论，深入理解用户认知特点，通过布局、色彩、控件等设计元素，创造出直观、易用且符合用户预期的界面。...
高仿猫眼，下拉刷新，Fragment与ViewPager
07-14
"Fragment"和"ViewPager"则是Android开发中的核心组件，用于实现动态和灵活的界面布局。 1. **下拉刷新**：下拉刷新功能通常由SwipeRefreshLayout组件实现，它是一个可以包裹在一个ViewGroup内的布局，当用户下拉时...
航班管家向怡宁：如何做APP界面设计
wenzhouqin的专栏
08-28 1134
转自：http://cn.technode.com/post/2012-08-27/40038247302 航班管家创意设计总监向怡宁近日在一线下活动中分享移动应用界面设计的话题，很实用，在此与大家分享。   用户心态   用户在面对移动应用时，心态有三大特征：第一是微任务，我不会拿手机写一篇论，不会从头到尾看一部电影，使用是随时随地的；第二是查看周遭，也就是
美团App用户界面分析
热门推荐
weixin_30786617的博客
11-13 1万+
关于美团 美团网成立于2010年，合并前是中国销售额最大的独立团购 App。美团网2014年全年交易额突破460亿元，较去年增长180%以上，市场份额占比超60%，用户数超2亿~ 美团 App 用户界面分析 测试版本 V5.3 测试机型 iPhone6 (64GB) 测试时间 Jun,2015 导航界面分析 用户启动美团 App 后，进入后看见的便是美团 App 的首页（...
论坛小程序·“我的”页面布局
weixin_42132032的博客
04-04 1606
这次让我们来看看界面是怎么布局的吧！ 比如打开模拟器里“我的”页面，找到其所对应的me文件夹里的文件 打开me.wxml 查看第一段代码，发现其中包含五个view类，他们的属性标签分别是：class=‘amountBg’、class=‘img’、class=‘account’、class=‘nick-name’、class=‘address’， 对应着背景、头像、账号、昵称、地址五个方面。他们之...
Android-简易新闻界面的实现【Fragment】【附带源码】
localhost
01-25 5050
运行截图：  项目源码：上传的资源只能选5分的，不知道为何！https://download.csdn.net/download/qq_41113081/10938272
APP界面设计之页面布局的22条基本原则
jincm的专栏
03-22 3209
移动APP页面布局(Layout)是我们设计app界面的时候，最主要的设计任务。一个app的好与不好，很大部分取决于移动APP页面布局的合理性。 下图为APP最原始的布局模型。 页面布局顾名思义就是对页面的文字、图形或表格进行排布、设计。优秀的布局，需要对页面信息进行完整的考虑。即要考虑用户需求、用户行为，也要考虑信息发布者的目的、目标。 对用户行为的迎合和引导，有一些既
一步一步学习专栏：Python爬取静态网页（猫眼top100），实力好文
WjoKe的博客
06-29 1386
一步一步学习专栏：静态网页爬取 阿巴阿巴阿巴 大家好，我是猕猴tou儿，我又回来了，这篇帖子将以猫眼电影榜单top100榜为例讲解爬取静态网址的基本思路与爬取方法。 环境 这也是我们的第一步： import requests import time import re#正则 from lxml import etree#xpath from bs4 import BeautifulSoup#bs4 import pandas as pd#数据框 简单介绍一下这次学习所需要的库 request库：实现对网
我的Android之旅——UI界面六大布局之认识布局（一）
ma4596105的博客
03-12 1795
Android  六大布局（一）——LinearLayout&amp;RelativeLayout作者：码龙马龙Android六大布局：线性布局==LinearLayout、表格布局==TableLayout、相对布局==RelativeLayout、帧布局==FrameLayout、绝对布局==AbsoluteLayout、网格布局==GridLayout。其中，表格布局是线性布局的子类。网格布...
猫眼APP登录页静态界面
V________的博客
11-30 1390
<!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、付费专栏及课程。

余额充值