简易的后台登录界面

在这个给大家制作一个简易的后台登录界面，他使用到了：HTML，CSS,JS相关的知识，实现的大致功能就是：账户和密码不能为空，才能够登录（实现的功能比较简易，所以在点击登录之后我们就进入到百度中）

实现过程

HTML代码部分：

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <--导入html" title=css>css文件样式-->
    <link rel="stylesheet" href="html" title=css>css/boke.html" title=css>css">

</head>
<body>
<!--主体-->
<div class="total">
    <!--登录-->
    <div class="login">
        <!--文字-->
        <div class="title">
            登录后台系统
        </div>

        <!--用户-->
        <form action="http://www.baidu.com" onsubmit="return logn(this)">
        <div class="user">
            <!--图标-->
            <div class="picture-u">
                <img src="img/用户_wps图片.png" height="32" width="32"/>
            </div>
            <div class="font-u">
                <input type="text" class="text-u" name="uname">
            </div>
        </div>

        <!--密码-->
        <div class="pwd">
            <div class="picture-p">
                <img src="img/密码_wps图片.png" height="32" width="32"/>
            </div>
            <div class="font-p">
                <input type="password" class="text-p" name="pwd">
            </div>
        </div>

        <div class="log">
                <button class="butt">登录</button>
        </div>
        </form>
    </div>

</div>
</body>
</html>

CSS代码部分：

html">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

/*主体*/
.total{
    position: relative;
    width: 100%;
    height: 750px;
    background: black;
    background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3488564163,1833081122&fm=26&gp=0.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/*登录*/
.login{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -170px;
    width: 600px;
    height: 340px;
    background: rgba(136,184,242,0.1);
    border: 1px solid black;
}

.title{
    padding-top: 40px;
    width: 100%;
    height: 100px;
    font-family: "华文行楷";
    font-size: 3em;
    text-align: center;
    background: yellow;
}

.user,
.pwd{
    position: relative;
    margin: 0 auto;
    margin-top: 15px;
    width: 400px;
    height: 50px;
    line-height: 50px;
    /*background: yellow;*/
}
.picture-u,
.picture-p{
    position: absolute;
    padding-left: 9px;
    top: 10px;
    width: 50px;
    height: 32px;
    background: rgb(238,238,238);
}

.text-u{
    position: absolute;
    padding-left: 20px;
    top: 10px;
    margin-left: 50px;
    width: 314px;
    height: 32px;
    background: white;
    border-style: none;
}
.text-p{
    position: absolute;
    padding-left: 20px;
    top: 10px;
    left: 50px;
    width: 314px;
    height: 32px;
    background: white;
    border-style: none;
}
.log{
    position: absolute;
    left: 99px;
    margin: 0 auto;
    margin-top: 20px;
    width: 364px;
    height: 32px;
}
.butt{
    width: 364px;
    height: 32px;
    background: green;
    border-style: none;
}

js代码部分：

html"><script>
    function logn(data) {
        var name = data.uname.value;
        var pwd = data.pwd.value;
        if (name.length<1||pwd.length<1){
            alert('请输入正确的用户名和密码')
            return false;
        } else{
            alert('登录成功！')
        }
    }
</script>