三、我的/登录 栏制作《仿淘票票系统前后端完全制作(除支付外)》

我的页分为登录、注册、我的,如果登录了那么就显示我的页面否则显示登录页。
登录页:
在这里插入图片描述
我的页:
在这里插入图片描述

一、登录页制作

1.1 登录头制作

首先我们创建一个行,命名为登录块,设置高度为包裹:
在这里插入图片描述

之后将会在这个行中包裹对应的登录页面。

登录页面原版可以看见其中有一个 logo 居于正中间:
在这里插入图片描述
可以理解为一个行设置具体的高度,并且给予了垂直水平居中,而中间红色部分是 logo 区域,我们只需要创建一个指定大小的行,设置背景色就会居中。

接着创建一个行,命名为 logo,设置背景色透明,高度为 150px,并且设置垂直和水平对齐为居中:
在这里插入图片描述

接着创建在 logo 下创建一个行,给予这个行 80*80px 打大小,设置其背景色即可:
在这里插入图片描述
随后制作登录信息内容:
在这里插入图片描述

1.2 登录信息制作

登录信息可以明显的知道,是一个行包裹,每行信息为一个文本和一个输入框,那么此时创建一个行命名为登录信息,背景色透明,高度包裹,水平对齐为居中:
在这里插入图片描述
接着在这个行中创建一个行命名为 登录验证,顾名思义表示登录信息和验证码获取区域,需要设置其垂直水平对齐为居中,背景色透明、高度包裹:

在这里插入图片描述
接着创建两个行,一个命名为号码,另一个命名为验证码,一个用于验证码内容一个是号码内容,需要注意,设置垂直对齐为底部,为了方便其内容高度不一致导致的对齐问题:
在这里插入图片描述
接着创建一个输入框和一个文本:
在这里插入图片描述
想要使输入框有以上下划线效果只需要设置其父容器只显示下边距即可:
在这里插入图片描述
此时还需要注意,需要设置输入框取消显示边框及圆角:
在这里插入图片描述
号码部分内容也同理可得:
在这里插入图片描述
此时发现未知摆错,调换一下位置即可:
在这里插入图片描述
接着创建一个按钮和一个文本即可:
在这里插入图片描述
由于是垂直和左右居中,此时将会自动居中。

1.3 注册信息制作

注册信息制作很简单,直接赋值一个更改对应的文本即可:
在这里插入图片描述

那如何使其调换呢?

此时只需要隐藏其中一个块即可,例如隐藏注册块:
在这里插入图片描述
给登录的注册跳转一个事件,点击后跳转到登录信息,登录块显示,当前注册块消失即可:
在这里插入图片描述
同样,我们也需要到注册块编写事件,注册块点击后跳转到登录块,注册块消失即可:
在这里插入图片描述
记得设置完事件后要点击眼睛使其默认隐藏:
在这里插入图片描述

二、我的页面制作

2.1 我的页面与登录注册页逻辑

此时在什么时候才显示我的页面呢?肯定是已登录时显示我的页面,未登录显示登录注册页,那么我们此时应该有一个变量作为登录判断。

此时新建一个数字变量命名为UID,默认为0:
在这里插入图片描述
接着给予一个 if 判断,将注册和登录块都放到这个 if 容器之下:
在这里插入图片描述
接着给这个 if 容器一个条件,当 UID 等于 0 则显示此内容:
在这里插入图片描述
随后再创建一个 if 容器,用于判断 UID 不等于 1 则显示该部分内容:
在这里插入图片描述
我们可以重命名两个 if 容器,使其更清晰:
在这里插入图片描述

2.2 我的页面制作

接着在这个 if 语句内创建1个行,命名为头部,需要更高高度,给予对应的内边距:
在这里插入图片描述
接着在这个头部行内创建两个内容,一个是头像一个是文本,头像我给予 50*50px 的宽度:
在这里插入图片描述

那么此时头部制作完成。

