日韩精品人妻一区二区在线看 ,国产精品日本一区二区不卡视频

大家好，這篇文章給大家分享怎么樣設計一個簡單的會員登陸頁面
話不多說，直接看效果圖：

文章插圖
簡單的會員登陸頁面
html代碼：
<div ><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> 知識點：
form標簽用于將input等表單元素標簽包起來，可以提交數(shù)據(jù)到服務器，比如文本字段、復選框、單選框、提交按鈕等等。input標簽包含類型、名稱等其他屬性，如type=”text”表示單行文本框、type=”password”表示密碼文本框、name=””表示標簽名稱、placeholder=””表示提示信息等等。
從上面的效果圖來看，我們需要定義黑色背景，表單區(qū)域居中顯示，頭部是標題介紹，中間兩個表單元素分別輸入賬號和秘密，下方則是同意會員登陸協(xié)議和立即登陸按鈕。
CSS代碼：
首先我們用body來定義背景顏色：
body { background: #252935;} 給div命名一個tpt-login樣式名稱，來控制整個表單樣式，如定義高度和寬度為360像素、內(nèi)邊距上下50像素，左右30像素、背景顏色為白色、8像素的邊角、最后用position: absolute絕對定位來使整個區(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;} 頭部標題介紹用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é)議和立即登陸按鈕，我就不詳細介紹了，直接看代碼：
.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;} 這樣一個簡單的會員登陸頁面就完成了，當然，布局的方式有很多種，這只是其中一個方法，也歡迎大家留言分享一下其他的布局方式，謝謝觀看?。?！

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

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

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