當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html+css实现了简单的注册页面

發(fā)布時間：2024/3/12 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 html+css实现了简单的注册页面小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

直接上代碼
（注冊頁面：簡單修改就可用）

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>注冊頁面</title><link rel="stylesheet" href="css/zhuce.css" /><script src="js/zhuce.js"></script></head><body><div class="head"><div class="zc"><form method="get"><table class="teble" cellspacing="0" width="100%"><h2>用戶注冊</h2><tr><td><input class="ex" type="text" placeholder="請輸入用戶名" name="yer"/></td></tr><tr><td><span class="span">支持中文，字母，數(shù)字的組合</span></td></tr><tr><td><input class="ex" type="password" placeholder="請輸入密碼" name="h"/></td></tr><tr><td><span class="span">建議使用數(shù)字，字母和符號</span></td></tr><tr><td><input class="ex" type="password" placeholder="請確認密碼" name="c"/></td></tr><tr><td><span class="span">兩次密碼不一致</span></td></tr><tr><td><input class="ex" type="number" placeholder="驗證手機號" name="df"/><a href="#">驗證</a></td></tr><tr><td><span class="span">請輸入用戶名</span></td></tr><tr><td><input class="zcsd" type="submit" value="立即注冊" /></td></tr><tr><td><sapn><input class="xz" type="checkbox"/><a href="http://www.baidu.com" onclick="fn()">我已經(jīng)閱讀相關(guān)文件并以知曉</a></sapn></td></tr></table></form></div></div></body> </html>

zhuce.css

body {font-family: "隸書"; }.head {width: 2000px;height: 1060px;margin: 0 auto;margin-right: 14px;background-image: url("../img/x2.jpg");background-repeat: no-repeat; } .zc {width: 410px;height: 500px;position: absolute;top: 39%;left: 57%;}h2{text-align: center;color: antiquewhite;}form {width: 397px;height: 623px;border: 1px solid azure;border-radius: 20px;margin-top: -167px;}.ex {width: 295px;height: 44px;margin-top: 30px;border-radius: 6px;border: none;font-size: 18px;margin-left: 52px;text-indent: 20px;font-family: "隸書";}.zcsd {width: 270px;height: 43px;margin-top: 44px;margin-left: 68px;border-radius: 6px;border: none;background-color: #ff000094;color: aliceblue;font-size: 18px;}.xz {margin-left: 86px;margin-top: 14px;}.span {font-size: 15px;color: brown;margin-left: 77px;} }

1.2 登錄頁面

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>登錄界面</title><link rel="stylesheet" href="css/denglu.css" /></head><body><div class="head"><div class="zc"><form method="get"><table class="teble" cellspacing="0" width="100%"><h2>用戶登錄</h2><tr><td><input class="ex" type="text" placeholder="請輸入用戶名" name="yer"/></td></tr><tr><td><input class="ex" type="password" placeholder="請輸入密碼"/></td></tr><tr><td><input class="zcsd" type="submit" value="登錄" /><input class="zcsd sed" type="submit" value="取消" /></td></tr><tr><td><sapn><input class="xz" type="checkbox"/><a href="http://www.baidu.com" onclick="fn()">我已經(jīng)閱讀相關(guān)文件并以知曉</a></sapn></td></tr></table></form></div></div></body> </html>

denglu.css

body {font-family: "隸書"; }.head {width: 2000px;height: 1060px;margin: 0 auto;margin-right: 14px;background-image: url("../img/x2.jpg");background-repeat: no-repeat; } .zc {width: 410px;height: 500px;position: absolute;top: 39%;left: 57%;}h2{text-align: center;color: antiquewhite;}form {width: 397px;height: 452px;border: 1px solid azure;border-radius: 20px;margin-top: -167px;}.ex {width: 295px;height: 44px;margin-top: 30px;border-radius: 6px;border: none;font-size: 18px;margin-left: 52px;text-indent: 20px;font-family: "隸書";}.zcsd {width: 88px;height: 43px;margin-top: 44px;margin-left: 68px;border-radius: 6px;border: none;background-color: #ff000094;color: aliceblue;font-size: 18px;}.xz {margin-left: 86px;margin-top: 14px;}.span {font-size: 15px;color: brown;margin-left: 77px;}.sed {background-color: #173f75c7;} }背景圖片 ![在這里插入圖片描述](https://img-blog.csdnimg.cn/2021060109223756.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU4OTk5MA==,size_16,color_FFFFFF,t_70#pic_center)(js邏輯代碼后期再添加)

總結(jié)

以上是生活随笔為你收集整理的html+css实现了简单的注册页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： mysql两个时间相减的分钟数_mysq
下一篇： iOS-UITableView 中自定制