<!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. ER图VISIO 引入Mysql 反向工程

    1. 先到MySQL官方站点下载 MySQL Connector/ODBC 5.1并安装.下载地址为http://dev.mysql.com/downloads/connector/odbc/5.1. ...

  2. JQuery EasyUI Tree组件的Bug记录

    记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜  - _-(bug)..... bug ::   .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...

  3. winform+cefSharp实现窗体加载浏览器

    1:新建winform项目 2:安装cefSharp 3:配置管理器更改为X86 4:添加引用 using CefSharp; using CefSharp.WinForms; 5:项目启动,打开网页 ...

  4. ssh in depth

    前两天写了一篇关于ssh的相对比较入门的文章,重点介绍了ssh在免密登录场景下的应用. 本文试图对ssh更高级的话题做一下探讨,重点探讨一下ssh tunneling https://www.ssh. ...

  5. Java自学-类和对象 枚举类型

    枚举类型 步骤 1 : 预先定义的常量 枚举enum是一种特殊的类(还是类),使用枚举可以很方便的定义常量 比如设计一个枚举类型 季节,里面有4种常量 public enum Season { SPR ...

  6. MTSC 2019 深圳站精彩议题第一波更新！ | 七五折门票火热售票中

      MTSC(中国移动互联网测试开发大会)到今年已经成功举办了五届,这四年里,TesterHome社区一直秉持着务实.能落地.有深度.高质量.重分享的原则,从讲师邀请到内容筛选都严格把控,只为将最能提 ...

  7. 【转载】C#中SqlCommand类的作用以及常用方法

    在C#的数据库操作过程中,SqlCommand类一般用于Sqlserver数据库的SQL语句的执行,包括Select语句.Update语句.Delete语句以及SQL存储过程等,SqlCommand的 ...

  8. 上传文件至Github仓库

    Github的使用 创建一个本地的版本库(也就是一个文件夹) 新建文件夹,或使用Git bash命令行窗口创建 $ mkdir test $ cd test 在命令行中输入 git init把这个文件 ...

  9. Nginx学习（二）

    ------------恢复内容开始------------ Nginx配置文件 主配置文件结构:四部分 main block:主配置段,既全局配置段,对Http,mail都有效 event{ }事件 ...

  10. JAVA Coder 的《深入分析Java Web 技术内幕》读书笔记

    本文基于<深入分析Java Web 技术内幕> <深入分析Java Web 技术内幕>,作者是 许令波,电子工业出版社.本文只是记录书本当中的精彩部分,作个人回顾和技术分享,请 ...