简单的Login Form登录页html模板_01

其他 2018-09-13 01:37:32 阅读次数: 0

                                           简单的Login Form登录页html模板_01

jquery-3.3.1.min.js库地址:https://code.jquery.com/jquery-3.3.1.min.js

index.html

<!DOCTYPE HTML>
<html>
<head>
<title>简单的Login Form登录页html模板_01</title>
<link href="css/index.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
   <!-- 表单设计 -->
   <div class="message warning">
      <div class="inset">
         <!--表单顶部设计：文字、布局-->
         <div class="login-head">
             <h1>Login Form</h1>
             <div class="alert-close"> </div>
         </div>
         <!--表单container内容设计-->
         <form>
            <li>
               <input type="text" class="login-form-input" class="text" value="Username" onfocus="doFocus(this)" onblur="doBlur(this)">
               <a href="#" class=" icon user"></a>
            </li>
            <div class="clear"> </div>
            <li>
               <input type="password" class="login-form-input" value="Password" onfocus="doFocus(this)" onblur="doBlur(this)">
               <a href="#" class="icon lock"></a>
            </li>
            <div class="clear"> </div>
            <div class="submit">
               <input type="submit" id="btn-sign-in" value="Sign in">
               <h4><a href="#">Lost your Password ?</a></h4>
               <div class="clear"></div>
            </div>
         </form>
      </div>
   </div>
   <div class="clear"></div>
   <!--- 页脚footer，记录版权info --->
   <div class="footer">
      <p>Copyright &copy; 2018.</p>
   </div>
</body>
</html>

