20201119登錄頁(yè)面模板的制作

紹

介紹

前面我們以及學(xué)會(huì)了Bootstrap框架和jQuery庫(kù)的基本使用方法，并且已經(jīng)把這兩個(gè)軟件包整合到了我們的TFPHP框架里面，接下來(lái)我們就可以使用它們?nèi)ブ谱饔脩艄芾硐到y(tǒng)的視圖模板了。

用戶管理系統(tǒng)包含幾個(gè)主頁(yè)模板：

1）用戶信息表

2）用戶登錄頁(yè)面

3）用戶注冊(cè)頁(yè)面

4）個(gè)人資料修改

5）登錄密碼重置

6）用戶頭像上傳

7）安全問(wèn)題設(shè)置

8）綁定郵箱設(shè)置

9）忘記密碼頁(yè)面

頁(yè)面比較多，我們一點(diǎn)點(diǎn)地設(shè)計(jì)。萬(wàn)事開(kāi)頭難，福哥今天下帶著大家完成先完成第一個(gè)表單頁(yè)面——用戶登錄頁(yè)面。

用戶登錄頁(yè)面

HTML

登錄頁(yè)面的html部分包括一個(gè)頁(yè)頭和一個(gè)表單。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首頁(yè)</a></li>
                <li class="nav-item"><a href="" class="nav-link">登錄</a></li>
                <li class="nav-item"><a href="" class="nav-link">注冊(cè)</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登錄</h3>
                <p>請(qǐng)輸入正確的用戶名和密碼登錄用戶管理系統(tǒng)</p>
                <form>
                    <div class="form-group">
                        <label>用戶名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登錄狀態(tài)
                        </label>
                        <a href="" class="float-right">忘記密碼</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登錄</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用戶登錄頁(yè)面的CSS也是一個(gè)top bar和一個(gè)login form兩個(gè)部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}

講解

用戶登錄頁(yè)面

首先，因?yàn)檫@是TFUMS系統(tǒng)的第一個(gè)模板，所以福哥先設(shè)計(jì)了頁(yè)頭的樣式。這個(gè)頁(yè)頭也會(huì)作為其他頁(yè)面的共用的頁(yè)頭。頁(yè)頭使用了bs的nav樣式組的樣式，簡(jiǎn)化了自己寫(xiě)CSS的工作。

其次，表單部分使用了bs的form-group樣式作為每一行表單項(xiàng)的容器樣式，加上label和form-control簡(jiǎn)簡(jiǎn)單單就把一個(gè)漂亮的表單做出來(lái)了。

還有福哥使用浮動(dòng)加清除實(shí)現(xiàn)了“保存登錄狀態(tài)”和“忘記密碼”的左右布局設(shè)計(jì)。

最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個(gè)容器，看起來(lái)比較工整了。

總結(jié)

今天我們完成了第一個(gè)表單頁(yè)面的模板，包括：HTML和CSS部分。有了這個(gè)基礎(chǔ)之后，再去制作其他表單頁(yè)面就容易多了。

下一課我們將嘗試完成用戶注冊(cè)頁(yè)面、忘記密碼頁(yè)面、登錄密碼重置三個(gè)頁(yè)面的模板的制作。

https://m.tongfu.net/home/35/blog/512901.html

HTML+CSS3+JS創(chuàng)意設(shè)計(jì)——打造炫酷滑動(dòng)登錄頁(yè)面

**引言：探索交互之美**

在Web開(kāi)發(fā)的世界里，優(yōu)秀的用戶體驗(yàn)往往始于一個(gè)精心設(shè)計(jì)的登錄界面。HTML5、CSS3以及JavaScript的結(jié)合讓我們能夠創(chuàng)造出極具創(chuàng)意與個(gè)性化的滑動(dòng)登錄頁(yè)面，讓用戶在首次接觸應(yīng)用時(shí)就能留下深刻印象。本篇文章將詳細(xì)介紹如何利用基礎(chǔ)的HTML+CSS3+JS技術(shù)，從零開(kāi)始打造一款令人眼前一亮的滑動(dòng)登錄頁(yè)面，并通過(guò)詳細(xì)的代碼實(shí)例解析，帶領(lǐng)您領(lǐng)略前端交互設(shè)計(jì)的魅力。

---

### **一、搭建基礎(chǔ)HTML結(jié)構(gòu)**

**標(biāo)題：** 構(gòu)建骨骼——登錄表單的基礎(chǔ)布局

首先，我們需要構(gòu)建一個(gè)簡(jiǎn)潔明了的HTML結(jié)構(gòu)，包括用戶名輸入框、密碼輸入框、登錄按鈕以及可選的注冊(cè)鏈接。為了實(shí)現(xiàn)滑動(dòng)效果，我們還將引入一個(gè)容器元素來(lái)包裹整個(gè)登錄區(qū)域。

```html

<!DOCTYPE html>

<head>

</head>

<body>

</form>

</div>

</body>

</html>

```

---

### **二、CSS3魔法——樣式與動(dòng)畫(huà)**

**標(biāo)題：** 點(diǎn)綴肌膚——賦予登錄表單靈動(dòng)之感

