1. 固定的顶部工具栏
代码：
01 |
#banner { |
02 |
position: fixed; |
03 |
height: 60px; |
04 |
width: 100%; |
05 |
top: 0; |
06 |
left: 0; |
07 |
border-top: 5px solid #a1cb2f; |
08 |
background: #fff; |
09 |
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); |
10 |
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); |
11 |
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); |
12 |
z-index: 999999; |
13 |
} |
14 |
15 |
#banner h1 { |
16 |
line-height: 60px; |
17 |
} |
2. 下列式导航菜单
代码：
01 |
#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; } |
02 |
#bar ul { margin: 0px15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; } |
03 |
#bar ul li { background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; } |
04 |
#bar ul li a { |
05 |
display: block; |
06 |
color: #fffff7; |
07 |
line-height: 45px; |
08 |
font-weight: bold; |
09 |
padding: 0px10px; |
10 |
text-decoration: none; |
11 |
z-index: 9999; |
12 |
} |
13 |
14 |
#bar ul li a:hover, #bar ul li a.selected { |
15 |
color: #365977; |
16 |
background: #fff; |
17 |
border-top-left-radius: 3px; |
18 |
border-top-right-radius: 3px; |
19 |
-webkit-border-top-left-radius: 3px; |
20 |
-webkit-border-top-right-radius: 3px; |
21 |
-moz-border-radius-topleft: 3px; |
22 |
-moz-border-radius-topright: 3px; |
23 |
} |
24 |
25 |
#bar ul .subnav { |
26 |
display: block; |
27 |
left: 14px; |
28 |
top: 48px; |
29 |
z-index: -1; |
30 |
width: 500px; |
31 |
position: absolute; |
32 |
height: 90px; |
33 |
border: 1px solid #edf0f3; |
34 |
border-top: 0; |
35 |
padding: 10px 0 10px10px; |
36 |
overflow: hidden; |
37 |
-moz-border-radius-bottomleft: 3px; |
38 |
-moz-border-radius-bottomleft: 3px; |
39 |
-webkit-border-bottom-left-radius: 3px; |
40 |
-webkit-border-bottom-right-radius: 3px; |
41 |
border-bottom-right-radius: 3px; |
42 |
border-bottom-right-radius: 3px; |
43 |
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25); |
44 |
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25); |
45 |
box-shadow: 0px 2px 7px rgba(0,0,0,0.25); |
46 |
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')"; |
47 |
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333'); |
48 |
} |
3. 带光泽阴影按钮
代码：
01 |
blues { |
02 |
color: #fff; |
03 |
width: 190px; |
04 |
height: 35px; |
05 |
cursor: pointer; |
06 |
font-family: Arial, Tahoma, sans-serif; |
07 |
font-size: 1.0em; |
08 |
font-weight: bold; |
09 |
-moz-border-radius: 2px; |
10 |
-webkit-border-radius: 2px; |
11 |
border-radius: 2px; |
12 |
border-width: 1px; |
13 |
border-color: #0053a6 #0053a6 #000; |
14 |
background-color: #6891e7; |
15 |
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%); |
16 |
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%); |
17 |
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%); |
18 |
background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0, #4495e7),color-stop(100%, #0053a6)); |
19 |
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%); |
20 |
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%); |
21 |
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); |
22 |
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35); |
23 |
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35); |
24 |
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35); |
25 |
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35); |
26 |
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6); |
27 |
} |
28 |
29 |
.blues:hover { |
30 |
border-color: #002d59 #002d59 #000; |
31 |
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, 0.25); |
32 |
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, 0.25); |
33 |
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, 0.25); |
34 |
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, .25); |
35 |
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf,EndColorStr=#0053a6); |
36 |
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%); |
37 |
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%); |
38 |
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%); |
39 |
background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6)); |
40 |
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%); |
41 |
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%); |
42 |
} |
43 |
44 |
.blues:active { |
45 |
border-color: #000 #002d59 #002d59; |
46 |
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff; |
47 |
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff; |
48 |
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff; |
49 |
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff; |
50 |
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6); |
51 |
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%); |
52 |
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%); |
53 |
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%); |
54 |
background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0,#005ab4),color-stop(100%,#175ea6)); |
55 |
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%); |
56 |
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%); |
57 |
} |
4. 弹出通知栏
代码：
01 |
.flyout { |
02 |
width: 310px; |
03 |
margin-top: 10px; |
04 |
font-size: 11px; |
05 |
position: relative; |
06 |
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; |
07 |
background-color: white; |
08 |
padding: 9px 11px; |
09 |
background: rgba(255, 255, 255, 0.9); |
10 |
border: 1px solid #c5c5c5; |
11 |
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); |
12 |
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); |
13 |
box-shadow: 0 3px 8px rgba(0, 0, 0, .25); |
14 |
-webkit-border-radius: 3px; |
15 |
-moz-border-radius: 3px; |
16 |
border-radius: 3px; |
17 |
} |
18 |
19 |
.flyout #tip { |
20 |
background-image: url('images/tip.png'); |
21 |
background-repeat: no-repeat; |
22 |
background-size: auto; |
23 |
height: 11px; |
24 |
position: absolute; |
25 |
top: -11px; |
26 |
left: 25px; |
27 |
width: 20px; |
28 |
} |
29 |
30 |
.flyout h2 { |
31 |
text-transform: uppercase; |
32 |
color: #666; |
33 |
font-size: 1.2em; |
34 |
padding-bottom: 5px; |
35 |
margin-bottom: 12px; |
36 |
border-bottom: 1px solid #dcdbda; |
37 |
} |
38 |
.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; } |
5. 苹果页面包装
代码：
01 |
.applewrap { |
02 |
width: 100%; |
03 |
display: block; |
04 |
height: 150px; |
05 |
background: white; |
06 |
border: 1px solid; |
07 |
border-color: #e5e5e5 #dbdbdb #d2d2d2; |
08 |
-webkit-border-radius: 4px; |
09 |
-moz-border-radius: 4px; |
10 |
border-radius: 4px; |
11 |
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; |
12 |
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; |
13 |
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; |
14 |
} |
15 |
16 |
17 |
.applewrap .col { |
18 |
float: left; |
19 |
box-sizing: border-box; |
20 |
width: 250px; |
21 |
height: 150px; |
22 |
padding: 16px 7px 6px 22px; |
23 |
font: 12px/18px"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; |
24 |
color: #343434; |
25 |
border-right: 1px solid #dadada; |
26 |
} |
6. 苹果内容框效果
代码：
01 |
.applebox { |
02 |
width: auto; |
03 |
height: 85px; |
04 |
box-sizing: border-box; |
05 |
background: #f5f5f5; |
06 |
padding: 20px 20px 10px; |
07 |
margin: 10px 0 20px; |
08 |
border: 1px solid #ccc; |
09 |
border-radius: 4px; |
10 |
-webkit-border-radius: 4px; |
11 |
-moz-border-radius: 4px; |
12 |
-o-border-radius: 4px; |
13 |
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); |
14 |
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); |
15 |
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); |
16 |
} |
17 |
18 |
.applebox .col { |
19 |
width: 140px; |
20 |
float: left; |
21 |
margin: 0 0 0 30px; |
22 |
} |
7. 精选链接
代码：
01 |
.applefeature { |
02 |
height: 150px; |
03 |
margin: 8px; |
04 |
vertical-align: top; |
05 |
display: inline-block; |
06 |
} |
07 |
08 |
.applefeature a { |
09 |
display: block; |
10 |
width: 168px; |
11 |
height: 140px; |
12 |
border: 1px solid #ccc; |
13 |
color: #333; |
14 |
text-decoration: none; |
15 |
font-weight: bold; |
16 |
line-height: 1.3em; |
17 |
background: #f7f7f7; |
18 |
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); |
19 |
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); |
20 |
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); |
21 |
-webkit-border-radius: 4px; |
22 |
-moz-border-radius: 4px; |
23 |
border-radius: 4px; |
24 |
} |
25 |
.applefeature a:hover { |
26 |
background: #fafafa; |
27 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7)); |
28 |
background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff); |
29 |
-webkit-box-shadow: inset 0 1px 2pxrgba(0,0,0,.3); |
30 |
-moz-box-shadow: inset 0 1px 2pxrgba(0,0,0,.3); |
31 |
box-shadow: inset 0 1px 2px rgba(0,0,0,.3); |
32 |
-webkit-border-radius: 4px; |
33 |
-moz-border-radius: 4px; |
34 |
border-radius: 4px; |
35 |
} |
36 |
37 |
.applefeature a img { |
38 |
display: block; |
39 |
margin: 26px auto 4px; |
40 |
} |
41 |
.applefeature a h4 { |
42 |
display: block; |
43 |
width: 160px; |
44 |
font-size: 1.3em; |
45 |
font-family: Arial, Tahoma, sans-serif; |
46 |
color: #646464; |
47 |
text-align: center; |
48 |
} |
8. 帧内图片
代码：
01 |
.wpframe { |
02 |
background: #fff; |
03 |
border-radius: 2px; |
04 |
-webkit-border-radius: 2px; |
05 |
-moz-border-radius: 2px; |
06 |
padding: 8px; |
07 |
-webkit-box-shadow: 1px 2px 1px #d1d1d1; |
08 |
-moz-box-shadow: 1px 2px 1px #d1d1d1; |
09 |
box-shadow: 1px 2px 1px #d1d1d1; |
10 |
} |
9. 具有焦点亮度效果的文本框
代码：
01 |
.formwrap { display: block; margin-bottom: 15px; } |
02 |
.formwrap label { |
03 |
display: inline-block; |
04 |
width: 80px; |
05 |
font-size: 11px; |
06 |
font-weight: bold; |
07 |
color: #444; |
08 |
font-family: Arial, Tahoma, sans-serif; |
09 |
} |
10 |
11 |
.formwrap .shadowfield { |
12 |
position: relative; |
13 |
width: 250px; |
14 |
font-size: 17px; |
15 |
font-family: "Helvetica Neue", Arial, sans-serif; |
16 |
font-weight: normal; |
17 |
background: #f7f8f8; |
18 |
color: #7c7c7c; |
19 |
line-height: 1.4; |
20 |
padding: 6px 12px; |
21 |
outline: none; |
22 |
transition: all 0.2s ease-in-out 0s; |
23 |
-webkit-transition: all 0.2s ease-in-out 0s; |
24 |
-moz-transition: all 0.2s ease-in-out 0s; |
25 |
border: 1px solid #ad9c9c; |
26 |
border-radius: 6px 6px 6px 6px; |
27 |
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff; |
28 |
} |
29 |
.formwrap .shadowfield:focus { |
30 |
border-color: #930; |
31 |
background: #fff; |
32 |
color: #5d5d5d; |
33 |
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 00 7px rgba(235, 82, 82, 0.5); |
34 |
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1pxrgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); |
35 |
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1pxrgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); |
36 |
} |
10. 弹性阴影按钮
代码：
01 |
.blu-btn { |
02 |
display: inline-block; |
03 |
-moz-border-radius: .25em; |
04 |
border-radius: .25em; |
05 |
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); |
06 |
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); |
07 |
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); |
08 |
background-color: #276195; |
09 |
background-image: -moz-linear-gradient(#3c88cc,#276195); |
10 |
background-image: -ms-linear-gradient(#3c88cc,#276195); |
11 |
background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0%,#3c88cc),color-stop(100%,#276195)); |
12 |
background-image: -webkit-linear-gradient(#3c88cc,#276195); |
13 |
background-image: -o-linear-gradient(#3c88cc,#276195); |
14 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0); |
15 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)"; |
16 |
background-image: linear-gradient(#3c88cc,#276195); |
17 |
border: 0; |
18 |
cursor: pointer; |
19 |
color: #fff; |
20 |
text-decoration: none; |
21 |
text-align: center; |
22 |
font-size: 16px; |
23 |
padding: 0px 20px; |
24 |
height: 40px; |
25 |
line-height: 40px; |
26 |
min-width: 100px; |
27 |
text-shadow: 0 1px 0 rgba(0,0,0,0.35); |
28 |
font-family: Arial, Tahoma, sans-serif; |
29 |
-webkit-transition: all linear .2s; |
30 |
-moz-transition: all linear .2s; |
31 |
-o-transition: all linear .2s; |
32 |
-ms-transition: all linear .2s; |
33 |
transition: all linear .2s |
34 |
} |
35 |
.blu-btn:hover, .blu-btn:focus { |
36 |
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8; |
37 |
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8; |
38 |
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 012px 20px 2px #3089d8; |
39 |
} |
40 |
.blu-btn:active { |
41 |
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); |
42 |
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); |
43 |
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); |
44 |
} |
45 |
46 |
47 |
.grn-btn { |
48 |
display: inline-block; |
49 |
-moz-border-radius: .25em; |
50 |
border-radius: .25em; |
51 |
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); |
52 |
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); |
53 |
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); |
54 |
background-color: #659324; |
55 |
background-image: -moz-linear-gradient(#81bc2e,#659324); |
56 |
background-image: -ms-linear-gradient(#81bc2e,#659324); |
57 |
background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0%,#81bc2e),color-stop(100%,#659324)); |
58 |
background-image: -webkit-linear-gradient(#81bc2e,#659324); |
59 |
background-image: -o-linear-gradient(#81bc2e,#659324); |
60 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0); |
61 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)"; |
62 |
background-image: linear-gradient(#81bc2e,#659324); |
63 |
border: 0; |
64 |
cursor: pointer; |
65 |
color: #fff; |
66 |
text-decoration: none; |
67 |
text-align: center; |
68 |
font-size: 16px; |
69 |
padding: 0px 20px; |
70 |
height: 40px; |
71 |
line-height: 40px; |
72 |
min-width: 100px; |
73 |
text-shadow: 0 1px 0 rgba(0,0,0,0.35); |
74 |
font-family: Arial, Tahoma, sans-serif; |
75 |
-webkit-transition: all linear .2s; |
76 |
-moz-transition: all linear .2s; |
77 |
-o-transition: all linear .2s; |
78 |
-ms-transition: all linear .2s; |
79 |
transition: all linear .2s; |
80 |
} |
81 |
.grn-btn:hover, .grn-btn:focus { |
82 |
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26; |
83 |
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26; |
84 |
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 012px 20px 2px #85ca26; |
85 |
} |
86 |
.grn-btn:active { |
87 |
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); |
88 |
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); |
89 |
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); |
90 |
} |