整合營銷服務(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>用戶登錄成功后，該用戶帳號和密碼由用戶負責保管，用戶須保證登錄信息的真實性、合法性、有效性。</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)，是需要清除所有標簽的默認樣式。
有問題可以留言，大家一起學習HTML+CSS網(wǎng)頁設(shè)計。
圖1
圖2
圖3
就愛UI - 分享UI設(shè)計的點點滴滴
我們在瀏覽網(wǎng)頁時會經(jīng)常遇到注冊會員的界面，大概像這個樣子：
或填寫問卷的情況，大概像這個樣子：
我們把這些內(nèi)容稱之為表單。
如何向自己的頁面中添加表單呢？
添加表單的操作和添加表格類似。
首先我們要在頁面中寫入<form></form>標簽，這是向瀏覽器聲明這里是個表單，它本身并不會顯示在頁面中，但是可以全局控制表單元素的一些屬性，就像表格中的<table></table>標簽。
然后再在<form></form>中寫入<input/>標簽，這個標簽的內(nèi)容就會顯示在頁面中了，就像表格元素中的<tr><td>標簽。不同的是<input/>沒有結(jié)尾標簽。
下面讓我們寫一寫。
首先復(fù)制"第一個頁面.html"文件。改名為"表單.html"，然后清空<body></body>中的內(nèi)容，將<head></head>中間的<title></title>中間的內(nèi)容改為"表單"，這樣方便我們查看測試頁面。
示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
</body>
</html>下面我們要寫入表單內(nèi)容，示例代碼如下：
<form> <input/></form>頁面效果如下：
只有一個輸入框。下面，我們?yōu)檩斎肟蛱砑用Q"會員名稱："，示例代碼如下：
<form> 會員名稱： <input/></form>效果如下：
這樣我們就寫出了一個簡單的表單，如果為表單添加更多內(nèi)容和設(shè)置，就要繼續(xù)了解表單的屬性。
表單元素屬性1
<input/>標簽通過改變type屬性可以變換出不同功能，在頁面制作中，我認為<input/>標簽中的type屬性最重要。
下面我們來看一下type屬性不同的值。
圖片來源W3School
輸入文字：首先，先來看text值。說明很明確，這個屬性值的<input>標簽主要是用來輸入文本，比如"會員名稱。"
示例代碼如下：
<form> 會員名稱： <input type="text"/></form>頁面效果如圖所示：我胡亂輸入了幾個字母
如果不指定type的text值的話，表面看起來并不影響輸入內(nèi)容，但是表單的內(nèi)容最終是要提交到服務(wù)器的，如果不注明type="text"，服務(wù)器就不能判斷你輸入的字符到底是一段代碼還是一段字符串組成的文本，因此，我們?yōu)榱俗屘岬慕粩?shù)據(jù)在服務(wù)器端能被準確識別，一定要寫好type的屬性。
除此之外變換type值也能為<input/>變換不同功能。
制作提交按鈕：例如"submit"（提交）。在我們輸入完表單內(nèi)容后，一般都有一個提交按鈕，這個提交按鈕也是由<input/>標簽來完成的。
示例代碼如下：
<form> 會員名稱： <input type="text"/> <input type="submit"/></form>如圖所示：
因為<input/>是內(nèi)聯(lián)元素，所以"submit"按鈕會和之前的<input>顯示在一行，換行的話很簡單，可以使用<br>標簽。
大家觀察一下發(fā)現(xiàn)，我們并沒有給"submit"按鈕指定文字，在按鈕上卻出現(xiàn)了"提交查詢"的字樣，這是html默認的，如果我們要改變按鈕文字就要使用value這個屬性。示例代碼如下：
<input type="submit" value = "提交"/>頁面效果如下：
其實我們在輸入文字時，輸入框里會經(jīng)常有提示文字，當我們點擊輸入框時，提示文字消失了，這個功能怎么實現(xiàn)？
這又涉及到一個新屬性，叫做"placeholder"（提示文字）。
示例代碼如下：
<input type="text" placeholder = "請輸入英文或漢語拼音"/>頁面效果如下：
下面我們來練習一下，示例代碼如下：
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音"/><br>
會員密碼：<input type = "text" placeholder = "請輸入英文字母、特殊符號、數(shù)字"/><br>
確認密碼：<input type = "text" /><br><input type = "submit" value = "提交"/><br>
</form>頁面效果如下：（想把密碼字符顯示為小圓點的讀者可以先去屬性值列表中找找"password"看看，咱們后面會細致講解）
制作多選表單：多選表單的type屬性值是"checkbox"。
我猜大家也猜到該怎么寫了，示例代碼如下：
<form>
興趣愛好：<br>
<input type = "checkbox" name="hobby" value = "reading"/>讀書
<input type = "checkbox" name="hobby" value = "film"/>電影
<input type = "checkbox" name="hobby" value = "painting"/>繪畫
<input type = "checkbox" name="hobby" value = "music"/>音樂
<br>
<input type = "submit" value = "submit"/>
</form>頁面效果如下：
大家可以點點試試，可以多選了。如圖：
這時小伙伴們會發(fā)現(xiàn)在這組示例中，出現(xiàn)了name和value兩個屬性。
先說value，在"submit"中，value的值也就是"提交"二字，是直接顯示在按鈕上的，而這里的value值卻沒有顯示，顯示出來的是我們在<input/>標簽后面輸入的"讀書、電影、繪畫、音樂"這樣的字樣。也就是說這里的value不會顯示為選框的名字！
那value屬性是干嘛的呢？實際上"checkbox"屬性下的value屬性值是寫給后臺的服務(wù)器看的。
我們向服務(wù)器提交選擇后，服務(wù)器把name的名稱作為數(shù)據(jù)的大類名稱，把value值作為大類中的子類名稱來存儲或分析數(shù)據(jù)。
比如這個選擇表單是有關(guān)興趣愛好的，因此數(shù)據(jù)的大類屬于"愛好"（hobby），即name="hobby"，hobby中又分為"reading"（讀書），"film"（電影），"painting"（繪畫），"music"（音樂），即value="reading"、value="film"等等。這樣不同用戶的不同選擇就按照這個數(shù)據(jù)組織方式提交給了服務(wù)器。
大家明白了嗎？
另外需要說明的是，name和value最好使用英文或拼音來書寫！
雖然我們目前不涉及后端服務(wù)器上的操作，但是在學習時要養(yǎng)成規(guī)范書寫的習慣。
其實，除了type="submit"的情況外，其他需要輸入信息的type屬性類型都是要寫name屬性的，不過不同type屬性類型的value卻不太一樣。
下面我們來看看type="text"時的標準寫法：當type="text"的時候，不必寫value屬性，因為value值為用戶輸入的內(nèi)容
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼：
<input type = "text" placeholder = "請輸入英文字母、特殊符號、數(shù)字" name="passWord"/><br>
確認密碼：<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>今天的內(nèi)容先到這里，我們明天繼續(xù)講解"表單元素"。
喜歡的小伙伴請關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作
HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
