效果图

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background: url("image/register_bg.png") no-repeat;}.rg_layout{width: 900px;height: 500px;border: 5px solid #EEEEEE;background-color: white;/*让div水平居中*/margin: auto;margin-top: 15px;}.rg_left{float: left;margin: 15px;width: 20%;}.rg_left > p:first-child{color: #FFD026;font-size: 20px;}.rg_left > p:last-child{color: #A6A6A6;}.rg_center{/*border: 1px solid red;*/float: left;width: 450px;/*margin: 15px;*/}.rg_right{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,#checkcode,#birthday{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_sub{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"></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="data:image/verify_code.jpg" ></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>

注册页面（CSS）效果图+代码相关推荐

登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
登录、注册页面及后台代码
一.登录页面及后台代码 1.登录页面如图1所示首先进行身份选择,由"管理员"和"用户"两种身份进行选择,选择不同的身份,程序会进入不同的数据表检索登录信息:当 ...
html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影男女第一句:act ...
html+css登录注册页面案例
一.展示效果 1. 登陆页面展示(背景图片来自网络可以自己更换): 2. 注册页面展示: 二.需要添加的normalize.css跟common.css 代码如下(normalize.css重置样式表 ...
使用HTML代码完成效果图，完成www.163.com账号注册页面（不要求做css样式，原生的HTML就好）
使用HTML代码完成效果图,完成www.163.com账号注册页面(不要求做css样式,原生的HTML就好) <!DOCTYPE html> <html><head> ...
使用html，css，javascript进行注册页面的实现
注册页面的实现功能实现一个用户注册页面实现表单校验功能效果图实现步骤 1) 创建Resign.html注册页面核心代码:  <div id=" ...
JavaWeb01_HTML+CSS实现注册页面
Web概念概述 JavaWeb 使用Java语言开发基于互联网的项目软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序,在远程有一个服务器端程序 ...
使用HTML与CSS制作一个简易的华为商城页面和注册页面
话不多说直接上效果图吧商城网页导航栏部分是有下划线滑动效果的本网页的核心就在于此代码都放在下面了好了直接进入到我们的代码部分第一个网页的html部分 <!DOCTYPE html&g ...
HTML+CSS简单应用实例——购物网站的制作（二）注册页面
HTML+CSS简单应用实例--购物网站的制作(二)注册页面接上一篇文章,本片文章是注册页面. 下面是效果图: 分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示.下方为脚本,同 ...

注册页面（CSS）效果图+代码

效果图

代码

注册页面（CSS）效果图+代码相关推荐

最新文章

热门文章