<!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. VSCode 命令

    淘宝 NPM 镜像     https://npm.taobao.org/ Ctrl+~   显示终端 npm start    启动项目 cnpm install   安装模块

  2. Echarts 学习系列(1)-5分钟上手ECharts

    目录 写在前面 下载Echarts和主题 绘制一个简单的图表 写在前面 最近,在做某个项目的时候.需要使用的可视化的图表显数据.最后,选择了百度的Echarts. 下载Echarts和主题 1.获取E ...

  3. 第四周（1）：数据分布-Python实战

    数据准备 数据集地址:http://jse.amstat.org/datasets/normtemp.dat.txt 数据集描述:总共只有三列:体温.性别.心率 数据集详细描述:Journal of ...

  4. 2019-07-29 ThinkPHP简单的增删改查

    在model里面,建立表名Model.class.php的控制器,用以连接数据表,代码如下 namespace Home\Model; use Think\Model; class NewsModel ...

  5. Computer Networking: A Top Down Approach

    目录 Chapter 1: Computer Networks and the Internet 1. What is the Internet? 2. The Network Edge 3. The ...

  6. jsonserver的安装及启动

    JsonServer 主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用 是一个 Node 模块,运行 Express 服务器,可以指定一个 json 文件作为 api 的数据源 官网: ...

  7. android 连接wifi案例

    1.xml布局文件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...

  8. Shell 选择排序

    举例 #!/bin/bash echo "please input a number list:" read -a arrs for((i=0;i<${#arrs[@]};i ...

  9. springboot-发布jar包

    其他参考链接: https://www.cnblogs.com/blog5277/p/5920560.html 环境变量配置: 新建系统变量MAVEN_HOME: 在path中添加: ;%MAVEN_ ...

  10. python之提升程序性能的解决方案

    Python在性能方面不卓越,但是使用一些小技巧,可以提高Python程序的性能,避免不必要的资源浪费. 1. 使用局部变量 尽可能使用局部变量替代全局变量,可以是程序易于维护并且有助于提高性能节约成 ...