JSDM

HTML

5
1
<div class="container animated fadeInLeft container-sm" id="loginContainer">
2
        <input type="text" tabindex="1" autofocus autofocus="true" value="" placeholder="Email Address" name="loginEmail" class="top form-control"/>
3
        <input type="password" tabindex="2" placeholder="Password" name="loginPassword" class="bottom form-control"/>
4
        <button id="loginProcessBtn" class="btn btn-block framewire-yellow-btn">Login</button>
5
</div>

CSS

​x
 
1
input:focus { outline: none; }
2
.loginBody {
3
    background-color: #cd4d4e;
4
}
5
    .loginBody body {
6
      background-color: #cd4d4e;
7
      font-family: "open sans";
8
      font-weight:300;
9
    }
10
    .loginBody h1 {
11
        text-align: center;
12
        font-size: 32px;
13
        font-weight: 700;
14
        color: #FFF;
15
        text-shadow: 0px -1px 1px 0px rgb(156,58,59);
16
        letter-spacing: -2px;
17
        margin: 40px 0px 10px 0px;
18
        padding: 0px;
19
    }
20
    .loginBody h2 {
21
        text-align: center;
22
        font-size: 24px;
23
        font-weight: 300 !important;
24
        color: #FFF;
25
        text-shadow: 0px -1px 1px 0px rgb(156,58,59);
26
        letter-spacing: -1px;
27
        margin: 0px 0px 10px 0px;
28
        padding: 0px;
29
    }
30
    .loginBody .footerCopyright {
31
        color: #6f2c2d !important;
32
    }
33
    .loginBody #itsoklist {
34
        text-align: center;
35
        margin: 50px 0px 20px 0px;
36
        padding: 0px;
37
        color: #FFF;
38
    }
39
    .loginBody #itsoklist a {
40
        color: #FFF;
41
        text-decoration: none;
42
    }
43
    .loginBody #loginContainer {
44
        background: rgb(156,58,59); /* fallback color */
45
        background: rgba(156,58,59, 0.5);
46
        border-radius: 4px;
47
        box-shadow: inset 0px 0px 3px #9C3A3B;
48
        box-shadow: 0 1px 1px 0px rgba(255,255,255,0.3);
49
        padding: 20px;
50
        margin-top: 50px;
51
    }
52
    .loginBody #loginContainer:after {
53
        bottom: 100%;
54
        left: 50%;
55
        border: solid transparent;
56
        content: " ";
57
        height: 0;
58
        width: 0;
59
        opacity: 0.5;
60
        position: absolute;
61
        pointer-events: none;
62
        border-color: rgba(136, 183, 213, 0);
63
        border-bottom-color: #9C3A3B;
64
        box-shadow: inset 0px 0px 3px #9C3A3B;
65
        border-width: 15px;
66
        margin-left: -15px;
67
    }
68
    .loginBody #loginContainer .form-control {
69
        box-shadow: none !important;
70
        outline: none !important;
71
    }
72
    .loginBody #loginContainer .form-control.top {
73
        border-radius: 4px 4px 0px 0px;
74
        margin: 0px;
75
        border-bottom: 0px !important;
76
    }
77
    .loginBody #loginContainer .form-control.mid {
78
        border-radius: 0px;
79
        margin: 0px;
80
        border-bottom: 0px !important;
81
    }
82
    .loginBody #loginContainer .form-control.bottom {
83
        border-radius: 0px 0px 4px 4px;
84
        margin: 0px 0px 10px 0px;
85
    }
86
.container-sm {
87
    width: 300px;
88
}
89
.framewire-yellow-btn  {
90
     color:  #ffffff;
91
     font-weight: 700;
92
     text-shadow: 1px 1px 2px #A96F00;
93
     background-color:  #FEB41C;
94
     background-image:  -moz-linear-gradient(top,  #ffd23a,  #e09600);
95
     background-image:  -ms-linear-gradient(top,  #ffd23a,  #e09600);
96
     background-image:  -webkit-gradient(linear,  0 0,  0 100%,  from(#ffd23a),  to(#e09600));
97
     background-image:  -webkit-linear-gradient(top,  #ffd23a,  #e09600);
98
     background-image:  -o-linear-gradient(top,  #ffd23a,  #e09600);
99
     background-image:  linear-gradient(top,  #ffd23a,  #e09600);
100
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd23a',  endColorstr='#e09600',  GradientType=0);
101
     border-color:  #FEB41C #e09600 #e09600 #FEB41C;
102
     border-color:  rgba(0,  0,  0,  0.25) rgba(0,  0,  0,  0.35) rgba(0,  0,  0,  0.35) rgba(0,  0,  0,  0.25);
103
 }
104
​
105
.framewire-yellow-btn:hover,  .framewire-yellow-btn:active,  .framewire-yellow-btn.active,  .framewire-yellow-btn.disabled,  .framewire-yellow-btn[disabled]  {
106
     background-color:  #e09600;
107
 }
108
​
109
.framewire-yellow-btn:hover  {
110
     color:  #ffffe4;
111
     text-shadow:  0px -1px 0px #c27800;
112
 }
113
​
114
.framewire-yellow-btn:focus  {
115
     color:  #ffff80;
116
     -webkit-box-shadow:  inset 0 2px 4px rgba(0,  0,  0,  0.15),  0 1px 2px rgba(0,  0,  0,  0.05);
117
     -moz-box-shadow:  inset 0 2px 4px rgba(0,  0,  0,  0.15),  0 1px 2px rgba(0,  0,  0,  0.05);
118
     box-shadow:  inset 0 2px 4px rgba(0,  0,  0,  0.15),  0 1px 2px rgba(0,  0,  0,  0.05);
119
     border-color:  #FEB41C #e09600 #e09600 #FEB41C;
120
     border-color:  rgba(0,  0,  0,  0.25) rgba(0,  0,  0,  0.35) rgba(0,  0,  0,  0.35) rgba(0,  0,  0,  0.25);
121
 }
122
​
123
.framewire-yellow-btn.active,  .framewire-yellow-btn:active  {
124
     background-image:  none;
125
     -webkit-box-shadow:  inset 0 2px 4px rgba(0,  0,  0,  0.15),  0 1px 2px rgba(0,  0,  0,  0.05);
126
     -moz-box-shadow:  inset 0 2px 4px rgba(0,  0,  0,  0.15),  0 1px 2px rgba(0,  0,  0,  0.05);
127
     box-shadow:  inset 0 2px 4px rgba(0,  0,  0,  0.15),  0 1px 2px rgba(0,  0,  0,  0.05);
128
     color:  #ffff80;
129
 }
130
​
?   ?  
?   ?  
必须是有效的URL
请输入有效的URL
+ 添加另一个资源

JS

6
 
1
$(function() {
2
  debugger;
3
  $("#loginProcessBtn").on("click", function(e) {
4
    $("#loginContainer").removeClass("animated shake fadeInLeft").addClass("shake animated");
5
  });
6
});
必须是有效的URL
请输入有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................