生活随笔
收集整理的這篇文章主要介紹了
HTML--- 创建一个登录页面（HTML，CSS）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
創(chuàng)建一個(gè)HTML，CSS登錄頁(yè)面
前端
login.html
代碼：
<!DOCTYPE html><html lang="en"><head><title>學(xué)籍管理登錄
</title><link href="style.css" rel="stylesheet"></head><body><div class="sign-up-from"><img src="default.jpg"><h1>系統(tǒng)登錄
</h1><form><input type="email" class="input-box" placeholder="請(qǐng)輸入賬號(hào)"><input type="password" class="input-box" placeholder="請(qǐng)輸入密碼"><p><span><input type="checkbox" checked ='checked'>
</span> 我同意服務(wù)條款
</p><button type="button" class="signUp-btn">登錄
</button><hr><p class="or">OR
</p><p>沒有賬號(hào)點(diǎn)擊這里
<a href="register.html" >注冊(cè)
</a></p><p class="cyjt">? 創(chuàng)業(yè)錦泰信息科技2020-20xx
</p></form></div></body></html>
style.css
代碼：
body{margin: 0;padding: 0;font-family: sans-serif;background-image: url(background1.jpg);background-size: cover;background-position: center;}.sign-up-from{width: 300px;box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);background: #fff;padding: 20px;margin: 8% auto 0;text-align: center;}.sign-up-from h1{color: #1c8abc;margin-bottom: 30px;}.input-box{border-radius: 20px;padding: 10px;margin: 10px 0;width: 90%;border: 1px solid #999;outline: none;}.input-box2{border-radius: 20px;padding: 10px;margin: 10px 0;width: 90%;border: 1px solid #999;outline: none;}.input-box3{border-radius: 20px;padding: 10px;margin: 10px 0;width: 90%;border: 1px solid #999;outline: none;}button{color: #fff;width: 100%;padding: 10px;border-radius: 20px;font-size: 15px;margin: 10px 0;border: none;outline: none;cursor: pointer;}.signUp-btn{background-color: #1c8abc;}.twitter-btn{background-color: #21afde;}a{text-decoration: none;}hr{margin-top: 20px;width: 80%;}.or{background: #fff;width: 30px;margin: -19px auto 10px;}img{width: 70px;border-radius: 30px;margin-top: -70px;}.cyjt{font-size: 15px;color: #aaa;}
參考圖片：
default.jpg
background1.jpg
登錄頁(yè)面源碼：
【已經(jīng)個(gè)人分享，粉絲可下載】
總結(jié)
以上是生活随笔為你收集整理的HTML--- 创建一个登录页面（HTML，CSS）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
