<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

            box-sizing: border-box;

        }

        body {

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

            padding: 30px;

        }

        .BigBox {

            width: 900px;

            height: 500px;

            border: 8px solid #EEEEEE;

            background-color: white;

            /*让div水平居中*/

            margin: auto;

        }

        /*<!--left_layout-->*/

        .left_layout {

            margin: 15px;

            float: left;

        }

        #txt_reg1 {

            color: #FFD026;

            font-size: 20px;

        }

        #txt_reg2 {

            color: #A6A6A6;

            font-size: 22px;

        }

        /*<!--center_layout-->*/

        .center_layout {

            float: left;

            margin: 15px;

        }

        .center_layout table {

            /*合并边框模型*/

            border-collapse: separate;

            /*相邻单元的边框之间的距离*/

            border-spacing: 2px;

            border-color: gray;

        }

        .td_left {

            width: 100px;

            text-align: right;

            height: 45px;

        }

        .td_right {

            padding-left: 50px;

        }

        #username, #password, #email, #name, #tel, #birthday, #verify_code {

            width: 250px;

            height: 32px;

            border: 1px solid #A6A6A6;

            border-radius: 5px;

            padding-left: 10px;

        }

        #verify_code {

            width: 110px;

        }

        #img_verify_code {

            height: 32px;

            /*垂直居中*/

            vertical-align: middle;

        }

        #btn_submit {

            width: 130px;

            height: 40px;

            background-color: #FFD026;

            border: 1px solid #FFD026;

        }

        /*<!--right_layout-->*/

        .right_layout {

            float: right;

            margin: 15px;

        }

        a:link {

            color: pink;

        }

        a:hover {

            color: green;

        }

        a:active {

            color: yellow;

        }

        a:visited {

            color: red;

        }

        .right_layout div {

            float: left;

        }

    </style>

</head>

<body>

<div class="BigBox">

    <!--left_layout-->

    <div class="left_layout">

        <div id="txt_reg1">新用户注册</div>

        <div id="txt_reg2">USER REGISTER</div>

    </div>

    <!--center_layout-->

    <div class="center_layout">

        <!--定义表单 form-->

        <form action="#" method="post">

            <table>

                <tbody>

                <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" checked> 男

                        <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">

                    </td>

                </tr>

                <tr>

                    <td class="td_left">

                        <label for="verify_code">验证码</label>

                    <td class="td_right">

                        <input type="text" name="verify_code" id="verify_code">

                        <img src="img/verify_code.jpg" id="img_verify_code">

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

                        <input type="submit" value="注册" id="btn_submit">

                </tr>

                </tbody>

            </table>

        </form>

    </div>

    <!--right_layout-->

    <div class="right_layout">

        <div>已有账号?</div>

        <div><a href="#">立即登录</a></div>

    </div>

</div>

</body>

</html>

HTML+CSS综合练习的更多相关文章

  1. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  2. CSS综合小练习

    CSS选择器学了不少了,现在来实战一下. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. DIV+CSS综合实例【传智PHP首页】

    1.首页结构 2.准备工作 所有素材放到与当前网页同级的目录下: 网页背景色.背景图: 主页宽度:1000px: 创建CSS文件,将CSS文件引入到当前的HTML文件中. 3.实现 效果图: HTML ...

  4. CSS综合（问题）

    1.为什么我外层div设置height:auto有效果,而位于这个div里面的一个div设置height:auto就没效果啦?      将三个DIV的高度都设置为自动,overflow:auto;, ...

  5. CSS综合用法

    div 居中 {position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -160px;}

  6. CSS综合案例

    代码示例:新闻页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. CSS常用选择器名

    一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...

  8. div+css基础

    Div+css技术 Div是用于存放文字,图片,元素的容器 Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表) Html 文件 <!--必须引入的文件--> ...

  9. 前端 -- CSS基础

    一,CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二,CSS语法 1 ...

随机推荐

  1. Django 中的缓存问题

    Django 中的缓存问题 简单介绍 ​ 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. ​ 当一个网站的用户访问量很大的 ...

  2. 【转】Pandas学习笔记（二）选择数据

    Pandas学习笔记系列: Pandas学习笔记(一)基本介绍 Pandas学习笔记(二)选择数据 Pandas学习笔记(三)修改&添加值 Pandas学习笔记(四)处理丢失值 Pandas学 ...

  3. django 基础进阶ORM 2

    1.多表操作 添加记录: 针对一对多 book_obj=Book.objects.create(title="python葵花宝典",price=100,publishDate=& ...

  4. cordova 一个将web应用程序封装成app的框架

    cordova的详细介绍请参考这个链接:http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建. 1.首先你需要下载几样东西 1.jdk. 2.andr ...

  5. redis常用操作（测试必备）

    连接redis redis的安装及基础配置,参考:https://www.cnblogs.com/UncleYong/p/9882843.html redis中,数据是key-value方式存储,ke ...

  6. opencv获取网络相机的图像-不用sdk

    海康相机 优点:不用sdk直接网络获取 缺点:速度有1-2秒的延迟 使用型号 1280*680分辨路 #include <iostream> #include<opencv2/ope ...

  7. 踩iviewui中Select 选择器两级联动，重置查询条件时第二级数据无法清除的坑

    小颖公司最近做的项目用的vue+iviewui+axios,在做项目的过程中,遇到一个问题: 二级联动的下拉框,第一个下拉框一直都有值,第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值, ...

  8. 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall题解

    题目 二分图最大匹配问题 cow数组标现在牛栏里的牛是几号牛 每次寻找都要清空vis数组 如果可行有两种情况 1.这个牛栏里没有牛 2.这个牛栏里的牛可以到别的牛栏去 根据此递归即可 Code: #i ...

  9. 洛谷 p2055 假期的宿舍 题解

    好长时间没更博客了 因为实在太蒻了 这让本蒟蒻怎么办 今天终于遇到了一道模板题(之前也有,不过太蒻了都不会) 不过...写代码5分钟,调试2小时 分界线:回归正题 这个就是普通的匈牙利算法 差不多 思 ...

  10. hive基础知识四

    1. hive表的数据压缩 1.1 数据的压缩说明 压缩模式评价 可使用以下三种标准对压缩方式进行评价 1.压缩比:压缩比越高,压缩后文件越小,所以压缩比越高越好 2.压缩时间:越快越好 3.已经压缩 ...