接下來(lái)，我們將使用CSS3為登錄表單添加樣式，并利用`@keyframes`規(guī)則定義滑動(dòng)動(dòng)畫(huà)效果。同時(shí)，我們還需要保證登錄表單在不同設(shè)備上具有良好的響應(yīng)式布局。

```css

/* styles.css */

body {

margin: 0;

background-color: #f0f0f0;

}

#login-slider {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 300px;

height: auto;

background-color: white;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

.login-form {

display: flex;

flex-direction: column;

padding: 20px;

animation: slideIn 1s ease-in-out forwards;

}

/* 定義滑動(dòng)動(dòng)畫(huà) */

@keyframes slideIn {

0% {

transform: translateY(100%);

}

100% {

transform: translateY(0);

}

/* 登錄表單元素樣式 */

input[type="text"],

input[type="password"] {

margin-bottom: 10px;

padding: 10px;

border: none;

border-radius: 5px;

}

button {

cursor: pointer;

background-color: #007bff;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

text-transform: uppercase;

font-weight: bold;

}

/* 響應(yīng)式布局 */

@media screen and (max-width: 768px) {

#login-slider {

width: 90%;

}

```

---

### **三、JavaScript增強(qiáng)交互**

**標(biāo)題：** 賦予靈魂——用JavaScript實(shí)現(xiàn)滑動(dòng)觸發(fā)與驗(yàn)證邏輯

現(xiàn)在我們要借助JavaScript來(lái)控制登錄表單的滑動(dòng)行為，例如當(dāng)用戶點(diǎn)擊某個(gè)鏈接或者頁(yè)面加載完成后自動(dòng)觸發(fā)滑動(dòng)動(dòng)畫(huà)。同時(shí)，可以增加一些簡(jiǎn)單的表單驗(yàn)證功能。

```javascript

// scripts.js

document.addEventListener('DOMContentLoaded', ()=> {

// 頁(yè)面加載完成后執(zhí)行滑動(dòng)動(dòng)畫(huà)

const loginSlider=document.getElementById('login-slider');

loginSlider.classList.add('slide-active');

// 表單提交事件處理，此處僅為示例，實(shí)際場(chǎng)景下需加入真實(shí)驗(yàn)證邏輯

const form=document.querySelector('.login-form');

form.addEventListener('submit', (event)=> {

event.preventDefault(); // 阻止默認(rèn)提交行為

const username=form.querySelector('input[type="text"]').value;

const password=form.querySelector('input[type="password"]').value;

// 實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證邏輯，如為空檢查

if (!username || !password) {

alert('用戶名和密碼不能為空!');

} else {

// 這里可以替換為真實(shí)的登錄請(qǐng)求邏輯

console.log('正在登錄...', username, password);

}

});

```

---

### **四、創(chuàng)意無(wú)限——拓展與優(yōu)化**

**標(biāo)題：** 持續(xù)創(chuàng)新——更多滑動(dòng)登錄頁(yè)面的設(shè)計(jì)思路與實(shí)踐

除了上述基本的滑動(dòng)登錄形式，還可以進(jìn)一步豐富設(shè)計(jì)，比如：

- 添加進(jìn)度條指示登錄滑動(dòng)完成度；

- 使用CSS變量實(shí)現(xiàn)自定義主題切換；

- 結(jié)合SVG圖標(biāo)增加視覺(jué)吸引力；

- 通過(guò)IntersectionObserver API實(shí)現(xiàn)視口可見(jiàn)時(shí)自動(dòng)滑動(dòng)；

- 配合AJAX技術(shù)實(shí)現(xiàn)實(shí)時(shí)驗(yàn)證和無(wú)刷新登錄。

---

**結(jié)語(yǔ)：**

通過(guò)這次對(duì)HTML+CSS3+JS組合技術(shù)的探索，我們不僅成功地制作出了一個(gè)富有創(chuàng)意的滑動(dòng)登錄頁(yè)面，還展現(xiàn)了前端技術(shù)在交互設(shè)計(jì)中的無(wú)限可能性。學(xué)習(xí)并靈活運(yùn)用這些基礎(chǔ)知識(shí)，可以讓您的Web應(yīng)用更加生動(dòng)有趣，從而更好地吸引和留住用戶。持續(xù)關(guān)注前端技術(shù)的最新發(fā)展，不斷挑戰(zhàn)自我，用代碼書(shū)寫(xiě)更美好的Web世界。

上效果圖：

這是一個(gè)用ext3.2.0、js、html、css寫(xiě)的一個(gè)還算好看的登錄界面。

源代碼已上傳，下載地址請(qǐng)點(diǎn)擊：點(diǎn)擊打開(kāi)鏈接

其主要難點(diǎn)在如何使用extjs來(lái)畫(huà)一個(gè)界面，接下來(lái)我們就主要看一下其中的html和js吧：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄界面</title>
<link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="loginToDo.js"></script>
<link rel="stylesheet" type="text/css" href="login.css"/>
</head>
<body onkeydown="keyLogin(event);">
</body>
</html>

