国产av人人夜夜澡人人爽app,五月综合婷婷在线观看

文章插圖
大家好，這篇文章給大家分享怎么樣設(shè)計(jì)一個(gè)簡單的會員登陸頁面
話不多說，直接看效果圖：
簡單的會員登陸頁面
html代碼：
<div class="tpt-login"><h2>簡單的會員登陸頁面</h2><form><input type="text" name="name" placeholder="請輸入賬號"><input type="password" name="password" placeholder="請輸入密碼"><p><span><i></i></span>我已閱讀并同意<a target="_blank"> 會員登陸協(xié)議</a></p><button>立即登錄</button></form></div>知識點(diǎn)：
form標(biāo)簽用于將input等表單元素標(biāo)簽包起來，可以提交數(shù)據(jù)到服務(wù)器，比如文本字段、復(fù)選框、單選框、提交按鈕等等。input標(biāo)簽包含類型、名稱等其他屬性，如type=”text”表示單行文本框、type=”password”表示密碼文本框、name=””表示標(biāo)簽名稱、placeholder=””表示提示信息等等。
從上面的效果圖來看，我們需要定義黑色背景，表單區(qū)域居中顯示，頭部是標(biāo)題介紹，中間兩個(gè)表單元素分別輸入賬號和秘密，下方則是同意會員登陸協(xié)議和立即登陸按鈕。
CSS代碼：
首先我們用body來定義背景顏色：
body { background: #252935;}給div命名一個(gè)tpt-login樣式名稱，來控制整個(gè)表單樣式，如定義高度和寬度為360像素、內(nèi)邊距上下50像素，左右30像素、背景顏色為白色、8像素的邊角、最后用position: absolute絕對定位來使整個(gè)區(qū)域左右垂直居中：
.tpt-login {width: 360px;height: 360px;padding: 50px 30px;background: #FFF;border-radius: 8px;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;}頭部標(biāo)題介紹用h2定義，字體大小為28像素，顏色為黑色并居中等:
.tpt-login h2 {font-size: 28px;font-weight: 500;padding-bottom: 50px;text-align: center;color: #333;}中間表單元素需要定義寬度和行高，字體大小為16像素，背景顏色為灰色等:
.tpt-login input {width: 340px;padding: 0 10px;margin-bottom: 20px;height: 55px;line-height: 55px;border: 0;background: #f5f5f5;font-size: 16px;color: #666;}下方則是同意會員登陸協(xié)議和立即登陸按鈕，我就不詳細(xì)介紹了，直接看代碼：
.tpt-login button {display: inline-block;height: 50px;line-height: 50px;width: 360px;background: #1e9fff;color: #fff;font-size: 16px;margin-top: 20px;border: none;border-radius: 2px;cursor: pointer;}.tpt-login p {font-size: 14px;color: #777;}.tpt-login a {font-size: 14px;color: #3581b9;}.tpt-login span {position: relative;display: inline-block;width: 7px;height: 7px;border-radius: 100%;border: 1px solid #ff5722;padding: 4px;top: 4px;margin-right: 6px;}.tpt-login i {position: absolute;display: inline-block;width: 7px;height: 7px;border-radius: 100%;background: #ff5722;}這樣一個(gè)簡單的會員登陸頁面就完成了，當(dāng)然，布局的方式有很多種，這只是其中一個(gè)方法，也歡迎大家留言分享一下其他的布局方式，謝謝觀看?。?！

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時(shí)就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

網(wǎng)頁制作登錄注冊頁面 html登陸頁面代碼