admin管理员组文章数量:1559083
注:如需背景图请联系作者(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 inp>
<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">loginbutton>
没有账号? <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>
本文标签: 网页
j9九游会老哥俱乐部交流区的版权声明:本文标题:前端制作科技感网页登录界面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727387441a1112419.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论