HTML制作用户登录界面

1、index代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>login</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    
    <body>
    	
    	<div>
            <div class="bgDiv">
                <div class="login">
                    <img class="logoImg" src="img/qianfeng_03.jpg"/>
                    <div class="username">
                        <img class="userImg" src="img/qianfeng_07.jpg"/>
                        <input class="userInp" type="text" placeholder="请输入用户名"/>
                    </div>
                    <div class="pwd">
                        <img class="pwdImg" src="img/qianfeng_10.jpg"/>
                        <input class="pwdInp" type="password" placeholder="请输入密码"/>
                    </div>
                    <div class="forgetPwd">
                        <img class="pwdImg" src="img/qianfeng_13.jpg"/>
                        <a class="forgetLink" href="#" target="">忘记密码</a>
                    </div>
                    <button class="btn">登录</button>
                </div>
            </div>
        </div>
    </body>
</html>

2、css代码

* {
	padding: 0;
	margin: 0
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

body {
	background: skyblue;
}

.bgDiv {
	width: 547px;
	height: 403px;
	/*background:#3a5eff;*/
	/*border-top:1px solid rgba(0,0,0,0);*/
	overflow: hidden;
}

.login {
	width: 422px;
	height: 339px;
	background: #fff;
	margin-top: 34px;
	margin-left: 50px;
	/*float:left;*/
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.logoImg {
	width: 141px;
	height: 37px;
	margin-top: 32px;
	margin-left: 140px;
	margin-bottom: 8px;
}

.username,
.pwd,
.forgetPwd {
	width: 366px;
	height: 60px;
	border-bottom: 1px solid #efefef;
	margin: 0 28px;
	/*line-height:60px;*/
}

.userImg,
.pwdImg {
	margin-top: 18px;
	float: left;
}

.userInp,
.pwdInp {
	width: 320px;
	height: 25px;
	margin-top: 18px;
	border: none;
	outline: none;
	margin-left: 20px;
}

.forgetPwd {
	border: none;
	line-height: 58px;
	color: #3e82bf;
	font-size: 16px;
}

.forgetLink {
	/*margin-top:-2px;*/
	padding-left: 5px;
}

.btn {
	width: 364px;
	height: 40px;
	background: #4892ff;
	border: 1px solid #326dcc;
	color: #fff;
	font-size: 16px;
	margin-left: 30px;
}

3、效果图

4、总结

注意css是对html界面的修饰，文件名必须一致，比如index.html和index.css，当html有多个重复的结构和属性时，用class和id区分

HTML制作用户登录界面

猜你喜欢