html+css美化后台登录界面
httml和css样式编写的,web管理员后台登录界面源码,包含css源码,以及html源码
·
效果展示:
css代码
body {
margin: 0;
padding: 0;
background: #111111;
color: #d9d9d9;
}
.top {
background: #000;
width: 100%;
height: 35px;
color: #17A1FF;
font-size: 18px;
line-height: 35px;
text-align: center;
}
.loginbg {
width: 30%;
background: #000;
margin: 20px 0 0px 0;
border-radius: 30px 30px 30px 30px;
/*background-image: url("http://img.netbian.com/file/2022/0223/010035r3aFr.jpg");*/
/*opacity:0.1;*/
}
.blue {
color: #17A1FF;
font-size: 18px;
line-height: 50px;
}
.user_ico {
background-image: url("http://v.bootstrapmb.com/2021/8/apbk210845 /img/login_ico.png");
background-repeat: no-repeat;
background-position: -125px -34px;
margin: 10px 13px;
position: absolute;
}
.user {
width: 50%;
height: 30px;
border-width: 1px;
border-radius: 20px 20px 20px 20px;
margin: 5px 0 20px 5px;
color: #007DDB;
/*border: rgba(255,255,255,0.2) 2px solid !important;*/
/*background-color:transparent*/
background-color: #d9d9d9;
}
.login {
text-align: center;
font-size: 20px;
line-height: 50px;
width: 50%;
height: 50px;
border-radius: 10px 10px 10px 10px;
margin: 15px 0 20px 55px;
background-color: #007DDB;
color: #FFFFFF;
}
.pic {
margin: 10px auto;
margin: 150px 0 0px 0;
}
img {
/*border-radius: 20px;*/
border-radius: 50%
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理员系统</title>
<link rel="shortcut icon" href="https://mat1.gtimg.com/qqcdn/qqindex2021/favicon.ico"/>
<style type="text/css">
@import "admin.css";
</style>
</head>
<body>
<div class="top">遇见彩虹 吃定彩虹</div>
<div align="center">
<div class="pic">
<img src="https://img2.woyaogexing.com/2022/02/21/5831daf62f54429cbd22c9cd076acd37!400x400.jpeg" width="100" height="100" alt="头像">
</div>
<div class="loginbg">
<p class="blue">管理员登录</p>
账号:
<input class="user" type="text"> <br>
密码:
<input class="user" type="password">
<br>
<!-- <input type="button" class="login" value="登录后台">-->
<div class="login">点击登录</div>
<br>
</div>
</div>
</body>
</html>
更多推荐
已为社区贡献10条内容
所有评论(0)