html后台登录界⾯⽹页设计界⾯⼀款简单的html后台登录界⾯⽹页设计界⾯带给⼤家。
效果图：
html代码：
<!DOCTYPE html>
<html>
<head>
<title>某某公司后台登录系统</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="order by dede58"/>
<meta name="keywords" content="Simple Login Form Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up We b Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Sams ung, LG, Sony Ericsson, Motorola Web Design"/>
<script type="application/x-javascript">addEventListener("load",function(){setTimeout(hideURLbar,0);},false);function hideURLbar(){ window.scrollTo (0,1);}</script>
</head>
<body>
<h1>某某公司后台登录系统</h1>
<div class="container w3">
<h2>现在登录</h2>
<form action="#" method="post">
<div class="username">
<span class="username" >⽤户:</span>
<input type="text" name="name"class="name" placeholder="" required>
<div class="clear"></div>
</div>
<div class="password-agileits">
<span class="username">密码:</span>
<input type="password" name="password"class="password" placeholder="" required>
<div class="clear"></div>
</div>
<div class="rem-for-agile">
<input type="checkbox" name="remember"class="remember">记得我
<br>
<a href="#">忘记了密码</a><br>
</div>
<div class="login-w3">
<input type="submit"class="login" value="Login">
</div>
<div class="clear"></div>
</form>
</div>
<div class="footer-w3l">
<p>某某公司后台登录系统</p>
</div>
</body>
</html>
图⽚素材：
css样式-style.css
、
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small, strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,f igure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inhe rit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
.txt-rt{text-align:right;}
.txt-lt{text-align:left;}
.txt-center{text-align:center;}
.float-rt{float:right;}
.float-lt{float:left;}
.clear{clear:both;}
.pos-relative{position:relative;}
.pos-absolute{position:absolute;}
.vertical-base{vertical-align:baseline;}
.vertical-top{vertical-align:top;}
nav.vertical ul li{display:block;}
nav.horizontal ul li{display: inline-block;}
img{max-width:100%;}
body {
background:url('../images/1.jpg') no-repeat 0px 0px;
background-size: cover;国内优秀网页界面赏析
font-family:'Open Sans', sans-serif;
background-attachment: fixed;
background-attachment: fixed;
background-position: center;
}
body a {
transition:0.5s all;
-
webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
h1 {
color:#FFF;
text-align: center;
letter-spacing:6px;
font-size:40px;
margin-top:75px;
}
.container {
width:32%;
margin:50px auto;
text-align: center;
background:rgba(0,0,0,0.43);
-webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);
}
h2 {
font-size:30px;
color:#FFF;
padding-top:45px;
letter-spacing:3px;
}
form {
padding:65px;
}
form span {
width:23%;
float: left;
background:#fed14e;
padding:10.2px 10px;
position: relative;
color:#005377;
font-size:15px;
letter-spacing:1px;
}
form span:after {
content:'';
position: absolute;
width:0;
height:0;
right:-11px;
border-top:6px solid rgba(0,0,0,0);
border-left:11px solid #fed14e;
border-bottom:6px solid rgba(0,0,0,0);
top:14px;
}
input.name {
width:65%;
padding:10px 10px 10px 15px;
border: none;
border: none;
outline: none;
font-size:17px;
letter-spacing:1px;
margin-bottom:35px;
float:left;
}
input.password {
width:65%;
padding:10px 10px 10px 15px; border: none;
outline: none;
font-size:17px;
letter-spacing:1px;
margin-bottom:35px;
float:left;
}
.rem-for-agile{
width:50%;
float:left;
text-align:left;
font-size:13px;
color:rgb(238,223,179);
}
.rem-for-agile a{
color:rgb(238,223,179);
margin-top:3px;
display:inline-block;
padding-left:18px;
}
.rem-for-agile a:hover{
color:#fff;
}
input[type="checkbox"]{
margin:10px 5px 0px 0px; vertical-align: sub;
}
.
login-w3{
width:50%;
float:right;
}
input[type="submit"]{
background-color:#005377;
color:#fff;
padding:11px;
outline: none;
border:none;
font-size:17px;
width:50%;
cursor:pointer;
margin-top:5px;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
input[type="submit"]:hover{
background:#fed14e;
color:#000;
}
.footer-w3l{
margin-top:150px;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论