前端案例 ——注册页面（html+css实现）
2024-04-26 11:50:26
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background: url("img/2.jpg") no-repeat center;}.rg_layout{width: 900px;height: 500px;border: 8px solid #eeeeee;background-color: white;/* 让div水平居中 */margin: auto;margin-top: 15px;/* padding: 15px; */}.rg_left{/* border: 1px solid red; */float: left;margin: 15px;}.rg_left p:first-child{color: #fed026;size: 20px;}.rg_left p:last-child{color: #a6a6a6;size: 20px;}.rg_center{width: 450px;/* border: 1px solid red; */float: left;}.rg_right{/* border: 1px solid red; */float: right;}.rg_right p:first-child{/* color: #a6a6a6; */font-size: 15px;}.rg_right p a{color: pink;}.td_left{width: 100px;text-align: right;height: 45px;color: #a6a6a6;}.td_right{padding-left: 50px;color: #a6a6a6;}#username,#password,#email,#name,#tel,#birthday{width: 251px;height: 32px;border: 1px solid #a6a6a6;/* 设置边框圆角 */border-radius: 5px;padding-left: 10px;}#checkcode{width: 150px;height: 32px;border: 1px solid #a6a6a6;border-radius: 5px;padding-left: 10px;}#img_check{height: 32px;/* 验证码图片垂直居中 */vertical-align: middle;}#btn_sub{width: 150px;height: 40px;background-color: #ffd026;border: 1px solid #a6a6a6;}</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--><form action="#" method="post"><table ><tr><td class="td_left"><label for="usename"></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"></label> email</td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入email"></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="famale">女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="data" 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/2.png" ></td></tr><tr><td colspan="2" align="center"><input type="submit" id = "btn_sub" value="注册"></td></tr></table></form></div></div><div class = "rg_right"><p>已有账号? <a href="#"> 立即登录 </a></p></div></div>
</body>
</html>
前端案例 ——注册页面（html+css实现）相关推荐
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- 综合案例-注册页面(HTML)
综合案例-注册页面(HTML) <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
- PC端品优购注册页面 resgister.css以及web服务器学习
注册页类名命名 注册页面:register.html 注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化 注册专区: registerarea 注册内容 reg-form 错误 ...
- 【web项目】前端生日礼物--注册页面篇
文章目录 总计划 注册界面 页面背景设置 注意 字体选择 不明原因:在父相子绝下字体不对齐父类 登录浮窗 制作透明盒子 给盒子设定圆角值 把透明盒子搬到register页面中 文本输入框样式设置 1. ...
- html注册页面美化,css登录界面美化
本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下. 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .co ...
- 注册页面（CSS）效果图+代码
效果图 代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 前端登录注册页面、多方式登录功能、腾讯云短信发送功能二次封装(包)、发送短信接口
- HTML 表格标签、列表标签、表单标签（案例： 注册页面）
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
- web前端开发主要课程，CSS字体样式值，赶紧收藏！
前言 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架再好,无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司. (本篇文章可能只是适用于刚毕业的同学或者 ...
最新文章
- 别踩白块java程序代码_别踩白块源码
- sysbench 压测 mysql_sysbench压测
- Mybatis:传输多个参数
- 【DirectX12】1.基本组件创建和绘图流程
- 第十二章 多元线性回归
- Debugging with GDB (6) gdb 命令
- Hadoop Jobhistory配置启用
- 《小强与小明》——正在疯传的伟大的故事
- Linux 基本命令（十）--grep 常用命令
- java.lang.classnotfo_java.lang.ClassNotFoundException
- 【数据库】数据库安全（授权，回收）
- java--分布式ID生成器
- xp系统telnet服务器,xp电脑telnet服务器
- 【饭谈】职业生涯的关键：不破不立
- 如何用python绘制等边三角形_python叠加等边三角形的代码编写方法
- BERTILO发“富”啦，来元代艺数get你的专属「招财兔」！
- 计算机网络——互联网上的音/视频服务
- 【计算方法】线性方程组的数值解法
- educoder 国标码转区位码实验(详细)
- mac m1关闭sip系统完整性保护csrutil disable，如何禁用mac m1的系统完整性保护