效果展示：
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("/file//0223/010035r3aFr.jpg");*//*opacity:0.1;*/}.blue {color: #17A1FF;font-size: 18px;line-height: 50px;}.user_ico {background-image: url("//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="/qqcdn/qqindex/favicon.ico"/><style type="text/css">@import "admin.css";</style></head><body><div class="top">遇见彩虹 吃定彩虹</div><div align="center"><div class="pic"><img src="//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>
