您的位置：首页 > Web前端 > CSS

纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好)

2013-08-10 17:25 288 查看

纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好) [图]

效果图：





源码如下

001
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN"
>
002
<HTML><HEAD><TITLE>纯CSS
3
制作的 登录模板 简洁蓝白(非IE效果更好)</TITLE>
003
<META content=
"text/html; charset=unicode"
http-equiv=Content-Type>
004
<STYLE>
005
    
h
1
, h
2
, h
3
, h
4
,
h
5
, h
6
{
006
    
font-weight
:
normal
;
007
    
margin
:
0
;
008
    
line-height
:
1.1em
;
009
    
color
:
#000
;
010
    
}
011
    
h
1
{
font-size
:
2em
;
margin-bottom
:.
5em
;}
012
    
h
2
{
font-size
:
1.75em
;
margin-bottom
:.
5142em
;
padding-top
:.
2em
;}
013
    
h
3
{
font-size
:
1.5em
;
margin-bottom
:.
7em
;
padding-top
:.
3em
;}
014
    
h
4
{
font-size
:
1.25em
;
margin-bottom
:.
6em
;}
015
    
h
5
,h
6
{
font-size
:
1em
;
margin-bottom
:.
5em
;
font-weight
:
bold
;}
016
    
p, blockquote, ul, ol, dl, form, table,
pre
{
line-height
:inherit;
margin
:
0
0
1.5em
0
;}
017
    
ul, ol, dl{
padding
:
0
;}
018
    
ul ul, ul ol, ol ol, ol ul, dd{
margin
:
0
;}
019
    
li{
margin
:
0
0
0
2em
;
padding
:
0
;
display
:
list-item
;
list-style-position
:
outside
;}
020
    
blockquote, dd{
padding
:
0
0
0
2em
;}
021
    
pre
,
code
, samp, kbd, var{
font
:
100%
mono
-space,
monospace
;}
022
    
pre
{
overflow
:
auto
;}
023
    
abbr, acronym{
024
    
text-transform
:
uppercase
;
025
    
border-bottom
:
1px
dotted
#000
;
026
    
letter-spacing
:
1px
;
027
    
}
028
    
abbr[title], acronym[title]{
cursor
:
help
;}
029
    
small
{
font-size
:.
9em
;}
030
    
sup,

sub
{
font-size
:.
8em
;}
031
    
em, cite, q{
font-style
:
italic
;}
032
    
img{
border
:
none
;}
033
    
hr{
display
:
none
;}
034
    
table{
width
:
100%
;
border-collapse
:
collapse
;}
035
    
th,
caption
{
text-align
:
left
;}
036
    
form div{
margin
:.
5em
0
;
clear
:
both
;}
037
    
label{
display
:
block
;}
038
    
fieldset{
margin
:
0
;
padding
:
0
;
border
:
none
;}
039
    
legend{
font-weight
:
bold
;}
040
    
input[type=
"radio"
],input[type=
"checkbox"
], .radio, .checkbox{
margin
:
0
.
25em
0
0
;}
041
    
/* base */
042
    
body, table,input, textarea, select, li, button{
043
    
font
:
1em
"Lucida Sans Unicode"
,
"Lucida Grande"
,
sans-serif
;
044
    
line-height
:
1.5em
;
045
    
color
:
#444
;
046
    
}
047
    
body{
048
    
font-size
:
12px
;
049
    
background
:
#c4f0f1
;
050
    
text-align
:
center
;
051
    
}
052
    
/* login form */
053
    
#login{
054
    
margin
:
5em
auto
;
055
    
background
:
#fff
;
056
    
border
:
8px
solid
#eee
;
057
    
width
:
500px
;
058
    
-moz-border-radius:
5px
;
059
    
-webkit-border-radius:
5px
;
060
    
border-radius:
5px
;
061
    
-moz-box-shadow:
0
0
10px
#4e707c
;
062
    
-webkit-box-shadow:
0
0
10px
#4e707c
;
063
    
box-shadow:
0
0
10px
#4e707c
;
064
    
text-align
:
left
;
065
    
position
:
relative
;
066
    
}
067
    
#login a, #login a:visited{
color
:
#0283b2
;}
068
    
#login a:hover{
color
:
#111
;}
069
    
#login h
1
{
070
    
background
:
#0092c8
;
071
    
color
:
#fff
;
072
    
text-shadow
:
#007dab
0
1px
0
;
073
    
font-size
:
14px
;
074
    
padding
:
18px
23px
;
075
    
margin
:
0
0
1.5em
0
;
076
    
border-bottom
:
1px
solid
#007dab
;
077
    
}
078
    
#login .register{
079
    
position
:
absolute
;
080
    
float
:
left
;
081
    
margin
:
0
;
082
    
line-height
:
30px
;
083
    
top
:
-40px
;
084
    
right
:
0
;
085
    
font-size
:
11px
;
086
    
}
087
    
#login p{
margin
:.
5em
25px
;}
088
    
#login div{
089
    
margin
:.
5em
25px
;
090
    
background
:
#eee
;
091
    
padding
:
4px
;
092
    
-moz-border-radius:
3px
;
093
    