這里面主要是導(dǎo)入頁(yè)面所需的js和css文件，當(dāng)然還有一個(gè)亮點(diǎn)就是body標(biāo)簽上的 onkeydown事件屬性，主要用于監(jiān)聽(tīng)鍵盤(pán)實(shí)現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語(yǔ)言風(fēng)格吧：

Ext.onReady(function () {
// 創(chuàng)建“登錄”面板
var loginPanel=new Ext.Panel({
// 設(shè)置面板的位置、寬高、樣式
// 注意：此處我用的是相對(duì)布局relative（用于比較兩者的區(qū)別）
id: 'loginPan',
x: 363,
y: 0,
width: 396,
height: 480,
baseCls: '',
defaults: {
border: false
},
// 添加面板里面的物品
items: [
{
// 第一件：logo圖
id: 'loginLogo',
height: 160,
frame: false,
bodyStyle: 'padding-top:10px',
html: '<img src="images/fly_icon.png">'
},
{
// 第二件：登錄的表單
id: 'loginForm',
defaultType: 'textfield',
frame: false,
defaults: {
allowBlank: false
},
// 添加表單里面的物品：兩個(gè)輸入框
items: [
{
id: "username",
cls: "text_field",
inoutType: 'text',
width: 330,
height: 28,
blankText: '賬號(hào)不能為空',
emptyText: '請(qǐng)輸入賬號(hào)',
},
{
id: "password",
cls: "text_field",
inputType: 'password',
width: 330,
height: 28,
emptyText: '請(qǐng)輸入密碼',
blankText: '密碼不能為空',
}]
},
{
// 第三件：忘記密碼
id: 'loginForget',
html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
},
{
// 第四件：登錄按鈕
id: 'loginBtn',
html: '<button id="btn_login">馬上登錄</button>',
}
],
});
// 創(chuàng)建“注冊(cè)”面板
var registerPanel=new Ext.Panel({
// 設(shè)置面板的位置、寬高、樣式
// 注意：此處我用的是絕對(duì)布局absolute（用于比較兩者的區(qū)別）
id: 'registerPan',
x: 0,
y: 46,
width: 800,
height: 389,
baseCls: '',
layout: 'absolute',
defaults: {
border: false
},
// 添加面板里面的物品
items: [
{
// 第一件：標(biāo)題
id: 'registerTitleLabel',
xtype: 'label',
x: 47,
y: 50,
text: '還沒(méi)有賬號(hào)？',
}, {
// 第二件：正文
id: 'registerContentLabel',
xtype: 'label',
x: 47,
y: 135,
text: '這是在注冊(cè)面板下面的正文內(nèi)容。里面的內(nèi)容可以隨便寫(xiě)，比如當(dāng)前我們?cè)僖粋€(gè)窗口下面建立了兩個(gè)面板。而兩個(gè)面板的布局是分別用相對(duì)布局和絕對(duì)布局來(lái)實(shí)現(xiàn)的。相比較而言，我覺(jué)得用絕對(duì)布局會(huì)簡(jiǎn)單粗暴，更直接，更方便。總之，你們自己體會(huì)一下吧。',
}, {
// 第三件：注冊(cè)按鈕
id: 'registerBtn',
xtype: 'button',
x: 47,
y: 280,
html: '<button id="btn_register" >馬上注冊(cè)</button>'
}],
});
// 創(chuàng)建窗口，從而讓內(nèi)容達(dá)到居中效果
var centerWindow=new Ext.Window({
baseCls: '',
width: 800,
height: 480,
layout: 'absolute',
closable: false,
draggable: false,
resizable: false,
shadow: false,
border: false,
items: [registerPanel, loginPanel],
});
// 顯示窗口
centerWindow.show();
// 添加瀏覽器縮放自動(dòng)居中效果
Ext.EventManager.onWindowResize(function () {
centerWindow.center();
});
});

這里要說(shuō)的是：1、注意給屬性加標(biāo)記，能用id就用id，cls只是一個(gè)封裝過(guò)的class，和原生的class還是有區(qū)別的，比如給一個(gè)cls元素的height、padding定義樣式并不起作用。詳見(jiàn)：關(guān)于extjs中的cls ≠ class

2、在ext中建議用絕對(duì)定位，由于它底層是一個(gè)個(gè)的table、div塊，如果用相對(duì)定位的話偶爾是有偏差的，所以還是絕對(duì)定位方便直接啊。

3、window自帶居中效果，可以利用這一點(diǎn)讓元素在屏幕中居中。但是當(dāng)瀏覽器縮放的時(shí)候，這個(gè)window并不會(huì)動(dòng)，每次都需要重新刷新一下才會(huì)改變一下。所以，在以上代碼的最后我們用給這個(gè)centerWindow添加了一個(gè)窗口自適應(yīng)居中的效果。

在線咨詢

上一篇：HTML表單基礎(chǔ)知識(shí)
下一篇：網(wǎng)頁(yè)全屏與鎖屏顯示效果

您的項(xiàng)目需求

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

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

20201119登錄頁(yè)面模板的制作

紹

用戶登錄頁(yè)面

講解

總結(jié)

您的項(xiàng)目需求