【无标题】

最新推荐文章于 2024-08-22 16:43:17 发布

qwe海棠朵朵

最新推荐文章于 2024-08-22 16:43:17 发布

阅读量358

点赞数 2

分类专栏：学习记录文章标签： html css

本文链接：https://blog.csdn.net/m0_62745759/article/details/124111481

版权

学习记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用html+css写一个简单的登录页面

代码如下，拿走不谢~目前只是一个静态的页面，技术加强了再好好完善哈。
力拔山兮气盖世，加油！
这个是效果图：（祝大家学得开心~）
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单2</title>
    <style>
        div {
            margin: auto;                                            
            width: 400px;
            height: 450px;
            border: 1px solid gray;
            border-radius: 20px;
            background-color: #e1e5ee5e;
            padding: 0 20px;
            /* 选择div中的任何一个文字都没有效果 */
            user-select: none;
        }

        /* 群组选择器 */
        p.label1 {
            font-size: 14px;
            color: gray;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

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

        .sel1 {
            width: 50px;
            height: 34px;
            border-radius: 5px;
            border: 1px solid skyblue;
        }

        .ipt2 {
            width: 286px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid skyblue;
            margin-bottom: 20px;
        }

        .ipt3 {
            width: 253px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid skyblue;
            margin-bottom: 20px;
        }

        .btn {
            width: 83px;
            height: 34px;
            border-radius: 5px;
            border: 1px solid skyblue;
            background: url(images/666.jpg) center/83px 30px;
            vertical-align: middle;
        }

        .sub {
            width: 400px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid skyblue;
            background-color: #92caf1;
            margin-top: 20px;
            color: white;
            letter-spacing: 10px;
            /* 将鼠标箭头键盘小手图标 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <h2>请注册</h2>
        <p>已有账号？
            <a href="baidu.com">登录</a>
        </p>
        <form action="#" method="post">
            <label for="user">用户名</label>
            <input type="text" placeholder="请输入用户名" name="user" id="user" class="ipt1"><br>

            
            <label for="phone">手机号</label>
            <select name="phone" id="phone" class="sel1">
                <option value="+86">+86</option>
                <option value="+87">+87</option>
                <option value="+88">+88</option>
            </select>
            <input type="text" placeholder="请输入手机号" name="phone" id="phone" class="ipt2"><br><!---placeholder是灰色字体，起提示作用的。--->


            <label for="pwd">密&emsp;码</label>
            <input type="password" placeholder="请输入密码" name="pwd" id="pwd" class="ipt1"><br>

            
            <label for="code">验证码</label>
            <input type="text" placeholder="请输入验证码" name="code" id="code" class="ipt3">
    
            <input type="button" class="btn"><br>


            <input type="checkbox" name="isAgree" id="isAgree" style="vertical-align: middle;">
            <label for="isAgree" class="label1">阅读并接受协议</label><br>


            <input type="submit" value="注册" class="sub">
        </form>
    </div>
    
</body>
</html>

qwe海棠朵朵

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
【无标题】

用html+css写一个简单的登录页面代码如下，拿走不谢~目前只是一个静态的页面，技术加强了再好好完善哈。力拔山兮气盖世，加油！这个是效果图：（祝大家学得开心~）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
复制链接

扫一扫