用HTML制作一个注册界面

最新推荐文章于 2024-06-16 23:02:16 发布

qq_43614355

最新推荐文章于 2024-06-16 23:02:16 发布

阅读量2.1w

点赞数 15

分类专栏：例题

本文链接：https://blog.csdn.net/qq_43614355/article/details/88957341

版权

例题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.制作如下图的注册界面要求如下：
体大小均为14px，灰色文字#999，验证码灰色背景#eee，注册按钮为红色背景#e3393c，注册按钮圆角6px
在这里插入图片描述
思路分析，根据图片的信息，本题的格式可以看做是一个3X5的表格形式，因此可以用表格的形式进行解答；另外还可以用页面流里的float现将第一行信息转换出来，然后在利用clear让元素主动向下移动，从而达到换行的目的（需要在div标签中选择合适的选择器），在换行完成后要设置每一列的长度；在第五行中的获取验证码出表单比其他的要短，这时需要手动设置表单的长度，最后要对全部文字进行格式设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .line>div{    # 运用后代选择器筛选出符合条件的标签
            float: left;    # 所有标签内容转换成一行
        }
        .line,.register{   #运用并集选择器
            clear: both;  # 将需要换行处换行
        }
        .tt{    # 设置每一行的长度；正常网页的长度都是1000px
            width: 1000px;
            height: 25px;
        }
        .div1{    # 设置第一列的长度；此处根据实际情况选择，高度同理
            width: 200px;
            height: 25px;
        }
        .div2{
            width: 300px;
            height: 25px;
        }
        *{  # 整个文件的信息进行格式设置
            font-size: 14px;
            color: #999;
        }
        span{
            background: #eee;
        }
        .register{
            border: 1px solid #f00;
            position: relative;  # 此处需要熟练使用position的相对位置和绝对位置
            top: 1px;		# 相对位置的数据设置
            left: 200px;
            background: #e3393c;  #设置背景颜色、长度、宽度
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;  # 设置居中模式
            border-radius: 6px;  # 设置圆角值
            font-size: 16px;
            color: white;
        }
    </style>
</head>
<body>
<div class="tt">
    <div class="line">
        <div class="div1">用户名:</div>
        <div class="div2"><input type="text"></div>
        <div class="div3">4-20位字符，不支持汉字，支持字母和数字组合</div>

    </div>
    <div class="line">
        <div class="div1">请设置密码:</div>
        <div class="div2"><input type="text"></div>
        <div class="div3">6-20位字符，不支持汉字，支持字母和数字组合</div>
    </div>
    <div class="line">
        <div class="div1">请确认密码:</div>
        <div class="div2"><input type="text"></div>
        <div class="div3">请再次输入密码</div>
    </div>
    <div class="line">
        <div class="div1">验证手机:</div>
        <div class="div2"><input type="text"></div>
        <div class="div3">完成设置后可以用手机找回密码</div>
    </div>
    <div class="line">
        <div class="div1">短信验证码:</div>
        <div class="div2"><input type="text"style="width: 100px"><input type="button" value="获取验证码"></input></div>   # 灵活运用button按钮
        <div class="div3">请输入短信验证码 </div>
    </div>
    <div class="register">
         立即注册
    </div>
</div>
</body>
</html>

qq_43614355

关注

15
点赞
踩
91

收藏

觉得还不错? 一键收藏
1
评论
用HTML制作一个注册界面

1.制作如下图的注册界面要求如下：体大小均为14px，灰色文字#999，验证码灰色背景#eee，注册按钮为红色背景#e3393c，注册按钮圆角6px思路分析，根据图片的信息，本题的格式可以看做是一个3X5的表格形式，因此可以用表格的形式进行解答；另外还可以用页面流里的float现将第一行信息转换出来，然后在利用clear让元素主动向下移动，从而达到换行的目的（需要在div标签中选择合适的选择...
复制链接

扫一扫