UI設(shè)計(jì)中登錄頁(yè)的設(shè)計(jì)指南

　UI設(shè)計(jì)創(chuàng)新技能層出不窮，UI設(shè)計(jì)滿足著形形色色各種垂直化的需求,在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,今天我就針對(duì)UI設(shè)計(jì)中登錄頁(yè)設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說(shuō)明。

續(xù)之前完成的內(nèi)容，首先創(chuàng)建一個(gè)常量類

常量類的內(nèi)容

服務(wù)器端渲染

前后端分離

完成后臺(tái)管理登錄頁(yè)面

進(jìn)入前端靜態(tài)資源

創(chuàng)建后臺(tái)管理員登錄頁(yè)面admin-login.jsp

完成內(nèi)容

然后完成頁(yè)面跳轉(zhuǎn)

配置mvc:view-controller

完成配置

啟動(dòng)服務(wù)訪問一下

localhost:8080/learn-admin-webui/admin/to/login/page.html

修飾system-error.jsp

Md5加密工具方法

添加到類

編寫代碼

接著

測(cè)試下

格：table

我們做數(shù)據(jù)統(tǒng)計(jì)的時(shí)候，都需要用到表格，table就是用來(lái)定義一個(gè)表格的，我們來(lái)設(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:用來(lái)設(shè)置表格標(biāo)題；

thead:表示表格的頭部區(qū)域；

th:表示表格的頭部中的一個(gè)列；

tbody:表示表格的中間主要顯示區(qū)域；

tr:表示表格的一個(gè)行；

td:表示表格的和個(gè)列；

tfoot:設(shè)置表格的腳部；

colspan:表示橫跨幾列；

表單：form

表單也是我們開發(fā)中經(jīng)常用到的一個(gè)元素，我們登錄時(shí)都是使用表單來(lái)向后臺(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屬性用來(lái)表示此輸入框的功能,text時(shí)表示輸入的可見文件；password表示輸入的是不可見到的密碼；name屬性用來(lái)設(shè)置后臺(tái)語(yǔ)言用來(lái)獲取此輸入框的內(nèi)容；

button:表示一個(gè)按鈕，type:submit表示點(diǎn)擊時(shí)會(huì)自動(dòng)提交；提交到哪里呢？又是以什么方式提交呢？

我們看下form中的兩個(gè)屬性:

action:用來(lái)定義提交到的地址；

method:表示提交到后臺(tái)語(yǔ)言時(shí)的提交方式,get或post，其他的還有put,delete

在線咨詢

上一篇：什么軟件能搜畜牧專業(yè)的題？不妨看看這7個(gè)實(shí)用工具
下一篇：20201108響應(yīng)狀態(tài)、響應(yīng)數(shù)據(jù)類型、響應(yīng)數(shù)據(jù)長(zhǎng)度

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

UI設(shè)計(jì)中登錄頁(yè)的設(shè)計(jì)指南

格：table

表單：form

您的項(xiàng)目需求