整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
UI設(shè)計(jì)創(chuàng)新技能層出不窮，UI設(shè)計(jì)滿足著形形色色各種垂直化的需求,在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,今天我就針對(duì)UI設(shè)計(jì)中登錄頁設(shè)計(jì)指南進(jìn)行簡單的說明。
續(xù)之前完成的內(nèi)容，首先創(chuàng)建一個(gè)常量類
常量類的內(nèi)容
服務(wù)器端渲染
前后端分離
完成后臺(tái)管理登錄頁面
進(jìn)入前端靜態(tài)資源
創(chuàng)建后臺(tái)管理員登錄頁面admin-login.jsp
完成內(nèi)容
然后完成頁面跳轉(zhuǎn)
配置mvc:view-controller
完成配置
啟動(dòng)服務(wù)訪問一下
localhost:8080/learn-admin-webui/admin/to/login/page.html修飾system-error.jsp
Md5加密工具方法
添加到類
編寫代碼
接著
測(cè)試下
我們做數(shù)據(jù)統(tǒng)計(jì)的時(shí)候，都需要用到表格，table就是用來定義一個(gè)表格的，我們來設(shè)置一個(gè)表格：
<html>
<head>
<title>網(wǎng)站名稱</title>
</head>
<body>
<table border="1">
<caption>我是表格標(biāo)題</caption>
<thead>
<th>姓名</th>
<th>性別</th>
<th>聯(lián)系地址</th>
</thead>
<tfoot>
<tr>
<td colspan="3">我是一個(gè)底部</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>小李</td>
<td>男</td>
<td>哈哈哈</td>
</tr>
<tr>
<td>小韓</td>
<td>女</td>
<td>美美</td>
</tr>
<tr>
<td>小張</td>
<td>男</td>
<td>哦哦哦</td>
</tr>
</tbody>
</table>
</body>
</html>注：表格相關(guān)的元素很多，我們這里整理一下：
caption:用來設(shè)置表格標(biāo)題；
thead:表示表格的頭部區(qū)域；
th:表示表格的頭部中的一個(gè)列；
tbody:表示表格的中間主要顯示區(qū)域；
tr:表示表格的一個(gè)行；
td:表示表格的和個(gè)列；
tfoot:設(shè)置表格的腳部；
colspan:表示橫跨幾列；
表單也是我們開發(fā)中經(jīng)常用到的一個(gè)元素，我們登錄時(shí)都是使用表單來向后臺(tái)發(fā)送請(qǐng)求的，我們創(chuàng)建一個(gè)登錄界面：
<html>
<head>
<title>網(wǎng)站名稱</title>
</head>
<body>
<form action="/demo.php" method="get">
<div>
<input type="text" name="username"/>
</div>
<div>
<input type="password" name="password"/>
</div>
<button type="submit">登錄</button>
</form>
</body>
</html>注：form表單的元素介紹如下：
input:表示一個(gè)輸入框，type屬性用來表示此輸入框的功能,text時(shí)表示輸入的可見文件；password表示輸入的是不可見到的密碼；name屬性用來設(shè)置后臺(tái)語言用來獲取此輸入框的內(nèi)容；
button:表示一個(gè)按鈕，type:submit表示點(diǎn)擊時(shí)會(huì)自動(dòng)提交；提交到哪里呢？又是以什么方式提交呢？
我們看下form中的兩個(gè)屬性:
action:用來定義提交到的地址；
method:表示提交到后臺(tái)語言時(shí)的提交方式,get或post，其他的還有put,delete
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