-webkit-border-radius:
3px
;
094
    
border-radius:
3px
;
095
    
text-align
:
right
;
096
    
position
:
relative
;
097
    
}
098
    
#login label{
099
    
float
:
left
;
100
    
line-height
:
30px
;
101
    
padding-left
:
10px
;
102
    
}
103
    
#login .field{
104
    
border
:
1px
solid
#ccc
;
105
    
width
:
280px
;
106
    
font-size
:
12px
;
107
    
line-height
:
1em
;
108
    
padding
:
4px
;
109
    
-moz-box-shadow:
inset
0
0
5px
#ccc
;
110
    
-webkit-box-shadow:
inset
0
0
5px
#ccc
;
111
    
box-shadow:
inset
0
0
5px
#ccc
;
112
    
}
113
    
#login div.submit{
background
:
none
;
margin
:
1em
25px
;
text-align
:
left
;}
114
    
#login div.submit label{
float
:
none
;
display
:
inline
;
font-size
:
11px
;}
115
    
#login button{
116
    
border
:
0
;
117
    
padding
:
0
30px
;
118
    
height
:
30px
;
119
    
line-height
:
30px
;
120
    
text-align
:
center
;
121
    
font-size
:
14px
;
122
    
Font-Weight:
bold
;
123
    
color
:
#fff
;
124
    
text-shadow
:
#007dab
0
1px
0
;
125
    
background
:
#0092c8
;
126
    
-moz-border-radius:
50px
;
127
    
-webkit-border-radius:
50px
;
128
    
border-radius:
50px
;
129
    
cursor
:
pointer
;
130
    
}
131
    
#login .forgot{
text-align
:
right
;
font-size
:
11px
;}
132
    
#login .back{
padding
:
1em
0
;
border-top
:
1px
solid
#eee
;
text-align
:
right
;
font-size
:
20px
;}
133
    
#login .error{
134
    
float
:
left
;
135
    
position
:
absolute
;
136
    
left
:
95%
;
137
    
top
:
-5px
;
138
    
background
:
#890000
;
139
    
padding
:
5px
10px
;
140
    
font-size
:
11px
;
141
    
color
:
#fff
;
142
    
text-shadow
:
#500
0
1px
0
;
143
    
text-align
:
left
;
144
    
white-space
:
nowrap
;
145
    
border
:
1px
solid
#500
;
146
    
-moz-border-radius:
3px
;
147
    
-webkit-border-radius:
3px
;
148
    
border-radius:
3px
;
149
    
-moz-box-shadow:
0
0
5px
#700
;
150
    
-webkit-box-shadow:
0
0
5px
#700
;
151
    
box-shadow:
0
0
5px
#700
;
152
    
}
153
    
</STYLE>
154
 
155
<STYLE id=wiz_custom_css type=text/css>
156
body
157
{
158
    
font-family
: 微软雅黑,Georgia,
Helvetica
,
Arial
,
sans-serif
,宋体,
serif
;
159
    
font-size
:
10.5pt
;
160
    
line-height
:
1.5
;
161
}
162
html, body, div, span, applet, object, iframe, p, blockquote,
pre
,
163
abbr, acronym, address, big, cite,

code
,
164
del, dfn, em, font, img, ins, kbd, q, s, samp,
165
small
, strike, strong,
sub
, sup,tt, var,
166
b, u, i,
center
,
167
dl, dt, dd, ol, ul, li,
168
fieldset, form, label, legend,
169
table,
caption
, tbody, tfoot, thead, tr, th, td
170
{
171
    
color
: inherit;
172
    
background-color
: inherit;
173
}
174
 
175
h
1
{
176
    
font-size
:
1.5em
;
177
    
font-weight
:
bold
;
178
}
179
h
2
{
180
    
font-size
:
1.4em
;
181
    
font-weight
:
bold
;
182
}
183
h
3
{
184
    
font-size
:
1.3em
;
185
    
font-weight
:
bold
;
186
}
187
h
4
{
188
    
font-size
:
1.2em
;
189
    
font-weight
:
bold
;
190
}
191
h
5
{
192
    
font-size
:
1.1em
;
193
    
font-weight
:
bold
;
194
}
195
h
6
{
196
    
font-size
:
1.0em
;
197
    
font-weight
:
bold
;
198
}
199
img {
200
    
border
:
0
;
201
}
202
 
203
 
204
</STYLE>
205
 
206
<META name=GENERATOR content=
"MSHTML 9.00.8112.16421"
></HEAD>
207
<BODY>
208
<FORM id=login method=post action=
""
>
209
<H
1
><STRONG>考生登录</STRONG></H
1
>
210
<DIV><LABEL for=login_username><STRONG>考生学号：</STRONG></LABEL> <INPUT
211
id=login_username class=
"field required"
title=请输入您的用户名 name=username> </DIV>
212
<DIV><LABEL for=login_password><STRONG>考生密码：</STRONG></LABEL> <INPUT
213
id=login_password class=
"field required"
title=密码不能为空 name=password
214
type=password> </DIV>
215
<DIV class=submit><BUTTON type=submit>登录</BUTTON> </DIV></FORM></BODY></HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航