<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

<style>

    *{

        margin: 0px;

        padding: 0px;

    }

    body{

        background: url("img/register_bg.png");

    }

    .rg_layout{

        width: 900px;

        height: 500px;

        border: 8px solid #EEEEEE;

        background-color: white;

        margin: auto;

        padding: 15px;

    }

    .rg_left{

        /*border: 1px solid red;*/

        float: left;

    }

    .rg_left > p:first-child{

        color: #FFD026;

        font-size: 20px;

    }

    .rg_left > p:last-child{

        color: #A6A6A6;

        font-size: 20px;

    }

    .rg_center{

        /*border: 1px solid red;*/

        float: left;

        width: 450px;

    }

    .rg_right{

        /*border: 1px solid red;*/

        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,#birthday,#checkcode{

        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_submit{

        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" 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/verify_code.jpg">

                            </td>

                        </tr>

                        <tr>

                            <td colspan="2" align="center"><input type="submit" id="btn_submit" value="注册"></td>

                        </tr>

                    </table>

                </form>

            </div>

        </div>

        <div class="rg_right">

            <p>已有账号?<a href="#">立即登录</a></p>

        </div>

    </div>

</body>

</html>

CSS注册页面案例的更多相关文章

  1. HTML&CSS基础学习笔记1.22-简单的注册页面

    一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...

  2. 微信小程序相关二、css介绍，菜单制作，表单相关，京东注册页面

    一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...

  3. HTML+CSS+JS设计注册页面

    HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...

  4. 07-SSH综合案例：前台用户模块：结构创建及注册页面跳转

    现在就不要直接访问一个JSP,要通过一个Action映射过去.我现在点击要去一个注册的页面 这还不是一个真正的注册,只是一个页面的跳转. 1.5.2 用户模块 注册功能: 在index.jsp页面中点 ...

  5. HTML&CSS——网站注册页面

    1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性:  action,整个表单提交的位置(可以是一个页面,也可以是一个后 ...

  6. 注册页面css版本

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  8. html+css一些简单案例：爱心点击，盒子模型，2d动画

    canvas绘制爱心 效果预览 上代码 <!doctype html> <html> <head> <title>HTML5 Canvas爱心飘动动画特 ...

  9. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

随机推荐

  1. hystrix完成对redis访问的资源隔离

    相对来说,考虑的比较完善的一套方案,分为事前,事中,事后三个层次去思考怎么来应对缓存雪崩的场景 1.事前解决方案 发生缓存雪崩之前,事情之前,怎么去避免redis彻底挂掉 redis本身的高可用性,复 ...

  2. Win 10下安装 Redis

    目录 写在前面 一.安装环境 二.下载windows版本的Redis 三.安装Redis 四.安装服务 五.启动服务 六.测试Redis 七.常用的Redis服务. 写在前面 Redis 是一个开源使 ...

  3. 配置 Log4j 以便查看 MyBatis 操作数据库的过程

    在 src/main/resources中添加 log4j.properties 配置文件 ,输入如下内 容.#全局面已直 log4j .rootLogger=ERROR, stdout #MyBat ...

  4. C# 从注册表判断指定ocx控件是否已注册 以及获取它的注册路径

    /// <summary> /// 注册控件 /// </summary> /// <returns></returns> public bool Re ...

  5. 使用JavaConfig配置SpringMVC

    目录结构 web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi ...

  6. Netty入门系列(1) --使用Netty搭建服务端和客户端

    引言 前面我们介绍了网络一些基本的概念,虽然说这些很难吧,但是至少要做到理解吧.有了之前的基础,我们来正式揭开Netty这神秘的面纱就会简单很多. 服务端 public class PrintServ ...

  7. VC++中双缓冲技术画图

    用双缓冲,先在内存中绘制,然后拷贝到屏幕DC,这样就不会出现画出去的情况了,前段时间我也是为这个问题费了不少劲.我把我的一段代码给你看一下: CDC *pDC = m_drawbox.GetDC(); ...

  8. nano命令

    1. 禁止自动换行 # nano -w xxx 2. 保存 Ctrl+O 3. 退出 Ctrl+X 4. 撤销 在请求确认文件名时按Ctrl+C来取消 5. 剪切 Ctrl+K 移动多行,只需多按几次 ...

  9. springboot+MessageSource实现国际化

    1.springboot自带,不需要引入任何依赖 2.在resource下建立:i18n/messages.properties 3.在application.yml增加以下内容 spring: ap ...

  10. BLAS快速入门

    一.简介 BLAS[Basic Linear Algebra Subprograms,基础线性代数程序集]是一个应用程序接口[API]标准,用于规范发布基础基础线性代数操作的数值库[常用于向量或矩阵计 ...