簡單小程序：登錄頁面（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; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            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">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


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

上效果圖：

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

源代碼已上傳，下載地址請點擊：點擊打開鏈接

其主要難點在如何使用extjs來畫一個界面，接下來我們就主要看一下其中的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>

這里面主要是導入頁面所需的js和css文件，當然還有一個亮點就是body標簽上的 onkeydown事件屬性，主要用于監聽鍵盤實現我們js中的enter鍵提交功能。然后看一下extjs的語言風格吧：

Ext.onReady(function () {
// 創建“登錄”面板
var loginPanel = new Ext.Panel({
// 設置面板的位置、寬高、樣式
// 注意：此處我用的是相對布局relative（用于比較兩者的區別）
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
},
// 添加表單里面的物品：兩個輸入框
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>',
}
],
});
// 創建“注冊”面板
var registerPanel = new Ext.Panel({
// 設置面板的位置、寬高、樣式
// 注意：此處我用的是絕對布局absolute（用于比較兩者的區別）
id: 'registerPan',
x: 0,
y: 46,
width: 800,
height: 389,
baseCls: '',
layout: 'absolute',
defaults: {
border: false
},
// 添加面板里面的物品
items: [
{
// 第一件：標題
id: 'registerTitleLabel',
xtype: 'label',
x: 47,
y: 50,
text: '還沒有賬號？',
}, {
// 第二件：正文
id: 'registerContentLabel',
xtype: 'label',
x: 47,
y: 135,
text: '這是在注冊面板下面的正文內容。里面的內容可以隨便寫，比如當前我們再一個窗口下面建立了兩個面板。而兩個面板的布局是分別用相對布局和絕對布局來實現的。相比較而言，我覺得用絕對布局會簡單粗暴，更直接，更方便。總之，你們自己體會一下吧。',
}, {
// 第三件：注冊按鈕
id: 'registerBtn',
xtype: 'button',
x: 47,
y: 280,
html: '<button id="btn_register" >馬上注冊</button>'
}],
});
// 創建窗口，從而讓內容達到居中效果
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();
// 添加瀏覽器縮放自動居中效果
Ext.EventManager.onWindowResize(function () {
centerWindow.center();
});
});

這里要說的是：1、注意給屬性加標記，能用id就用id，cls只是一個封裝過的class，和原生的class還是有區別的，比如給一個cls元素的height、padding定義樣式并不起作用。詳見：關于extjs中的cls ≠ class

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

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

tml簡單教程

簡單登錄界面

以下是一個簡單的HTML登錄頁面的代碼，你可以根據自己的需要進行修改：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面</title>
<style type="text/css">
body {
background-color: #f2f2f2;
}
.login {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
.login h1 {
text-align: center;
font-size: 30px;
color: #333;
padding-top: 30px;
}
.login input[type="text"], .login input[type="password"] {
width: 300px;
height: 40px;
border-radius: 5px;
border: none;
outline: none;
margin-top: 30px;
margin-left: 50px;
padding-left: 10px;
font-size: 16px;
}
.login input[type="submit"] {
width: 300px;
height: 40px;
background-color: #f00;
border-radius: 5px;
border: none;
outline: none;
color:#fff;
font-size: 18px;
cursor:pointer; 
margin-top: 30px; 
margin-left:50px; 
}
</style>
</head>
<body>
<div class="login">
<h1>登錄</h1>
<form action="" method="post">
<input type="text" name="username" placeholder="請輸入用戶名"><br>
<input type="password" name="password" placeholder="請輸入密碼"><br>
<input type="submit" value="登錄">
</form>
</div>
</body>
</html>

這是一個簡單的登錄頁面，你可以根據自己的需要進行修改。如果你想了解更多關于HTML的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) HTML+CSS+JS實現十款好看的登錄注冊界面模板，趕緊收藏起來吧！好看的登錄界面王同學要努力的博客-CSDN博客. https://blog.csdn.net/m0_46374969/article/details/115906705. (2) HTML+CSS登錄界面html登錄頁面代碼桐艾的博客-CSDN博客. https://blog.csdn.net/tongai1/article/details/105954419. (3) 如何制作一個簡單的HTML登錄頁面（附代碼） - 知乎專欄. https://zhuanlan.zhihu.com/p/143671138.

發送get請求并顯示返回內容

當客戶端使用GET方法向服務器發送請求時，請求的數據會附加在URL的末尾。服務器可以使用相同的HTTP協議來回答請求。在客戶端，可以使用JavaScript來獲取GET請求的數據。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GET請求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test_get.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送 GET 請求</button>

</body>
</html>

在這個例子中，我們使用了jQuery庫來發送GET請求。當用戶點擊按鈕時，jQuery會向demo_test_get.asp發送GET請求，并將數據附加在URL的末尾。當服務器回答請求時，jQuery會調用回調函數，并將服務器返回的數據作為參數傳遞給它。

如果你想了解更多關于HTML、JavaScript和jQuery的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) 純 HTML 頁面發請求獲取數據并渲染到頁面上 - CSDN博客. https://blog.csdn.net/LuckKing0925/article/details/111308084. (3) 使用Ajax發送http請求（get&post請求） - 千古壹號 - 博客園. https://www.cnblogs.com/qianguyihao/p/8485028.html.

發送post請求

在HTML中，可以使用form元素來創建一個表單，然后使用POST方法將表單數據發送到服務器。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請求</title>
</head>
<body>
<form action="http://www.example.com/login" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>

在這個例子中，我們使用了form元素來創建一個表單，然后使用POST方法將表單數據發送到http://www.example.com/login。在表單中，我們使用了兩個input元素來接收用戶名和密碼。當用戶點擊提交按鈕時，表單數據將被發送到服務器。

如果你想了解更多關于HTML的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) POST - HTTP | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/web/http/methods/post. (2) HTML 請求方法 - w3school 在線教程. https://www.w3school.com.cn/tags/html_ref_httpmethods.asp. (3) jQuery post() 方法 | 菜鳥教程. https://www.runoob.com/jquery/ajax-post.html. (4) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data.

接收post請求

當客戶端使用POST方法向服務器發送請求時，服務器會將請求的數據存儲在HTTP請求的請求主體中。服務器可以使用相同的HTTP協議來回答請求。在客戶端，可以使用JavaScript來獲取POST請求的數據。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送 POST 請求</button>

</body>
</html>

在這個例子中，我們使用了jQuery庫來發送POST請求。當用戶點擊按鈕時，jQuery會向demo_test_post.asp發送POST請求，并將數據存儲在HTTP請求的請求主體中。當服務器回答請求時，jQuery會調用回調函數，并將服務器返回的數據作為參數傳遞給它。

如果你想了解更多關于HTML、JavaScript和jQuery的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) javascript能否獲取到post請求內的數據? - SegmentFault 思否. https://segmentfault.com/q/1010000004523107. (3) ChatGPT流式streaming回復的實現 - 掘金. https://juejin.cn/post/7222440107214241829.

在線咨詢

上一篇：「玩轉前端」如何創建完美的HTML郵件
下一篇：HTML編輯器復制WORD里面帶圖文的文章，圖片可以直接顯示

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。