簡單小程序：登錄頁面（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>
在這里插入圖片描述

告

當前，疫情防控工作正處于關鍵時期，為堅決貫徹黨中央、國務院和市委、市政府的工作部署，全力做好疫情防控工作，保障廣大人民群眾的健康安全，減少人員聚集，現就相關事項公告如下：

1、盡量減少疫情防控期間至現場申請調解仲裁，如發生勞動爭議，當事人可先通過電話進行咨詢登記（021-56108351），也可通過“上海人社APP”網上申請調解；

2、如確需來院（友誼路6號）辦事、調解、開庭的，需查驗健康碼、行程碼（均為綠碼），進行體溫檢測（低于37.3℃），全程準確佩戴口罩，并提供48小時內核酸檢測陰性證明。

疫情防控人人有責，相關措施給您帶來不便，敬請諒解。

上海市寶山區勞動人事爭議仲裁院

2022年3月21日

01 下載“上海人社”手機APP

02 通過實名認證注冊登錄后，點擊進入“網上調解”

03 選擇調解申請

04 準確填寫個人信息

05 準確填寫單位信息

請注意輸入單位全稱，可通過工商官網查詢單位注冊登記信息，工商官網：http://www.gsxt.gov.cn/index.html。需確保單位信息準確有效。

06 準確填寫請求事項

先選擇請求事項，然后在詳細訴求欄內寫明具體的訴求，訴求需寫明期限、具體請求事項及請求金額。

溫馨提示

一經提交無法修改，請仔細核對填寫信息，確認無誤后提交。詳細訴求請參照所列樣式填寫完整的期間、名稱及金額。網上申請提交完成后，請耐心等待，保持預留聯系電話暢通，將有工作人員及時與你聯系！

資料：寶山公信仲裁

編輯：宋鴿

校對：趙慧敏

登錄頁是系統的大門，每一個軟件系統都有自己的登錄頁，有精美的，有時髦的，有炫酷的，大門裝飾好不好看，直接關系著用戶的使用體驗，這里分享6個漂亮的登錄頁，讓你系統登錄頁美翻。為沒有UI設計圖參考的開發者提供一些參考思路或者啟發。

源碼獲取地址

https://codepen.io/ehermanson/pen/KwKWEv

在線咨詢

上一篇：JQuery基礎筆記及面試題+JavaScript筆記及面試題（含答案）
下一篇：HTML5實現頭像的上傳

您的項目需求

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

整合營銷服務商

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

您的項目需求