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

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

一、登录页制作

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,一经查实,立即删除!

相关文章

ASP.NET站点配置以及VS2008下C#、JavaScript联合调试(Ajax) ----以最短路径Dijstra最短路问题为例

实验任务描述: 用VS2008构造ASP.NET站点开发环境;用ASP.NET完成JavaScript开发调试;用Ext3.0.0完成一个简单的树显示站;WebService程序设计,Dijstra最短路Web 服务;JavaScript通过Ajax技术调用WebService;一、Windows下WEB共享设置 打开你的WINDOWS,鼠标点开“我的电脑”…

【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;…

tomcat两个项目冲突

java.lang.IllegalStateException: Web app root system property already set to different value 最近在搭建项目环境的时候出现了下面的错误 java.lang.IllegalStateException: Web app root system property already set to different value: webapp.root [D:/tomcat-5.0.…

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

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

SuppressLint黄色警告的原因以及解决办法

最近在做项目的时候,碰到方法的前面和类的前面有时会出现SuppressLint或者SuppressWarnings这样的黄色警告,看起来很不舒服,于是上网搜集了一些相关资料。发现这些警告的出现其实是由于我们编写代码时的一些不规范的写法导致,解决…

重磅!win10无法安装.NET Framework 3.5服务解决办法(附离线安装包下载)

安装CASS测图软件之前需要安装CAD,Win10操作系统安装CAD时经常会需要.net framework 3.5,win10中默认是没有安装该环境的,需要单独安装。本文讲解Win10系统中在线和离线安装.net framework 3.5。 CAD 2006+CASS 7.1安装参考:《Win 10操作系统CAD 2006+CASS 7.1安装图文经典…

C语言试题三十六之将s所指字符串中所有下标为奇数位置上的字母转换为大写(若该位置上不是字母,则不转换)。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

数据结构实验之链表二:逆序建立链表

数据结构实验之链表二:逆序建立链表 Time Limit: 1000MS Memory Limit: 65536KBSubmit StatisticProblem Description 输入整数个数N,再输入N个整数,按照这些整数输入的相反顺序建立单链表,并依次遍历输出单链表的数据。Input 第一…

执行yum:Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again...

安装eple源,在yum clean all;yum makecache 后出现报错Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again解决办法:sed -i s/mirrorlist/\#mirrorlist/g epel.repo epel-testing.reposed -i s/\#…

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一直提示错误,有强迫症的小猿好几天都想不明白。 其间有高手指教说:“那…

VMware Workstation与VMware vSphere的区别

在学完vSphere后,想起了VMware Workstation。这两个都是虚拟化的东西,这两者到底有什么本质的不同呢?顺着我的思路我开始将所学过的进行检索期望从中寻到一丝半点的线索。很快大脑中建立了两个对他们明显的标签 VMware Workstation&#xff1…

C语言试题三十七之求除一个2×m整型二维数组中最大元素的值,并将此值返回调用函数。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

RSA加密解密

http://files.cnblogs.com/files/liuJava/rsa.zip、 直接上工具类 JAR 和前台JS 都在上面的链接里 package my.tools.security;import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.ObjectInputStream; import java.io.Obj…

Atitit.js图表控件总结

Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条形图、柱状图、折线图和饼图是图表中四种最常用的基本类型 分类 条形图、柱状图、折线图和饼图是图表中四种最…

Matlab图像处理函数大全(建议收藏)

文章目录 第1章: 图像显示与图像文件输入输出函数第2章: 图形绘制第3章: 图像类型和类型转换第4章: 图形用户界面工具第5章: 空间变换和图像配准第6章: 图像分析和统计第7章: 图像代数运算第8章: 图像增强第9章: 图像去模糊第10章: 线性滤波和变换第11章: 形态学操作…