簡單小程序：登錄頁面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機(jī)號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

紹

介紹

前面我們以及學(xué)會了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è)頁頭也會作為其他頁面的共用的頁頭。頁頭使用了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è)容器，看起來比較工整了。

總結(jié)

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

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

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

上效果圖：

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

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

其主要難點(diǎn)在如何使用extjs來畫一個(gè)界面，接下來我們就主要看一下其中的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)入頁面所需的js和css文件，當(dāng)然還有一個(gè)亮點(diǎn)就是body標(biāo)簽上的 onkeydown事件屬性，主要用于監(jiān)聽鍵盤實(shí)現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語言風(fēng)格吧：

Ext.onReady(function () {
// 創(chuàng)建“登錄”面板
var loginPanel = new Ext.Panel({
// 設(shè)置面板的位置、寬高、樣式
// 注意：此處我用的是相對布局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: '賬號不能為空',
emptyText: '請輸入賬號',
},
{
id: "password",
cls: "text_field",
inputType: 'password',
width: 330,
height: 28,
emptyText: '請輸入密碼',
blankText: '密碼不能為空',
}]
},
{
// 第三件：忘記密碼
id: 'loginForget',
html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
},
{
// 第四件：登錄按鈕
id: 'loginBtn',
html: '<button id="btn_login">馬上登錄</button>',
}
],
});
// 創(chuàng)建“注冊”面板
var registerPanel = new Ext.Panel({
// 設(shè)置面板的位置、寬高、樣式
// 注意：此處我用的是絕對布局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: '還沒有賬號？',
}, {
// 第二件：正文
id: 'registerContentLabel',
xtype: 'label',
x: 47,
y: 135,
text: '這是在注冊面板下面的正文內(nèi)容。里面的內(nèi)容可以隨便寫，比如當(dāng)前我們再一個(gè)窗口下面建立了兩個(gè)面板。而兩個(gè)面板的布局是分別用相對布局和絕對布局來實(shí)現(xiàn)的。相比較而言，我覺得用絕對布局會簡單粗暴，更直接，更方便。總之，你們自己體會一下吧。',
}, {
// 第三件：注冊按鈕
id: 'registerBtn',
xtype: 'button',
x: 47,
y: 280,
html: '<button id="btn_register" >馬上注冊</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();
});
});

這里要說的是：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并不會動(dòng)，每次都需要重新刷新一下才會改變一下。所以，在以上代碼的最后我們用給這個(gè)centerWindow添加了一個(gè)窗口自適應(yīng)居中的效果。

在線咨詢

上一篇：JavaScript：history和location對象、JS設(shè)計(jì)模式系統(tǒng)講解與應(yīng)用
下一篇：微信開放JS SDK，再次給瀏覽器們上了一課

您的項(xiàng)目需求

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

整合營銷服務(wù)商

簡單小程序：登錄頁面（html）

紹

用戶登錄頁面

講解

總結(jié)

您的項(xiàng)目需求