使用HTML/CSS写注册界面

来源：互联网发布：电子文档软件编辑：程序博客网时间：2024/06/05 07:47
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册</title><style type="text/css">th{font-size: 30px;color:blue;}.td_1{font-size: 25px;text-align: center;width:80px;height: 30px;}.td_2{font-size: 20px;}.td_3{text-align: center;width: 200px;font-size: 20px;}.a_1{text-decoration: none;color:green;}.img_1{width: 27px;border-radius: 50%;overflow: hidden;}</style></head><body><div style="position: absolute;z-index: -1;width: 99%;height: 98.5%"><img src="background_1.jpg" alt="background_1" width="100%" height="100%"></div><form action="index.html"><table border="1" cellpadding="10" cellspacing="1" width="520px" align="center" bgcolor="#adeaea"><th align="center" colspan="2">新用户注册</th><td rowspan="4" class="td_3">已有账号 <a href="login.html" target="_target" class="a_1">立即登录</a></td><tr><td class="td_1">用户名</td><td><input type="text" name="" value="" class="input_1" maxlength="12"></td></tr><tr><td class="td_1">密   码</td><td><input type="password" name="" value="" class="input_1"  maxlength="15"></td></tr><tr><td class="td_1">性   别</td><td class="td_2">      <input type="radio" name="sex" value="" checked="checked">男       <input type="radio" name="sex" value="">女</td></tr><tr><td class="td_1">爱   好</td><td style="font-size: 13px;"><input type="checkbox" name="" value="">唱歌                <input type="checkbox" name="" value="">跳舞                <input type="checkbox" name="" value="">绘画                <input type="checkbox" name="" value="">骑车                <input type="checkbox" name="" value="">书法                <input type="checkbox" name="" value="">运动                <input type="checkbox" name="" value="">跑步                <input type="checkbox" name="" value="">学习</td><td rowspan="4" class="td_3">-----快速登录-----<br><br><a href=""><img src="QQ_Logo.jpg" alt="QQ_Logo" class="img_1"></a><a href=""><img src="微博_Logo.jpg" alt="微博_Logo" class="img_1"></a><a href=""><img src="微信_Logo.jpg" alt="微信_Logo" class="img_1"></a><a href=""><img src="支付宝_Logo.jpg" alt="支付宝_Logo" class="img_1"></a></td></tr><tr><td class="td_1">家   乡</td><td><select name="" id=""><optgroup label="四川">                            <option value="广安">广安</option>                            <option value="成都">成都</option>                            <option value="自贡">自贡</option>                            <option value="德阳">德阳</option>                            <option value="绵阳">绵阳</option>                            <option value="眉山">眉山</option>                                 </optgroup>                        <optgroup label="广东">                            <option value="深圳">深圳</option>                            <option value="广州">广州</option>                            <option value="惠州">惠州</option>                            <option value="珠海">珠海</option>                            <option value="东莞">东莞</option>                            <option value="汕头">汕头</option>                            <option value="韶关">韶关</option>                        </optgroup>                        <optgroup label="湖南">                            <option value="张家界">张家界</option>                            <option value="长沙">长沙</option>                            <option value="湘西">湘西</option>                            <option value="岳阳">岳阳</option>                            <option value="衡阳">衡阳</option>                            <option value="韶山">韶山</option>                            <option value="株洲">株洲</option>                        </optgroup></select></td></tr><tr><td class="td_1">自<br>我<br>介<br>绍</td><td><textarea name="" id="" cols="25" rows="10"></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" name="" value="确认" style="font-size: 20px;color:blue;background-color: #adeaea;width: 70px;">     <form action="index.html"><input type="submit" name="" value="取消" style="font-size: 20px;color:blue;background-color: #adeaea;width: 70px;"></form></td></tr></table></form></body></html>
结果展示
阅读全文
0 0