HTML和CSS做一个简单的注册页面

最新推荐文章于 2022-02-24 21:37:53 发布

功不唐捐（春小喜）

最新推荐文章于 2022-02-24 21:37:53 发布

阅读量2.9k

点赞数 7

分类专栏：前端文章标签： html css html5 java

本文链接：https://blog.csdn.net/qq_45736175/article/details/108027447

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们先来看一下效果图

大致就是背景图片+白色背景的边框

在白色边框里面加元素

我们可以把里面分为三个部分：左边是一段文字、中间是form表单、右边是一段文字

1.先把form表单搞定

简单介绍一下table表格属性：

tr:表示一行

td:表示一个单元格

input属性：

1.1.type：

text：文本

password：密码

email：邮件

radio：单选框

date：日期（包括年月日）

sumit：提交按钮

1.2.name：指定input元素中的名称，这个是必须写的，用于在提交表单时传递属性的值

1.3.value：指定input元素的值，对于radio来说是必须的，指定了radio的值

label属性：label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

为了便于在CSS中操作这些属性，我还在每一个单元格<td>里面设置了class属性，因为由图片可以看出可以分为两类，左边是提示信息，右边是输入框。分别设置为td_left和td_right.

<form>
            <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="pass">密码</label></td>
                    <td class="td_right"><input type="password" name="password" id="pass" 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">性别</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">出生日期</td>
                    <td class="td_right"><input type="date" name="birthday" id="birthday"></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="checkimg" src="../image/verify_code.jpg">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" id="bot_sum" name="submit" value="注册"></td>
                </tr>
            </table>
        </form>

2.总的代码

先来看一下大致的设计图：总共用了四个div，rg_body控制背景边框；rg_left控制左边的段落文字，即“新用户登录”文字；rg_center控制中间的form表单；rg_right控制右边的段落文字，即“已有账号？立即登录”文字

2.1 用body选择器设置一张背景图片并设置为不重复

2.2 设置背景边框 .rg_body

2.3 为rg_left 、 rg_center 、rg_right设置边框并设置float属性，因为同一行有三个，所以前两个设置为left，最后一个设置为right（注意float元素是没有center属性的）并让边框之间的距离合适，如取 margin:15px

2.4 为rg_left rg_right里面的段落（文字）设置具体的属性

2.5 设置rg_center

3.最后要把边框去掉，在这里边框的作用是便于看出各个框架之间的距离关系，也就是把边框的语句注释掉

/*border: 1px solid red;*/

难点：
设置圆角边距的语句是border-radius: 5px;

设置垂直居中 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        /*1.设置背景图片*/
        body{
            background : url("img/register_bg.png") no-repeat;
        }
        /*2.设置框架*/
        .rg_body{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
        /*    让边框整体居中*/
            margin: auto;
        }
        /*3.为rg_left 、 rg_center 、rg_right设置边框 并设置float属性，因为同一行有三个，
        所以前两个设置为left，最后一个设置为right（注意float元素是没有center属性的）
        并让边框之间的距离合适，如取 margin:15px;
*/

        /*4.为rg_left rg_right里面的段落（文字）设置具体的属性*/
        /*设置好后，要把border边框属性给去掉*/
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        /*父级>子级:first-child 表示取第一个子级的内容*/
        /*注意：p和first-child之间为: 不能有任何空格，否则会无法显示里面的属性内容*/
        .rg_left > p:first-child{
            font-size: 20px;
            color:#FFD026;
        }

        .rg_left>p:last-child{
            font-size: 20px;
            color:#A6A6A6;
        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        .rg_right p{
            font-size: 15px;
        }
        .rg_right p a{
            font-size: 15px;
            color: deeppink;
        }

        /*5.设置中间表单的css属性
我们发现，form表单中可以大致分为两列，左边就是名称，要求右对齐，所以我们统一在
下面中设置了class="td_left"  和 class="td_right"
*/
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            margin-top: 40px;
        }
        /*设置所有td_left的属性*/
        .td_left{
            text-align: right;
            width:100px;
            height: 40px;
        }
        /*设置td_right 属性*/
        .td_right{
            padding-left: 20px;
        }

        /*设置所有id属性*/
        #username,#email,#name,#pass,#tel,#checkcode,#birthday{
            /*因为文字框也是一个框架，相对于输入框来说，文字框是一个内边框，这一句的作用是使提示文字不要太靠近左边*/
            padding-left: 18px;
            width: 240px;
            height: 40px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
        }
        #checkcode{
            width: 100px;
        }
        /*设置验证的图片*/
        #checkimg{
            height: 40px;
           /*设置垂直居中*/
            vertical-align: middle;
        }

        /*设置按钮*/
        #bot_sum{
            border: 1px solid gold;
            width: 100px;
            height: 40px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div class="rg_body">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <form>
            <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="pass">密码</label></td>
                    <td class="td_right"><input type="password" name="password" id="pass" 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">性别</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">出生日期</td>
                    <td class="td_right"><input type="date" name="birthday" id="birthday"></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="checkimg" src="../image/verify_code.jpg">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" id="bot_sum" name="submit" value="注册"></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="rg_right"><p>已有账号?&nbsp;<a href="#">立即登录</a></p></div>
</div>
</body>
</html>

注意：p和first-child之间为:不能有任何空格，否则会无法显示里面的属性内容（div>p:first-child）

功不唐捐（春小喜）

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录