用户登录界面

新手小白一枚，刚接触编程不久，写一个简单地用户登录界面

1、页面布局

主体部分

<div class="login_box">
        <h2>用&nbsp;户&nbsp;登&nbsp;录</h2>

        <div class="login_name">
            <span class="login_icon">
                <input type="text" name="text" placeholder="请输入姓名">
            </span>
        </div>

        <div class="login_pwd">
            <span class="login_icon1">
                <input type="password" name="pwd">
            </span>
        </div>

        <div class="button">
            <a href="">登录</a>
        </div>
        
        <div class="reg">
            <a href="">注册账号？</a>
        </div>
    </div>

CSS部分

        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background-image: url(bg.jpg);
            background-size: cover;
        }

        .login_box {
            width: 480px;
            height: 400px;
            background-image: linear-gradient(to right, #696969, #778899, #778899);
            margin: 200px auto;
            border-radius: 5%;
        }

        h2 {
            text-align: center;
            padding-top: 30px;
            color: rgb(214, 210, 210);
            font-weight: normal;
        }

        .login_icon input {
            width: 350px;
            height: 50px;
            margin-left: 50px;
            margin-top: 30px;
            border-radius: 10px 10px;
        }

        .login_icon1 input {
            width: 350px;
            height: 50px;
            margin-left: 50px;
            margin-top: 30px;
            border-radius: 10px 10px;
        }

        .button {
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: lightblue;
            margin: 50px auto;
            border-radius: 10px 10px;
        }

        .button:hover {
            background-color: aqua;

        }

        .button a {
            color: #333;
            text-decoration: none;
        }

        .button a:hover {
            color: bisque;
        }

        .reg {
            color: #4c4b4b;
            font-size: 13px;
            margin-left: 20px;
        }
    </style>

2、实现效果

效果图界面有点单调，但总算是独立的完成了一个登录界面，希望各位前端大神多多指点，我也会继续努力加以改进。