<!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. C# Winform控件字体大小自适应

    using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; namespace WGClie ...

  2. scratch学习研究心得_逐步更新

    2019-10-30: Scratch对对象a克隆,不能选择克隆自己,这样可能下次一下子同时产生两个克隆体,要设置克隆a scratch3.0采用全新html5技术,图片和其他对象放大缩小,效果几乎不 ...

  3. Android 代码混淆、Android Proguard(混淆)

    Android Proguard(混淆)   混淆(Proguard)用法 最近项目中遇到一些混淆相关的问题,由于之前对proguard了解不多,所以每次都是面向Stackoverflow的编程.co ...

  4. vs2019 netocore项目本地程序ip地址访问需修改的配置文件

    IISPress启动项目后,打开IISPress托盘可以看到当前项目 根据图中标识出来的applicationhost.config文件路径,一般为你的项目解决方案目录下的.vs\解决方案文件夹\co ...

  5. 千万不要用window自带文本编辑器编辑配置文件或者代码

    1 引言 用windows自带的text文本在最前面会带入看不到的BOM,导致异常 2 代码 package main import ( "strings" "fmt&q ...

  6. Django--母版

    目录 母版 语法 案例 在之前的两个小程序中,可以发现在写html页面的时候有很多重复的代码 而在python中,为了避免写重复代码,我们通过函数.模块或者类来进行实现,所以在Django里面也有这样 ...

  7. Content-Type属性的取值和作用

    1.Content-Type 的值类型: 1.1 application/json:消息主体是序列化后的 JSON 字符串 1.2 application/x-www-form-urlencoded: ...

  8. JDK安全证书的一个错误消息 No subject alternative names present的解决办法

    我使用Java消费某网站一个Restful API时,遇到这个错误: 21:31:16.383 [main] DEBUG org.springframework.web.client.RestTemp ...

  9. angular8 配置 测试环境打包指令 生成测试环境包指令

    1.angular.json 文件中在architect 下添加 buildTest指令 距离位置 projects => (你的项目名称) => architect 下和 build 指 ...

  10. xshell链接ubuntu16

    用xshell 链接 ubuntu16 失败 ,是因为没有装 ssh 服务 sudo apt-get install openssh-server         //安装ssh服务 ps -ef | ...