赞
踩
注:如需背景图请联系作者(QQ:3416252112)
效果图:
源码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>科燃门户</title>
<link rel="shortcut icon" href="bitbug_favicon.ico">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
*{
margin: 0px;
padding: 0px;
}
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
background-size: cover;
background-position: center 0;
}
.login{
width: 330px;
height: 400px;
background-image: linear-gradient(25deg, #3e0e90, #4e59aa, #4a99c3, #0adbdc);
opacity: .9;
position: absolute;
/* display: flex; */
/* border: solid 2px white; */
box-shadow:10px 10px 10px rgba(131, 125, 127, .5);
left: 1000px;
top: 150px;
}
.login p{
font-family: '微软雅黑';
font-weight: bold;
color: white;
width: 330px;
height: 70px;
/* background-color: tomato; */
line-height: 70px;
text-align: center;
}
.wel{
margin-top: 20px;
font: 20px bold;
}
.login .inp1{
margin-top: 10px;
height: 50px;
}
.login span{
font-size: 21px;
display: inline-block;
width: 30px;
line-height: 55px;
}
input{
margin-top: -2px;
width: 200px;
height: 30px;
background-color: rgba(192, 221, 240, 0.486);
box-shadow: none;
border: 0px;
color: rgb(148, 144, 144);
}
.zc{
margin-top: -10px;
font-size: 12px;
}
.zc button{
display: inline-block;
width: 60px;
height: 30px;
background-color: rgb(162, 196, 209);
/* border-radius: 15px; */
border: none;
color: rgb(101, 111, 114);
line-height: 30px;
border: 1px solid rgb(39, 235, 218);
}
.zc a{
color: rgb(162, 196, 209);
}
.login .otherLG{
font-size: 15px;
/* color: rgb(189, 138, 231); */
}
.otherLG span{
/* font-size: 15px; */
color: rgb(162, 196, 209);
}
</style>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/2改.png);"></div>
<!--其他代码 ... -->
</div>
<div class="login">
<p class="wel">LOG IN</p>
<p class="inp1">
<span class="iconfont icon-ren"></span>
<input type="text" value=" Username">
</p>
<p class="inp2">
<span class="iconfont icon-icon-mima"></span>
<input type="text" value=" Password">
</p>
<p class="zc"><button class="btn">LOGIN</button>
没有账号? <a href="">点击注册</a></span>
</p>
<p class="otherLG">
其他登录方式:
<span class="iconfont icon-qqfuben"></span>
<span class="iconfont icon-weixin"></span>
<span class="iconfont icon-weibo"></span>
</p>
</div>
</body>
</html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。