CSS页面优化构建一个注册页面

最新推荐文章于 2024-05-31 11:20:07 发布

m0_71467744

最新推荐文章于 2024-05-31 11:20:07 发布

阅读量1.7k

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_71467744/article/details/126927279

版权

一、效果图

二、内容分析

1.首先是给整个页面插入一张背景图；在<head></head>标签中写一个<style></style>标签，用body{}选择器插入一张图片设置大小占整个布局的全部，

body {
    background: url("image/register_bg.png") no-repeat;
    background-size: 100%;
    padding-top: 25px;

}

2.在外层div中需要构建一个中间层div，获得中间的一个表格框架

.center-arrow {
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;
    margin: auto;
    margin-top: 40px;
}

需要设置一下其背景颜色为白色，以及边框大小和颜色，设置好后，继续调整一下表格与在整个页面的位置

3.后面就是继续定义内层div写如注册内容，其中内层涉及到了浮动，需要设置整个页面在浮动后大小不变需要设置：box-sizing: border-box;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

4.其余就是根据对应的class或者id设置字体大小、颜色以及位置

三、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body {
            background: url("image/register_bg.png") no-repeat;
            background-size: 100%;
            padding-top: 25px;

        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .center-arrow {
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
            margin-top: 40px;
        }

        .right-arrow {
            float: right;
            margin: 15px;
        }
        .center-arrow_1{
            float: left;
            margin-top: 45px;
            margin-left: 130px;
        }
        .left-arrow{
            float: left;
        }
        .p1{
            color: gold;
            font-size: 30px;
        }
        .p2{
            font-size: 20px;
        }
        .p3{
            text-align: right;
            line-height: 50px;
            font-size: 20px;
        }
        .p4{
            padding-left: 20px;
        }
        #username,#tel,#yzm,#password,#email,#birthday{
            width: 200px;
            height: 30px;
            border-radius: 5px;
            padding-left: 10px;
        }
        #btn_sub{
            width: 100px;
            margin-top: 15px;
            background-color: darkorange;
        }
    </style>
</head>
<body>
<div class="arrow_1">
    <div class="center-arrow">
        <div class="left-arrow">
            <p class="p1">新用户注册</p>
            <p class="p2">USER REGISTER</p>
        </div>
        <div class="center-arrow_1">
            <form action="#" method="post">
                <table>
                    <tr>
                        <td align="center" class="p3"><label for="username">用户名:</label></td>
                        <td class="p4">
                            <input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td align="center" class="p3">
                            <label for="tel">手机号码:</label>
                        </td><td class="p4">
                            <input type="tel" name="tel" id="tel" placeholder="请输入手机号码"><br>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" class="p3">
                            <label>性&nbsp&nbsp别</label></td><td class="p4">
                            <input type="radio" name="gender" value="male">男&nbsp&nbsp&nbsp&nbsp
                            <input type="radio" name="gender" value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td align="center" class="p3">
                            <label for="yzm"> 验证码:</label></td><td class="p4">
                            <input type="text" name="yzm" id="yzm" placeholder="请输入验证码">
                        </td>
                        <td class="p4">
                            <a href="image/verify_code.jpg">获取验证码</a><br>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" class="p3">
                            <label for="password">密&nbsp&nbsp码:</label></td><td class="p4">
                            <input type="password" name="password" id="password" placeholder="请输入密码"><br>
                        </td>
                    </tr>
                    <tr>
                        <td class="p3">
                            <label for="birthday">出生日期:</label></td><td class="p4">
                            <input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
                        </td>
                    </tr>
                    <tr>
                        <td class="p3">
                            <label for="email">邮&nbsp&nbsp箱:</label></td><td class="p4">
                            <input type="email" name="email" id="email" placeholder="请输入邮箱">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2">
                            <input type="submit" value="注&nbsp&nbsp册" id="btn_sub">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="right-arrow">
            <p>已有账号?<a href="#">立即登录</a></p>
        </div>
    </div>
</div>
</body>
</html>

m0_71467744

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
CSS页面优化构建一个注册页面

1.首先是给整个页面插入一张背景图；在标签中写一个标签，用body{}选择器插入一张图片设置大小占整个布局的全部，3.后面就是继续定义内层div写如注册内容，其中内层涉及到了浮动，需要设置整个页面在浮动后大小不变需要设置：box-sizing: border-box;需要设置一下其背景颜色为白色，以及边框大小和颜色，设置好后，继续调整一下表格与在整个页面的位置。4.其余就是根据对应的class或者id设置字体大小、颜色以及位置。
复制链接

扫一扫