接着创建一个行,命名为票券,在内部创建两个列:
在这里插入图片描述
当然票券给予对应的内边距,左右列宽度都为 50%,高度为包裹。

接着直接创建对应的图片和文本即可:
在这里插入图片描述
要注意,一定要设置水平和垂直为居中,否则内容就不居中了:
在这里插入图片描述
接着创建是一个广告行,具体内容重复不再赘述(自由设置大小边距):
在这里插入图片描述
接着创建一个帮助反馈行,这个行包含一个内容行,包含的内容行内两个列,一个叫做左一个叫做右,分别存储和文本和一个进入提示:

在这里插入图片描述
依旧给予左右 50% 宽度,设置对应的高度为包裹,以及帮助反馈和内容行的内边距:
在这里插入图片描述
接着添加对应文本信息:
在这里插入图片描述
创建多个文本信息:
在这里插入图片描述

2.3 管理员入口检查

此时管理员入口应该在只有管理员用户登录时才可以显示,那么此时创建一个变量,命名为用户类型:
在这里插入图片描述
当这个类型为管理员时,那么将显示管理员路口。

此时创建一个 if 容器,使管理员入口放入其中:
在这里插入图片描述
接着设置条件容器条件:
在这里插入图片描述
这些判定以后加上后台再逐一实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【NOIP2010】【P1317】乌龟棋

似乎很像搜索的DP(应该也可以用搜索写) 原题: 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物。乌龟棋的棋盘是一行N 个格子,每个格子上一个分数(非负整数)。棋盘第1格是唯一的起点&#xff0c…

mysql添加普通用户用于管理单一数据库

2019独角兽企业重金招聘Python工程师标准>>> 使用phpmyadmin进行操作 创建用户,输入密码 关键选择:勾选 Create database with same name and grant all privileges 其他权限一律不要勾选 转载于:https://my.oschina.net/u/2485194/blog/5491…

C# 11 新特性:接口中的静态抽象成员

之前假设我们有一个非常复杂的数学运算方法:public static int Calc(int x, int y) > x y;但是,上述方法只能支持int类型。如果需要传入其它数字类型,需要再次定义:public static double Calc(double x, double y) > x y;…

四、一般页面制作《仿淘票票系统前后端完全制作(除支付外)》

一、播放影片影院页制作 上一节已经做完了首页所有栏目内容,那么点击购票后应该出现对应有购票的影院,选择影院后进入购买票务页。 首先新建一个页面命名为播放该影片的影院: 接着复制首页中的标题栏到播放影片的影院页中,此时…

700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》

今天才想起来这回事,没办法就急急忙忙的赶工一下,接下来我就画一下这个海报试试手了: 一、背景制作 1.1 准备工作 先给整个网页制作一个布局吧,直接 flex 搞定,并且使其居中 justify-content、align-items 都要赋值为…

【CASS精品教程】win10安装CAD+CASS过程中出现的错误问题及解决办法集锦

文章目录 1. 无法安装2. 提示DWF Viewer、AutoCAD2008未安装3. 安装完成后一直出现如下窗口4. Win10 64位 cass9.1+cad2008打开后出现Frame主框架程序没有加载。5. 注册程序无法运行,提示由于无法安装此service pack。1. 无法安装 解决办法:开启Administrator,以管理员身份…

(01).NET MAUI实战 建项目

1.概要本系列文章将会针对.NET MAUI实战开发的一些内容,会长期不间断更新我了解学习到的内容。当学习新的软件开发技术时,都会从基础建项目开始MAUI也不例外。ref:https://docs.microsoft.com/zh-cn/dotnet/maui/get-started/first-app?pivo…

Android Studio 引用aar包 更新后找不到新增的方法问题(踩坑)

明明已经更新了aar文件,但死活找不到新增的方法,代码提示里也找不到新增的方法名,但编译能编译,运行也一切正常,只是IDE一直提示错误,有强迫症的小猿好几天都想不明白。 其间有高手指教说:“那…

