直播软件app开发，HTML和CSS分别实现注册页面表单
直播软件app开发，HTML和CSS分别实现注册页面表单
HTML
1 | <!DOCTYPE html><br><html><br><head><br> <meta charset="UTF-8"><br> <title>HTML注册页面</title><br></head><br><body><br><form action="#" method="post"><!--传入地址为：#--><br> <table border="1" width="500px"><br> <tr><br> <td><label for="username">用户名</label></td><br> <td><input type="text" name="username" id="username" required></td><!--required为必选--><br> </tr><br> <br> <tr><br> <td><label for="password">密码</label></td><br> <td><input type="password" name="password" id="password" required></td><br> </tr><br> <br> <tr><br> <td><label for="email">Email</label></td><br> <td><input type="email" name="email" id="email" required></td><br> </tr><br> <br> <tr><br> <td><label for="name">姓名</label></td><br> <td><input type="text" name="name" id="name" required></td><br> </tr><br> <br> <tr><br> <td><label for="tel">手机号</label></td><br> <td><input type="text" name="tel" id="tel" required></td><br> </tr><br> <br> <tr><br> <td><label>性别</label></td><br> <td><input type="radio" name="sex" value="male" checked="checked">男<!--checked为默认选择--><br> <input type="radio" name="sex" value="famale">女</td><br> </tr><br> <br> <tr><br> <td><label for="birthday">出生日期</label></td><br> <td><input type="date" name="birthday" id="birthday"></td><br> </tr><br> <br> <tr><br> <td><label for="checkcode">验证码</label></td><br> <td><input type="text" name="checkcode" id="checkcode"><br> <img src="img/yzm1.jpg" width="100px" height="20px"></td><br> </tr><br> <br> <tr><br> <td colspan="2"><input type="submit" value="注册"></td><!--colspan合并两个单元格--><br> </tr><br> </table><br></form><br> <br></body><br></html> |
CSS
1 | <!DOCTYPE html><br><html><br><head><br> <meta charset="UTF-8"><br> <title>CSS注册页面</title><br> <style><br> *{<br> margin: 0px;/*margin是盒子的外边距，即盒子与盒子之间的距离，而pdding是内边距，是盒子的边与盒子内部元素的距离*/<br> padding: 0px;<br> box-sizing: border-box;<br> }<br> <br> body{<br> background: url("../img/background.jpg") no-repeat center;<br> }<br> <br> .ra_layout{<br> width: 950px;<br> height: 550px;<br> border: 8px solid #EEEEEE;<br> <br> margin: auto;/*让div水平居中*/<br> margin-top: 50px;<br> padding: 15px;<br> }<br> <br> .re_left{<br> /*border: 1px solid red;*/<br> float: left;<br> margin: 15px;<br> }<br> <br> .re_left > p:first-child{/*选择re_left下的第一个p*/<br> color: #FFD026;<br> font-size: 20px;<br> }<br> <br> .re_left > p:last-child{/*或者给下面的p设置一个id，用ID选择器也行*/<br> color: #A6A6A6;<br> font-size: 20px;<br> }<br> <br> .re_center{<br> /*border: 1px solid red;*/<br> float: left;<br> width: 500px;<br> }<br> <br> .re_right{<br> /*border: 1px solid red;*/<br> float: right;<br> margin: 15px;<br> }<br> <br> .re_right > p:first-child{<br> font-size: 20px;<br> }<br> <br> .re_right p a{<br> color: pink;<br> }<br> <br> .td_left{<br> width: 100px;<br> text-align: right;/*右对齐*/<br> height: 45px;/*上下两行间隔开，出现空行笑过*/<br> }<br> <br> .td_right{<br> padding-left: 50px;/*将文字与文本框之间出现间隔*/<br> }<br> <br> #username,#password,#email,#tel,#name,#birthday,#checkcode{<br> width: 250px;<br> height: 25px;<br> border: 1px solid #A6A6A6;<br> /*设置边框圆角*/<br> border-radius: 5px;<br> padding-left: 10px;<br> }<br> <br> #checkcode{<br> width: 125px;<br> }<br> <br> #img_check{<br> height: 25px;<br> width: 125px;<br> vertical-align: middle;/*图片水平居中*/<br> }<br> <br> #but{<br> width: 150px;<br> height: 40px;<br> background-color: #FFD026;<br> border: 1px solid #FFD026;<br> }<br> </style><br></head><br><body><br> <div><br> <div><br> <p>新用户注册</p><br> <p>USER REGISTER</p><br> </div><br> <br> <div><br> <div><br> <br> <form action="#" method="post"><br> <table><br> <tr><br> <td><label for="username">用户名</label></td><br> <td><input type="text" name="username" id="username" placeholder="请输入用户名" required></td><br> </tr><br> <br> <tr><br> <td><label for="password">密码</label></td><br> <td><input type="password" name="password" id="password" placeholder="请输入密码" required></td><br> </tr><br> <br> <tr><br> <td><label for="email">Email</label></td><br> <td><input type="email" name="email" id="email" placeholder="请输入邮箱" required></td><br> </tr><br> <br> <tr><br> <td><label for="name">姓名</label></td><br> <td><input type="text" name="name" id="name" placeholder="请输入姓名" required></td><br> </tr><br> <br> <tr><br> <td><label for="tel">手机号</label></td><br> <td><input type="text" name="tel" id="tel" placeholder="请输入手机号" required></td><br> </tr><br> <br> <tr><br> <td><label>性别</label></td><br> <td><input type="radio" name="sex" value="male" checked="checked">男<br> <input type="radio" name="sex" value="famale">女</td><br> </tr><br> <br> <tr><br> <td><label for="birthday">出生日期</label></td><br> <td><input type="date" name="birthday" id="birthday" required></td><br> </tr><br> <br> <tr><br> <td><label for="checkcode">验证码</label></td><br> <td><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码" required><br> <img src="../img/yzm1.jpg" id="img_check"></td><br> <!--<br> 相对路径：<br> ./代表当前目录下<br> ../代表上一级目录下<br> --><br> </tr><br> <br> <tr><br> <td colspan="2"><input type="submit" value="注册" id="but"></td><br> </tr><br> </table><br> </form><br> <br> </div><br> </div><br> <br> <div><br> <p>已有账号?<a href="#">立即登录</a></p><br> </div><br> <br> </div><br> <br></body><br></html> |
以上就是直播软件app开发，HTML和CSS分别实现注册页面表单， 更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现