CSS注册页面案例
Posted weiyiming007
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS注册页面案例相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> * margin: 0px; padding: 0px; body background: url("img/register_bg.png"); .rg_layout width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; margin: auto; padding: 15px; .rg_left /*border: 1px solid red;*/ float: left; .rg_left > p:first-child color: #FFD026; font-size: 20px; .rg_left > p:last-child color: #A6A6A6; font-size: 20px; .rg_center /*border: 1px solid red;*/ float: left; width: 450px; .rg_right /*border: 1px solid red;*/ float: right; margin: 15px; .rg_right > p:first-child font-size: 15px; .rg_right > p a color: pink; .td_left width: 100px; text-align: right; height: 45px; .td_right padding-left: 50px; #username,#password,#email,#name,#tel,#birthday,#checkcode width: 251px; height: 32px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; #checkcode width: 110px; #img_check height: 32px; vertical-align: middle; #btn_submit width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_submit" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>
以上是关于CSS注册页面案例的主要内容,如果未能解决你的问题,请参考以下文章
黑马前端pinkhtml综合案例:圣诞节的那些事小说排行榜案例注册页面
HTML + CSS + JavaScript 实现注册页面信息验证(表单验证)