html-css练习题 (注册表单)

来源：互联网发布：c语言音乐函数编辑：程序博客网时间：2024/06/13 02:23

代码赏析：

<!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>  <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>

阅读全文

0 0