HTML制作用户注册账户的页面与用户的登录页面
用户注册账户的页面：
对于上面的网页布局应该如何进行制作？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 500px; height: 700px; border: 2px solid red ; margin : 0 auto ; } </style> </head> <body> <div> <form method="GET" action="www.baidu.com"> <h3>用户注册</h3> <!-- size属性的默认值就是20，可以通过size进行调节 --> <!-- maxlength属性是输入字符内容长度的最大属性 --> <p>姓名：<input type="text" size="20" maxlength="4"></p> <p>密码：<input type="password"></p> <p> <!-- checked属性是默认属性，写在哪里哪里就是默认属性 --> <!-- name属性值的相同，表示就只能单选 --> 性别：男<input type="radio" name="sex" checked> 女<input type="radio" name="sex"> </p> <p> <!-- name属性相同，表示的是同一组的按钮选项 --> 爱好：篮球<input type="checkbox" name="1"> 足球<input type="checkbox" name="1"> 排球<input type="checkbox" name="1"> 乒乓球<input type="checkbox" name="1"> </p> <!-- 提交按钮 --> <input type="submit"> <!-- 重置按钮 --> <input type="reset"> <!-- 普通按钮 --> <input type="button" value="按钮"> <!-- 图片按钮 --> <p><input type="button" id="tu" value="图片按钮"></p> <p>上传照片：<input type="file"></p> <!-- 当提交的时候，如果输入的是不正确的网址，就会提示你输入正确的网址 --> <p>个人主页：<input type="url"></p> <!-- 当提交的时候，如果输入的是不正确的邮箱的话，就是给出提示信息 --> <p>电子邮箱：<input type="email"></p> <!-- 电话输入错误的时候是不会给出提示的 --> <p> 电话：<input type="tel" autofocus></p> <input type="range" min="1" max="30"> <!-- number的属性有调节按钮 --> <!-- min表示下限 max表示上限 step表示每一次增加或者减少多少 --> 年龄：<input type="number" name="number1" min="1" max="20" step="4"> <p>入学时间：<input type="date"></p> <p>datetime <input type="datetime"></p> <!-- 可以输入本地的时间 --> <input type="datetime-local"> </form> </div> </body> </html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576对于上图页面的设置，可以进行美观化：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style > *{margin: 0; padding: 0; } form{ margin: 20px auto; width: 500px; height: 600px; border: 1px solid orange; box-shadow: 3px 3px 3px 3px olive; } h3{ margin: 12px auto; text-align: center; } input{ margin: 8px; } input[id="tu"]{ background-image: url(images/see.jpg); } </style> </head> <body> <form action="www.baidu.com" method="POST" autocomplete="on" > <h3> 用户注册</h3> 姓名：<input type="text" size="18" maxlength="4" disabled><br> 密码：<input type="password" ><br> 性别：<input type="radio" name="female" checked> <img src="images/m.jpg" width="40px"> <input type="radio" name="female" > <img src="images/f.jpg" width="40px"><br> 爱好：<input type="checkbox" name="c1" >游泳 <input type="checkbox" name="c1">爬山 <input type="checkbox" name="c1">钓鱼<br> <input type="submit"> <input type="reset"> <input type="button" value="按钮"> <input id="tu" type="button" value="图片按钮"><br> 上传照片：<input type="file"><br> 个人主页：<input type="url" autofocus><br> 电子邮箱：<input type="email" ><br> 电 话： <input type="tel" autofocus><br> <input type="range" min="1" max="30"><br> 年龄：<input type="number" name="number1" min="1" max="20" step="4" /> 入学时间：<input type="date"><br> datetime <input type="datetime"><br> <input type="datetime-local"> <br> </form> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
用户的登录页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> form{ width: 400px; height: 400px; border: 1px solid red; border-radius: 1px solid red; margin:auto; margin-top: 150px; padding-top: 50px; padding-left: 53px; } div{ width: 340px; height: 180px; background: rgb(182, 182, 81); /* text-align只能用于行内元素，块元素不行（行内块元素可以居中） */ text-align: center; padding-top: 78px; } </style> </head> <body> <form action=""> <img src="images/login.JPG" > <div> <p> 账户名：<input type="text" ></p> <p>密 码：<input type="password"></p> <!-- submit行内块元素 --> <input type="submit" value="登录"> </div> </form> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
多学一点：
再看一种比较麻烦但是有效果的方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div.b{ width: 500px; height: 300px; margin: 20px auto; border : 1px solid red; } div p:nth-child(1){ margin-left: 50px; } form{ width: 400px; height: 200px; background: rgb(230, 230, 103); margin: 5px auto; border: 1px solid gray; } div form p:nth-child(1){ margin: 50px 50px 20px; border: 1px solid green; } div form p:nth-child(2){ margin: 20px 50px 20px; border: 1px solid green; } div form p:nth-child(3){ margin: 20px 50px 50px; border: 1px solid green; text-align: center; } </style> </head> <body> <div class="b"> <p> <img src="images/login.JPG" alt=""> </p> <form action="" method="GET" name="forml"> <p>账户名: <input type="text" name="account" size="20"></p> <p>密 码：<input type="password" name="pad" size="20"></p> <p><input type="submit" name="login" value="登录"></p> </form> </div> </body> </html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
相关知识
用户登录界面设计代码html
html欢迎引导页面
花店购物网站网页设计HTML静态页面模板
花店登录页面设计
Vue.js 订单页面实战：从零打造用户友好界面
静态页面和动态页面中的静态和动态到底指的是什么
【html网页页面005】html+css制作实现美食主题网页制作（3页面附效果及源码）
用户登录
用HTML制作网上商城
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面
网址: HTML制作用户注册账户的页面与用户的登录页面 https://m.huajiangbk.com/newsview948796.html
| 上一篇: 【古方草本减肥茶 |
下一篇: UML——用例图 |
