HTML_案例(注册案例CSS版)
2024-08-28 22:57:28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>会员注册</title> <style> /*使用通配符设置margin设置文字行于行之间的宽度*/ *{ margin: 5px; } /*设置全页背景*/ body{ background: url("./img/register_bg.png") no-repeat center; line-height: 1; } /*绘制登录框*/ .beijing{ border: 5px solid #EEEEEE; width: 1000px; height: 700px; margin: auto; background: white; } /*设置左上字体*/ .d1{ color: #FFD266; } .d2{ color: #ABA9A7; } /*设置浮动调格式*/ .zuo{ float: left; } .zhong{ float: left; } .you{ float: right; } /*设置右边字体*/ #p1{ font-size: 10px; } #p2{ color: red; font-size: 10px; } /*设置中间格式*/ /*设置文字右对齐颜色灰色*/ .td_left{ width: 100px; height: 45px; text-align: right; color: #ABA9A7; } /*设置文本框长度*/ .td_right{ padding-left: 50px; box-sizing: border-box; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #ABA9A7; /*设置边框圆角*/ border-radius: 10px; } #checkcode{ width: 100px; } /*设置按钮*/ #td_sub{ width: 100px; height: 30px; background: #FFD266; } </style> </head> <body> <div class="beijing"> <div class="zuo"> <p class="d1">新用户注册</p> <p class="d2">USER REGISTER</p> </div> <div class="zhong"> <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 src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input id="td_sub" type="submit" value="注册"></td> </tr> </table> </div> <div class="you"> <p id="p1">已有账号?<a id="p2" href="#">立即登录</a></p> </div> </div> </table> </body> </html>
最新文章
- deepsooncms在Ubuntu 14.04上部署教程
- 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
- Unity-WIKI 之 SplashScreen
- 村村通(codevs 2627)
- 001. 使用ssh连接不上centos 6.5的解决方法及其解决中文乱码
- 中文unicode范围及unicode编解码
- c#使用easyhook库进行API钩取
- 【 D3.js 高级系列 — 8.0 】 标线
- JQ 动态添加节点
- JAVA jdbc(数据库连接池)学习笔记(转)
- Linux CPU监控指标
- SpringMvc多视图配置(jsp、velocity、freemarker) 在src目录views.properties配置
- 本地文件与服务器文件同步shell脚本。
- 2018-2019-2 20165303《网络攻防技术》Exp5 MSF基础应用
- Golang安装与环境的配置
- linux报错汇总
- php 固定红包 + 随机红包算法
- plsql调试存储过程卡住的原因以及处理
- await和async在C#一般处理程序(ashx)中的使用
- ALGO-1_蓝桥杯_算法训练_区间k大数查询