index.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,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
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;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{    vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
.underline{    padding-bottom:5px;    border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{    display:block;}/* vertical menu */
nav.horizontal ul li{  display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*正式开始编辑，设置容器body样式*/
body{
   font-family: 'Droid Sans', sans-serif;
   font-size:100%;
   background: url(../images/body-bg.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
}
 /*表单容器设计*/
.message.warning  {
   background: rgba(255, 255, 255, 0.33);
   -moz-box-shadow: 0 0 0 3px rgba(56, 41, 32, 0.25);
   -webkit-box-shadow: 0 0 0 3px rgba(56, 41, 32, 0.25);
   box-shadow: 0 0 0 3px rgba(56, 41, 32, 0.25);
   margin:9% auto 0;
   width: 26%;
}
.login-head {
   padding: 2em 0;
   background: rgba(52, 60, 235, 0.94);
   position:relative;
}
.login-head h1 {
   color: #fff;
   font-size: 1.5em;
   text-align: left;
   margin: 0 23px;
}
form {
   padding: 3em 2em;
   background: #F2F2F2;
   
}
form li{
   border: 2px ridge rgba(187, 185, 189, 0.11);
   border-radius: 0.3em;
   -webkit-border-radius:0.3em;
   -moz-border-radius:0.3em;
   -o-border-radius:0.3em;
   list-style:none;
   margin-bottom:12px;
   background:#F0EEF0;

}
.icon{
   background:url(../images/icons.png)  no-repeat 0px 0px;
   height:30px;
   width:30px;
   display: block;
   float: right;
   margin: 12px 9px 9px 0px;
}
.user{
   background: url(../images/icons.png) no-repeat 7px 1px;
   
}
.lock{
   background: url(../images/icons.png) no-repeat -22px 1px;
}

input[type="text"], input[type="password"] {
   font-family: 'Droid Sans', sans-serif;
   width:70%;
   padding: 0.5em 2em 0.5em 1em;
   color: #B8B8B8;
   font-size:20px;
   outline: none;
   background: none;
   border:none;
}
input[type="text"]:hover, input[type="password"]:hover{
   color: rgba(52, 60, 235, 0.94);
   
}
.submit h4 a{
   float:left;
   font-size: 16px;
   color: #999;
   font-weight: 400;
   font-family: 'Droid Sans', sans-serif;
   margin-top: 15px;
   margin-left: 21px;
}
.submit h4 a:hover{
   color: rgba(52, 60, 235, 0.94);
}
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/*************************/
.submit{
   padding-top:3em;
}
input[type="submit"] {
   float: left;
   color: #fff;
   cursor: pointer;
   font-weight: 900;
   outline: none;
   font-family: 'Raleway', sans-serif;
   padding: 12px 0px;
   width: 35%;
   font-size: 18px;
   background:rgba(52, 60, 235, 0.94);
   border:2px solid rgba(52, 60, 235, 0.94);
   border-radius: 0.5em;
   -webkit-border-radius:0.5em;
   -moz-border-radius:0.5em;
   -o-border-radius:0.5em;
}
input[type="submit"]:hover {
   background: #fff;
   color:rgba(52, 60, 235, 0.94);
   border:2px solid rgba(52, 60, 235, 0.94);
}
/*----*/
/* footer */
.footer{
   position: absolute;
   bottom: 76px;
   left: 45%;
}
.footer p{
   position:relative;
   font-family: 'Droid Sans', sans-serif;
   color:#fff;
   display: block;
   font-size:1.2em;
   font-weight: 400;
   text-align:center;
   padding-top:2em;
}
.footer p a{
   color:#000;
   transition: all 0.5s ease-out;
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
}
.footer p a:hover{
   color:#fff
}
.message {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4);
   position: relative;
}
.warning {
   text-align: center;
   margin: 14% auto;
   width: 280px;
   background: rgba(82, 97, 97, 0.68);
   border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -o-border-radius: 6px;
}
.alert-close {
   background: url('../images/into.png') no-repeat 0px 3px;
   cursor: pointer;
   height: 30px;
   position: absolute;
   right: 12px;
   top: 34px;
   -webkit-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   transition: color 0.2s ease-in-out;
   width: 30px;
}
/*-----start-responsive-design------*/
@media (max-width:1440px){
.message.warning {
      margin: 11% auto 0;
      width: 30%;
   }
   .footer {
   left: 44%;
   }
}
@media (max-width:1366px){
   .message.warning{
      margin: 7% auto 0;
      width: 35%;
   }
   .footer {
      left: 43%;
      bottom: 5%;
   }
}
@media (max-width:1280px){
   .message.warning {
      margin: 7% auto 0;
      width: 33%;
   }
   .footer {
      left: 43%;
   }
}
@media (max-width:1024px){
   .message.warning{
      margin: 12% auto 0;
      width: 47%;
   }
   .footer {
      left: 41%;
   }
}
@media (max-width:768px){
   .message.warning{
      margin: 13% auto 0;
      width: 65%;
   }
   .footer {
      left: 38%;
      bottom:87px;
   }
}
@media (max-width:640px){
   .message.warning{
      margin: 13% auto 0;
      width: 67%;
   }
   .footer {
      left: 35%;
      bottom:87px;
   }
}
@media (max-width:480px){
   .message.warning  {
      margin: 15% auto 0;
      width:90%;
   }
   .footer {
      left: 33%;
      bottom: 136px;
   }
}
@media (max-width:320px){
   .message.warning  {
      margin:8% auto 0;
      width:90%;
   }
   .login-head {
   padding: 1.45em 0;
   }
   .login-head h1 {
   font-size: 1.15em;
   }
   .icon {
      margin: -33px 9px 9px 0px;
   }
   input[type="text"], input[type="password"] {
      font-size: 16px;
   }
   .alert-close {
   right: 12px;
   top: 22px;
   }
   form {
   padding: 1.5em 1.5em;
   }
   .submit {
   padding-top: 0.4em;
   }
   input[type="submit"] {
      float:none;
   padding: 11px 0px;
   width: 52%;
   font-size: 15px;
   }
   .submit h4 {
      margin-top: 15px;
      margin-bottom: 20px;
   }
   .submit h4 a {
   float: none;
   font-size: 15px;
   }
   .footer {
   left: 22%;
   bottom: 59px;
   }
   
}

index.js

/*index.js简单的Login Form登录页html模板_01。index.html中js（index.js）*/
/*单顶部右侧图标取消功能
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
$(selector).fadeOut(speed,callback)
参数描述:
speed  可选。规定元素从可见到隐藏的速度。默认为 "normal"。
可能的值：
    毫秒 （比如 1500）
    "slow"
    "normal"
    "fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。
callback   可选。fadeOut 函数执行完之后，要执行的函数。
    除非设置了 speed 参数，否则不能设置该参数。
*/
$(function(c) {
    $('.alert-close').on('click', function(c){
        $('.message').fadeOut('slow', function(c){
            $('.message').remove();
        });
    });
});
/*
js中querySelectorAll事件更加详细：https://blog.csdn.net/tel13259437538/article/details/79049191
js中querySelectorAll事件：通过css选择器获取所有a元素，返回一个类数组
*/
var __links = document.querySelectorAll('a');
for(var i = 0, l = __links.length; i < l; i++) {
    if ( __links[i].getAttribute('data-t') == '_blank' ) {
        __links[i].addEventListener('click', __linkClick, false);
    }
}
/* window.postMessage
我们知道：浏览器限制不同窗口之间的通信，除非同一个域名下的网页。
为了解决这一问题，HTML5新出了一个API: window.postMessage, 实现了不同域名的窗口通信。
*/
function __linkClick(e) {
    parent.window.postMessage(this.href, '*');
}
/*登录按钮功能实现*/
$(function () {
    $("#btn-sign-in").click(function () {

    });
});

/*账号密码框--焦点获得、失去事件*/
function  doFocus(e) {
    e.value = '';
}
function  doBlur(e) {
    if(e.value == '') {
        e.value = 'Username';
    }
}

猜你喜欢

转载自blog.csdn.net/qq_31935419/article/details/81356738
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022