登录表单

最新推荐文章于 2021-08-09 14:21:05 发布

dichangze4650

最新推荐文章于 2021-08-09 14:21:05 发布

阅读量185

点赞数

原文链接：http://www.cnblogs.com/1106764044zhao/p/9852925.html

版权

<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>网页</title> <style> *{margin:0;padding:0;} ul,li{list-style:none;} a{text-decoration:none;} form{ position:relative; width:430px; margin:100px auto; border:1px solid #cccccc; box-shadow:5px 5px 5px #cccccc; border-radius:5px; } lable{ float:right; margin-top:30px; } input{ width:300px; height:50px; margin-right:30px; text-align:20px; margin-left:5px; border-radius:5px; border:1px solid #ddd; cursor: pointer; } .bottom{ width:400px; height:60px; margin-top:450px; color:white; text-align:center; } .left{ float:right; width:150px; background:#6699ff; padding:5px 5px 8px 8px; margin-left:30px; border-radius:5px; cursor: pointer; } .right{ float:right; width:50px; background:#6699ff; padding:5px 5px 8px 8px; border-radius:5px; cursor: pointer; } .check{ position:absolute; display:none; top:24px; left:405px; width:150px; background:#ccccff; } input:focus +.check{ display:block; } </style> </head> <body> <form action=""> <lable>user<input type="user" placeholder="请输入账号"> <div class="check"> 用户名必须为8-10个英文字符 </div> </lable> <lable> password<input type="password" placeholder="密码" > </lable> <lable> password<input type="password" placeholder="再次输入密码" > </lable> <lable> email<input type="email" placeholder="输入你的邮箱" > </lable> <lable> rickname<input type="name" placeholder="昵称"> </lable> <div class="bottom"> <div class="left">我有账号,我要登录</div> <div class="right">注册</div> </div> </form> </body> </html>