整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，本篇文章分享會員賬號登錄的布局樣式。
效果圖：
會員賬號登錄布局樣式
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>用戶登錄成功后，該用戶帳號和密碼由用戶負責(zé)保管，用戶須保證登錄信息的真實性、合法性、有效性。</p> <form> <input type="text" name="name" placeholder="登錄賬號" autocomplete="off"> <input type="password" name="password" placeholder="登錄密碼" autocomplete="off"> <p>使用<span> 賬號登錄</span>，即代表同意《用戶登錄協(xié)議》。</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代碼只是幫助大家分析結(jié)構(gòu)，是需要清除所有標簽的默認樣式。
有問題可以留言，大家一起學(xué)習(xí)HTML+CSS網(wǎng)頁設(shè)計。
們在上網(wǎng)的時候，經(jīng)常有一些登錄界面進行輸入賬號和密碼，以及我們在網(wǎng)上填一些信息，這些功能的實現(xiàn)都是通過表單來完成的，今天我們就來講講表單。
表單不是指一個標簽，而是指一類標簽。
我們表單里所有的內(nèi)容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內(nèi)容發(fā)送到想要發(fā)送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區(qū)別是get表單所傳的內(nèi)容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內(nèi)容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統(tǒng)默認get。當(dāng)然get和post的細區(qū)別還是有的，在這里我就不贅述了。
其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產(chǎn)生的作用也不同：如：<input type="text">產(chǎn)生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產(chǎn)生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產(chǎn)生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。
不知大家有沒有在網(wǎng)上做過選擇題，作者是做過的。網(wǎng)頁中的選擇題也是用的input。
input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。
既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設(shè)定默認選擇的選項。
我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現(xiàn)點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。
我們來看一下代碼和結(jié)果：
作者已經(jīng)盡量去說清楚了，歡迎大家批評指教，希望多多關(guān)注[送心]
絡(luò)用的多了，各種注冊、賬號、密碼也多了，管都管不過來，還好現(xiàn)在大多數(shù)瀏覽器都有各種類似帳號管家的功能，只要注冊登陸瀏覽器然后各種網(wǎng)站的賬號密碼只要登陸一次讓它記住就行了，全權(quán)委托給瀏覽器管理了，可有時確實需要這密碼，比如要手機上登陸什么的就抓了瞎，各種“找回密碼”、“忘記密碼”一通折騰費時又費力。
在來介紹一個簡單實用小技巧，無需任何工具軟件，利用HTML語言規(guī)則僅僅幾步就能讓你看到自己以前設(shè)定的密碼：
1、要讓這個密碼星號正常顯示出來，在密碼星號的輸入框中鼠標右擊，選擇最下面的“審查元素”。
2、此時會在瀏覽器的右側(cè)跳出網(wǎng)頁的HTML源代碼并以藍色選中，你不必要懂HTML，只要找到“type=password"就行。
3、將“password"改為"text"，然后回車，這時就會發(fā)現(xiàn)原來顯示星號密碼的部分已經(jīng)成功顯示當(dāng)初設(shè)定的密碼了，經(jīng)測試了幾個市面常用的瀏覽器均行的通，如果有不能正常顯示的請留言。
還請用于正當(dāng)用途。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
