代码赏析：
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| body{ | |
| background:#18c1ff; | |
| } | |
| .box{ | |
| width:500px; | |
| height:550px; | |
| background: #f9f9f9; | |
| margin:50px auto; | |
| overflow:hidden; | |
| } | |
| .box h2{ | |
| width:430px; | |
| font-size:24px; | |
| line-height: 50px; | |
| color:#fd8653; | |
| font-weight:normal; | |
| margin:10px auto 20px; | |
| border-bottom:1px solid #d5d5d5; | |
| } | |
| .form{ | |
| width:430px; | |
| overflow:hidden; | |
| margin:15px 0 25px 25px; | |
| } | |
| .form label{ | |
| float:left; | |
| width:100px; | |
| height:38px; | |
| line-height: 38px; | |
| text-align: right; | |
| font-size:14px; | |
| } | |
| .form input{ | |
| width:300px; | |
| height:30px; | |
| border:1px solid red; | |
| outline:none; | |
| text-indent:10px; | |
| float:left; | |
| font-size:14px; | |
| } | |
| .form textarea{ | |
| width:300px; | |
| height:60px; | |
| border:1px solid blue; | |
| outline:none; | |
| } | |
| .form .check{ | |
| width:15px; | |
| height:15px; | |
| border:1px solid #ccc; | |
| margin-left:100px; | |
| } | |
| .form .xieyi{ | |
| float:left; | |
| color:#333; | |
| font-size:14px; | |
| margin-left:10px; | |
| } | |
| .zhuce{ | |
| width:330px; | |
| height:38px; | |
| background:#00ccff; | |
| border:0px; | |
| font-size:18px; | |
| color:#fff; | |
| margin-left:100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 1.搭建框架界面 --> | |
| <div class="box"> | |
| <h2>注册表单</h2> | |
| <form action=""> | |
| <div class="form"> | |
| <label for="">用户名：</label> | |
| <input type="text"> | |
| </div> | |
| <div class="form"> | |
| <label for="">密码：</label> | |
| <input type="password"> | |
| </div> | |
| <div class="form"> | |
| <label for="">确认密码：</label> | |
| <input type="password"> | |
| </div> | |
| <div class="form"> | |
| <label for="">邮箱：</label> | |
| <input type="text"> | |
| </div> | |
| <div class="form"> | |
| <label for="">个人简介：</label> | |
| <textarea name="" id=""></textarea> | |
| </div> | |
| <div class="form"> | |
| <input type="checkbox" class="check"> | |
| <span class="xieyi">同意用户协议</span> | |
| </div> | |
| <input type="submit" value="注册" class="zhuce"> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
扫一扫
2552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
