CSS进阶——实现注册界面

最新推荐文章于 2024-04-20 18:03:47 发布

_小柒

最新推荐文章于 2024-04-20 18:03:47 发布

阅读量181

点赞数 1

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46546292/article/details/120470663

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="">
    <style>
        div {
            border: 1px solid gray;
            width: 400px;
            height: 500px;
            background-color: ghostwhite;
            border-radius: 10px;
            padding: 30px 40px 50px 20px;
            /*水平居中*/
            margin: 0 auto;
        }

        /*群组选择器*/
        span, p {
            font-size: 16px;
            color: gray;
        }

        a {
            /*取消下划线*/
            text-decoration: none;
        }

        .ip1 {
            height: 30px;
            width: 341px;
            border-radius: 5px;
            border: 1px solid gray;
            margin-bottom: 20px;
        }

        /*下拉框*/
        .tel1 {
            width: 60px;
            height: 34px;
            border: 1px solid gray;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .tel2 {
            height: 30px;
            width: 276px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        .yzm {
            height: 30px;
            border-radius: 5px;
            border: 1px solid gray;
            width: 240px;
            margin-bottom: 20px;
        }

        .btn {
            height: 34px;
            border-radius: 5px;
            border: 1px solid gray;
            width: 96px;
            background: url("https://img1.baidu.com/it/u=699720230,3927965906&fm=26&fmt=auto") center/96px 34px;
            /*元素顶部对齐*/
            vertical-align: top;
        }

        .btn2 {
            border-radius: 5px;
            border:  none;
            height: 40px;
            margin-top: 20px;
            width: 400px;
            background-color: skyblue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <h2>请注册</h2>
    <p>已有账号
        <a href="#">登录</a>
    </p>
    <form action="" method="post">
        <!--        post 数据不会显示在url地址栏  相对安全-->
        <!--        get  数据显示在url地址栏  相对不安全-->
        <!--        对于用户输入的  要加name-->
        <!--        对于用户选择的  要加value-->
        <label for="user">用户名</label>
        <input type="text" name="users" placeholder="请输入用户名" id="user" class='ip1'> <br>
        <label for="phone">手机号</label>
        <select name="" id="" class="tel1">
            <option value="+86">+86</option>
            <option value="+01">+01</option>
        </select>
        <input type="text" name="phones" placeholder="请输入手机号" id="phone" class="tel2"> <br>
        <label for="pwd">密&emsp;码</label>
        <input type="password" name="pwds" placeholder="请输入密码" id="pwd" class='ip1'> <br>
        <label for="yzm">验证码</label>
        <input type="text" name="pwds" placeholder="请输入验证码" id="yzm" class="yzm">
        <input type="button" value="  " class="btn">
        <br>
        <input type="checkbox" name="isagree" value="isagree">
        <span>阅读并接受协议</span> <br>
        <input type="submit" value="提交" class="btn2">
    </form>
</div>
</body>
</html>

_小柒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS进阶——实现注册界面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=""> <style> div { border: 1px solid gray; wid...
复制链接

扫一扫