整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
介紹
前面我們以及學(xué)會(huì)了Bootstrap框架和jQuery庫的基本使用方法，并且已經(jīng)把這兩個(gè)軟件包整合到了我們的TFPHP框架里面，接下來我們就可以使用它們?nèi)ブ谱饔脩艄芾硐到y(tǒng)的視圖模板了。
用戶管理系統(tǒng)包含幾個(gè)主頁模板：
1）用戶信息表
2）用戶登錄頁面
3）用戶注冊頁面
4）個(gè)人資料修改
5）登錄密碼重置
6）用戶頭像上傳
7）安全問題設(shè)置
8）綁定郵箱設(shè)置
9）忘記密碼頁面
頁面比較多，我們一點(diǎn)點(diǎn)地設(shè)計(jì)。萬事開頭難，福哥今天下帶著大家完成先完成第一個(gè)表單頁面——用戶登錄頁面。
HTML
登錄頁面的html部分包括一個(gè)頁頭和一個(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">首頁</a></li>
<li class="nav-item"><a href="" class="nav-link">登錄</a></li>
<li class="nav-item"><a href="" class="nav-link">注冊</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>請輸入正確的用戶名和密碼登錄用戶管理系統(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
用戶登錄頁面的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àn)檫@是TFUMS系統(tǒng)的第一個(gè)模板，所以福哥先設(shè)計(jì)了頁頭的樣式。這個(gè)頁頭也會(huì)作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式，簡化了自己寫CSS的工作。
其次，表單部分使用了bs的form-group樣式作為每一行表單項(xiàng)的容器樣式，加上label和form-control簡簡單單就把一個(gè)漂亮的表單做出來了。
還有福哥使用浮動(dòng)加清除實(shí)現(xiàn)了“保存登錄狀態(tài)”和“忘記密碼”的左右布局設(shè)計(jì)。
最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個(gè)容器，看起來比較工整了。
今天我們完成了第一個(gè)表單頁面的模板，包括：HTML和CSS部分。有了這個(gè)基礎(chǔ)之后，再去制作其他表單頁面就容易多了。
下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個(gè)頁面的模板的制作。
https://m.tongfu.net/home/35/blog/512901.html
HTML+CSS3+JS創(chuàng)意設(shè)計(jì)——打造炫酷滑動(dòng)登錄頁面
**引言：探索交互之美**
在Web開發(fā)的世界里，優(yōu)秀的用戶體驗(yàn)往往始于一個(gè)精心設(shè)計(jì)的登錄界面。HTML5、CSS3以及JavaScript的結(jié)合讓我們能夠創(chuàng)造出極具創(chuàng)意與個(gè)性化的滑動(dòng)登錄頁面，讓用戶在首次接觸應(yīng)用時(shí)就能留下深刻印象。本篇文章將詳細(xì)介紹如何利用基礎(chǔ)的HTML+CSS3+JS技術(shù)，從零開始打造一款令人眼前一亮的滑動(dòng)登錄頁面，并通過詳細(xì)的代碼實(shí)例解析，帶領(lǐng)您領(lǐng)略前端交互設(shè)計(jì)的魅力。
---
### **一、搭建基礎(chǔ)HTML結(jié)構(gòu)**
**標(biāo)題：** 構(gòu)建骨骼——登錄表單的基礎(chǔ)布局
首先，我們需要構(gòu)建一個(gè)簡潔明了的HTML結(jié)構(gòu)，包括用戶名輸入框、密碼輸入框、登錄按鈕以及可選的注冊鏈接。為了實(shí)現(xiàn)滑動(dòng)效果，我們還將引入一個(gè)容器元素來包裹整個(gè)登錄區(qū)域。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>滑動(dòng)登錄頁面</title>
<!-- 引入外部CSS和JS文件 -->
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<div id="login-slider">
<form action="#" class="login-form">
<input type="text" placeholder="用戶名" required>
<input type="password" placeholder="密碼" required>
<button type="submit">登錄</button>
<a href="#">忘記密碼？</a>
<a href="#">立即注冊</a>
</form>
</div>
</body>
</html>
```
---
### **二、CSS3魔法——樣式與動(dòng)畫**
**標(biāo)題：** 點(diǎn)綴肌膚——賦予登錄表單靈動(dòng)之感
接下來，我們將使用CSS3為登錄表單添加樣式，并利用`@keyframes`規(guī)則定義滑動(dòng)動(dòng)畫效果。同時(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)畫 */
@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來控制登錄表單的滑動(dòng)行為，例如當(dāng)用戶點(diǎn)擊某個(gè)鏈接或者頁面加載完成后自動(dòng)觸發(fā)滑動(dòng)動(dòng)畫。同時(shí)，可以增加一些簡單的表單驗(yàn)證功能。
```javascript
// scripts.js
document.addEventListener('DOMContentLoaded', ()=> {
// 頁面加載完成后執(zhí)行滑動(dòng)動(dòng)畫
const loginSlider=document.getElementById('login-slider');
loginSlider.classList.add('slide-active');
// 表單提交事件處理，此處僅為示例，實(shí)際場景下需加入真實(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)簡單驗(yàn)證邏輯，如為空檢查
if (!username || !password) {
alert('用戶名和密碼不能為空!');
} else {
// 這里可以替換為真實(shí)的登錄請求邏輯
console.log('正在登錄...', username, password);
}
});
});
```
---
### **四、創(chuàng)意無限——拓展與優(yōu)化**
**標(biāo)題：** 持續(xù)創(chuàng)新——更多滑動(dòng)登錄頁面的設(shè)計(jì)思路與實(shí)踐
除了上述基本的滑動(dòng)登錄形式，還可以進(jìn)一步豐富設(shè)計(jì)，比如：
- 添加進(jìn)度條指示登錄滑動(dòng)完成度；
- 使用CSS變量實(shí)現(xiàn)自定義主題切換；
- 結(jié)合SVG圖標(biāo)增加視覺吸引力；
- 通過IntersectionObserver API實(shí)現(xiàn)視口可見時(shí)自動(dòng)滑動(dòng)；
- 配合AJAX技術(shù)實(shí)現(xiàn)實(shí)時(shí)驗(yàn)證和無刷新登錄。
---
**結(jié)語：**
通過這次對HTML+CSS3+JS組合技術(shù)的探索，我們不僅成功地制作出了一個(gè)富有創(chuàng)意的滑動(dòng)登錄頁面，還展現(xiàn)了前端技術(shù)在交互設(shè)計(jì)中的無限可能性。學(xué)習(xí)并靈活運(yùn)用這些基礎(chǔ)知識(shí)，可以讓您的Web應(yīng)用更加生動(dòng)有趣，從而更好地吸引和留住用戶。持續(xù)關(guān)注前端技術(shù)的最新發(fā)展，不斷挑戰(zhàn)自我，用代碼書寫更美好的Web世界。
上效果圖：
這是一個(gè)用ext3.2.0、js、html、css寫的一個(gè)還算好看的登錄界面。
源代碼已上傳，下載地址請點(diǎn)擊：點(diǎn)擊打開鏈接
其主要難點(diǎn)在如何使用extjs來畫一個(gè)界面，接下來我們就主要看一下其中的html和js吧：
這里面主要是導(dǎo)入頁面所需的js和css文件，當(dāng)然還有一個(gè)亮點(diǎn)就是body標(biāo)簽上的 onkeydown事件屬性，主要用于監(jiān)聽鍵盤實(shí)現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語言風(fēng)格吧：
這里要說的是：1、注意給屬性加標(biāo)記，能用id就用id，cls只是一個(gè)封裝過的class，和原生的class還是有區(qū)別的，比如給一個(gè)cls元素的height、padding定義樣式并不起作用。詳見：關(guān)于extjs中的cls ≠ class
2、在ext中建議用絕對定位，由于它底層是一個(gè)個(gè)的table、div塊，如果用相對定位的話偶爾是有偏差的，所以還是絕對定位方便直接啊。
3、window自帶居中效果，可以利用這一點(diǎn)讓元素在屏幕中居中。但是當(dāng)瀏覽器縮放的時(shí)候，這個(gè)window并不會(huì)動(dòng)，每次都需要重新刷新一下才會(huì)改變一下。所以，在以上代碼的最后我們用給這個(gè)centerWindow添加了一個(gè)窗口自適應(yīng)居中的效果。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
