Html+Css打造一个精美的注册页面

效果图

代码

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>用户注册</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background-image: url("img/register_bg.png");padding-top: 25px;}.re_div{border: 8px solid #EEEEEE;width: 900px;height: 500px;background-color: white;margin: auto;}.cLeft{float: left;margin: 15px;}#p1{color: #FFD026;font-size: 20px;}#p2{color: #A6A6A6;font-size: 20px;}.cCenter{float: left;}.td_left{width: 100px;height: 50px;text-align: right;color: #A6A6A6;}.td_right{padding-left: 50px;color: #A6A6A6;}#username,#password,#email,#name,#tel,#birthday,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6;/*    设置边框圆角*/border-radius: 10px;padding-left: 10px;}#checkcode{width: 110px;}#cheImg{height: 32px;vertical-align: middle;}#btn_sub{width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;}.cRight{font-size: 15px;margin: 15px;float: right;}.cRight p a{color: pink;}</style>
</head>
<body>
<div class="re_div"><div class="cLeft"><p id="p1">新用户注册</p><p id="p2">USER REGISTER</p></div><div class="cCenter"><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 id="cheImg" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input id="btn_sub" type="submit" value="注册"></td></tr></table></div><div class="cRight"><p id="p3">已有账号？<a href="#">立即登录</a></p></div>
</div>
</body>
</html>

Html+Css打造一个精美的注册页面相关推荐

html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
用 Flutter 写一个精美的登录页面（最新版）
用 Flutter 写一个精美的登录页面(最新版) 主体结构标题输入框登录按钮其他登录方式注册按钮完整源码参考了博客:用flutter写一个精美的登录页面.但是那篇文章是 18 年的,较 ...
一个简单的注册页面制作
一个简单的网页–流水哗啦啦购物平台: 点击注册新用户后,出现的注册页面: 当密码少于八位时出现的提示: 当密码格式不正确时出现的提示: 当年龄格式不正确时出现的提示:(年龄有效格式为1-120之间的数 ...
Css打造一个简单的静态七巧板
偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...
使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
使用HTML与CSS制作一个简易的华为商城页面和注册页面
话不多说直接上效果图吧商城网页导航栏部分是有下划线滑动效果的本网页的核心就在于此代码都放在下面了好了直接进入到我们的代码部分第一个网页的html部分 <!DOCTYPE html&g ...
“数万行代码“教你用html和css编写一个精美的网页
我是歌谣放弃很容易但是坚持一定很酷 1前言作为一名前端开发工程师开发一个完美的网页也是我们的必修课之一逻辑写起来有时候不是那么的难据说页面样式才是最难的一课本文内容纯属自己个人观点欢迎 ...
使用HTML写一个完整的注册页面
在上一篇博客中,我简单地写了怎样通过使用HTML写一个简单的跳转登录页面,but,TMD太丑了,于是突发奇想+天马行空不如写一个完整注册页面和流程,呵呵,不废话直接上代码. 首先是第一个页面testl ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
一个HTML实例:写一个简单的注册页面
<!-- 暂时还没学CSS,只能是用表格进行页面布局,但是实际开发的时候不要这样写,这个题还是挺不错的,能够检验前面所学知识是否牢固,但是对于实际开发的时候不可这样使用做这个网页的时候遇到两个 ...

Html+Css打造一个精美的注册页面

效果图

代码

Html+Css打造一个精美的注册页面相关推荐

最新文章

热门文章