<!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. 第一阶段：Java基础 1.JAVA开发介绍---6. Java基本数据类型

    Java 的两大数据类型: 内置数据类型(基本数据类型) 引用数据类型 本数据类型: Java语言提供了八种基本类型.六种数字类型,一种字符类型,还有一种布尔型. byte,short,int,lon ...

  2. 浏览器解析js

    网页加载js步骤 1.浏览器一边下载html网页,一边开始解析(不等下载完就解析)2.遇到<script>标签,暂停解析,网页渲染的控制权交给javascript引擎3.如果<scr ...

  3. css 平行四边形

    平行四边形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Mac安装Java的JDK并进行环境配置

    一.下载JDK 1.直接进入oracle官网下载页: https://www.oracle.com/technetwork/java/javase/downloads/index.html 2.选择版 ...

  5. springboot+MessageSource实现国际化

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

  6. 让window10目录支持大小写

    今天用vmware影响文件夹以供linux系统使用,结果宿主机是win10系统,所以用在linux里,大小写变得不敏感. 解决办法也很简单. 管理员模式运行cmd(默认目录是C:\Windows\Sy ...

  7. 【功能点】php导出excel

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_33862644/article/d ...

  8. angular8中 如何引入两个echarts版本

    下载echarts2和echarts4的源码,然后在index.html中 1.先引入echarts4版本 2.然后引入echarts2版本 并且将echarts2源码中所有echarts 替换为ec ...

  9. eclipse集成lombok插件

    原文:https://my.oschina.net/u/3771868/blog/1837243 lombok官网:https://projectlombok.org/jar包下载路径:https:/ ...

  10. SQL基础篇(MICK)

    SQL基础教程(Mick) 数据库和SQL C:\PostgreSQL\9.5\bin\psql.exe -U postgres -d shop 数据库的基本概念 数据库(DB):将大量数据保存起来, ...