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