仿注册页面

最新推荐文章于 2024-04-30 06:57:00 发布

虎头feng

最新推荐文章于 2024-04-30 06:57:00 发布

阅读量178

点赞数

分类专栏：案例训练文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_50266823/article/details/108280704

版权

案例训练专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
        }
        .box {
            width: 625px;
            height: 742px;
            background-color: skyblue;
            margin: 65px auto;
        }
        .box img {
            float: right;
        }
        .box h4 {
            color: #0b307e;
            font-size: 24px;
            text-align: center;
            line-height: 24px;
            font-weight: 400;   
            padding-top: 64px;
            padding-bottom: 53px;
        }
        .box h4 span {
            display: inline-block;
            width: 200px;
            height: 4px;
            margin: 8px 30px;
            background-color: #fff;

        }
        .box input {
            width: 570px;
            height: 53px;
            color: #9b9b9b;
            font-size: 24px;
            text-indent: 20px;
            margin: 0 24px 29px 31px;
        }
        .box .class1 {
            width: 332px;
            margin-right: 13px;
        }
        .box button {
            color: #fff;
            background-color: #0b307e;
        }
        .box .btn1 {
            width: 220px;
            height: 53px;
            font-size: 24px;
            margin-right: 24px;
        }
        .box .btn2 {
            width: 570px;
            height: 61px;
            font-size: 30px;
            margin: 0 24px 29px 31px;
        }
        .box p {
            font-size: 15px;
            margin-left: 31px;
            color: #98a2ba;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/pc_edit_info_close.png" alt="">
        <h4><span></span>填写资料<span></span></h4>
        <input type="text" value="请输入姓名"> <br>
        <input type="text" value="请输入电话"> <br>
        <input type="text" value="请输入图像验证码" class="class1"> <br>
        <input type="text" value="请输入手机验证码" class="class1"> <button class="btn1">获得验证码</button><br>
        <input type="text" value="请输入邮箱(选填)"> <br>
        <input type="text" value="备注(选填)"> <br>
        <button class="btn2">立即申请</button>
        <p>申请成功后，我们会跟您联络。如有任何疑问，请联系400-1118-110</p>
    </div>
</body>
</html>

在这里插入图片描述