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

我的頁分為登錄、注冊、我的,如果登錄了那么就顯示我的頁面否則顯示登錄頁。
登錄頁:
在這里插入圖片描述
我的頁:
在這里插入圖片描述

一、登錄頁制作

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.pswp.cn/news/286199.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286199.shtml
英文地址,請注明出處:http://en.pswp.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章: 形態學操作…