html+css注册页面

原创2019-01-05 18:48:13183
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>注册页面</title></head><style>   &nbs

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>注册页面</title>
</head>
<style>
   *{margin:0px;padding:0px;}
   body{background:#3C8DBC;}
   .box{
       width:350px;
       height:400px;
       background: white;
       border:1px solid #ccc;
       border-radius: 8px;
       margin:250px auto;
       /*margin-left: 800px;*/
       /*margin-top:250px;*/
}
   form{
       padding-top:20px;
       /*padding-left:5px;*/
       /*margin: 20px 0px;*/
}
   input{
       width:200px;
       height: 30px;
       margin: 10px auto;
   }
   .button{
       margin-left:40px;
   }
   button{
       width: 260px;
       height:40px;
       background:#0B5A87;
       border: 1px solid #ffffff;
       color:#ffffff;
       margin-bottom:10px;
   }
   .zcym{
       font-size: 30px;
       font-weight:bold;
       margin:auto 100px ;
   }
</style>
<body>
<div class="box">
   <form action="" method="post">
       <div class="zcym">
           <label >注册页面</label>
       </div>
       <hr style="margin-top:10px;">
       <p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
       <div>
           <label>用&nbsp;&nbsp;户&nbsp;&nbsp;名:</label>
           <input type="text" name="username" placeholder="请输入帐号"><br>
           <p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
       </div>
       <div>
           <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
           <input type="password" name="password" placeholder="请输入密码"><br>
           <p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
       </div>
       <div>
           <label>确定密码:</label>
           <input type="password" name="password" placeholder="确定密码"><br>
           <p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>

       </div>
       <div>
           <label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label>
           <input type="email" name="email" placeholder="邮箱@php.cn"><br>
       </div>
       <p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
       <div >
           <label>验&nbsp;&nbsp;证&nbsp;&nbsp;码:</label>
           <input type="text" name="verification" placeholder="验证码" style="width:80px;"><br>


       </div>
       <hr style="margin-bottom:10px;">
       <div class="button">
           <button type="submit">注册</button>
       </div>
   </form>
</div>
</body>
</html>

批改老师:西门大官人批改时间:2019-01-05 19:45:44
老师总结:大体上的效果出来了,最好给form加个内边距,这样会好看些,另外,css样式最好写到一起,不要即有header中的css,也有元素上的css

发布手记

热门词条