Asp.net 批量导入Excel用户数据功能加强版

平时我们用Asp.net导入用户,一般是提供一个用户Excel表的模板,实际导入数据时并非有些人愿意按你的模版制表,因此对Asp.net导入功能进行加强,可以导入非模版化的Excel数据,并且支持一次处理多个Sheet表,方便…

C#+Signalr+Vue实现B站视频自动回复评论,当一个最懒程序员!

Part1前言前几天刷到了程序员鱼皮的自动回复视频评论的视频,于是我也想来试试!Part2开始第一步打开想要自动回复评论的视频url,打开调试模式!然后找到可以触发评论的网络请求可以看到我们的oid是可以唯一确定视频的id,那么这个oid…

一张图不用,纯CSS 做个生日贺卡

朋友生日了,直接画,炫技并且表示本人闲的全身疼才会去拿CSS画画,以此嘲弄对方的加班: 既然贺卡做出来了,那就顺便介绍一下贺卡制作流程吧,其实也不是什么技术,也就是CSS 拼拼拼就可以了&#…

Android Notification总结

Android Notification总结 目录[-] 一、通知的主要功能 二、通知简介 三、通知的使用流程 四、使用NotificationCompat.Builder设置通知的属性: 五、管理通知 一、通知的主要功能 显示接收到短消息、即使消息等信…

五、登录页倒计时制作《仿淘票票系统前后端完全制作(除支付外)》

一、登录功能的实现 首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/ 上一节我们已经完成了基本页面的制作,在本节中,我们将会开始完成登录功能的实现。 实现登录功能需要增加一个用户组件: 这个用户组件是需要选择…

【MATLAB统计分析与应用100】案例001:matlab使用Importdata函数导入文本txt数据

配套实验数据包下载:链接:https://pan.baidu.com/s/1T4zUFmCIOCKIisdGRQPddg?pwdddi1 文章目录1. 调用importdata函数读取文件中的数据2. 调用importdata函数读取文件数据,返回结构体变量x3. 调用importdata函数读取文件中的数据&#xff0c…

MAUI 入门教程系列(3.多目标平台)

前言如果您是第一次创建MAUI项目, 并且在之前也并没有接触过Xamarin.Forms应用, 或许你并不知道MAUI的强大优势, 在原来的Xamarin.Forms当中, 我们基于不同平台的项目他们是单独维护的。如下所示:因为如此, 你需要维护不同平台的项目。包括每个项目当中包含的资源、图像、属性定…

六、注册页功能制作《仿淘票票系统前后端完全制作(除支付外)》

一、注册块内容制作 首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/ 上一节已经知道了如何制作登录块内容,但是咱们先做还没有注册,所以就测试不了登录块功能,现在咱们同样的,在注册块中添加一个变量和一…

【MATLAB统计分析与应用100例】案例002:matlab使用xlsread函数读取excel中的数据

文章目录 1. 读取文件excel表中单元格A2:H4中的数据2. 读取excel第1个工作表中单元格A2:C3中的数据,将数据分别加1后返回3. 读取excel第1个工作表中单元格A2:H2中的数据,将读取到的数据分别加1,返回数值矩阵num,文本矩阵txt,元胞数组raw,变换后数值矩阵X1. 读取文件excel…

美图秀秀首页界面按钮设计(二)

本文实现美图秀秀首页中的按钮,它包含3张图片和一个文本。通过开发按钮,我们可以学到iOS的自定义控件,绘制图片和文本的知识。【声明:本博客只能用作学习用途,不得用于商业用途,图片资源均来自官方&#xf…

第三方免费加固横向对比

前言 基于java开发的android应用由于其语言的特性,所以很容易被反编译,虽然android提供了proguard,但是也只是增加了源码阅读的难度,其中业务逻辑依旧可以分析得出。有些人通过各种破解手段将apk文件破解、反编译,然后…