整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，本篇文章分享會員賬號登錄的布局樣式。
效果圖：
會員賬號登錄布局樣式
HTML代碼：
<div class="tpt-1446"> <div class="tpt-wp"> <div class="tpt-left"> <img src="3.jpg"> </div> <div class="tpt-right"> <div class="tpt-form"> <h3>賬號登錄</h3> <p>用戶登錄成功后，該用戶帳號和密碼由用戶負責保管，用戶須保證登錄信息的真實性、合法性、有效性。</p> <form> <input type="text" name="name" placeholder="登錄賬號" autocomplete="off"> <input type="password" name="password" placeholder="登錄密碼" autocomplete="off"> <p>使用<span> 賬號登錄</span>，即代表同意《用戶登錄協議》。</p> <button>立即登錄</button> </form> </div> </div> </div> </div>
CSS代碼分析：
使用flex水平垂直居中
.tpt-1446 {
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
使用flex布局，固定高度和寬度
.tpt-wp {
display: flex;
width: 900px;
height: 600px
}
分為左右布局，左邊配置圖片，右邊使用flex水平垂直居中
.tpt-left {
width: 400px
}
.tpt-right {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
width: 500px
}
配置表單的標題簡介的字體顏色，字體大小和行高
.tpt-form h3 {
color: #79b8c1;
font-size: 34px;
line-height: 44px;
font-weight: 400;
margin-bottom: 20px
}
.tpt-form p {
color: #999;
font-size: 12px;
line-height: 20px;
margin-bottom: 20px
}
配置表單文本輸入框的樣式
.tpt-form input {
box-sizing: border-box;
width: 100%;
height: 38px;
line-height: 38px;
padding: 0 10px;
background: #fff;
border: 1px solid #eee;
color: #333;
font-size: 14px;
border-radius: 2px;
margin-bottom: 20px
}
配置表單提交按鈕的樣式
.tpt-form button {
width: 100%;
height: 38px;
line-height: 38px;
background: #79b8c1;
border: 0;
color: #fff;
font-size: 14px;
border-radius: 2px;
cursor: pointer
}
注：以上部分CSS代碼只是幫助大家分析結構，是需要清除所有標簽的默認樣式。
有問題可以留言，大家一起學習HTML+CSS網頁設計。
們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。
表單不是指一個標簽，而是指一類標簽。
我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的，在這里我就不贅述了。
其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產生的作用也不同：如：<input type="text">產生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。
不知大家有沒有在網上做過選擇題，作者是做過的。網頁中的選擇題也是用的input。
input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。
既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設定默認選擇的選項。
我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。
我們來看一下代碼和結果：
作者已經盡量去說清楚了，歡迎大家批評指教，希望多多關注[送心]
絡用的多了，各種注冊、賬號、密碼也多了，管都管不過來，還好現在大多數瀏覽器都有各種類似帳號管家的功能，只要注冊登陸瀏覽器然后各種網站的賬號密碼只要登陸一次讓它記住就行了，全權委托給瀏覽器管理了，可有時確實需要這密碼，比如要手機上登陸什么的就抓了瞎，各種“找回密碼”、“忘記密碼”一通折騰費時又費力。
在來介紹一個簡單實用小技巧，無需任何工具軟件，利用HTML語言規則僅僅幾步就能讓你看到自己以前設定的密碼：
1、要讓這個密碼星號正常顯示出來，在密碼星號的輸入框中鼠標右擊，選擇最下面的“審查元素”。
2、此時會在瀏覽器的右側跳出網頁的HTML源代碼并以藍色選中，你不必要懂HTML，只要找到“type=password"就行。
3、將“password"改為"text"，然后回車，這時就會發現原來顯示星號密碼的部分已經成功顯示當初設定的密碼了，經測試了幾個市面常用的瀏覽器均行的通，如果有不能正常顯示的請留言。
還請用于正當用途。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
