|   字数统计: 767(字)

发表于 | 分类于 | 阅读次数

HTTP性能小测试

工具
apache-ab

ab命令原理

Apache的ab命令模拟多线程并发请求，测试服务器负载压力，也可以测试nginx、lighthttp、IIS等其它Web服务器的压力。
ab命令对发出负载的计算机要求很低，既不会占用很多CPU，也不会占用太多的内存，但却会给目标服务器造成巨大的负载，因此是某些DDOS攻击之必备良药，老少皆宜。自己使用也须谨慎。否则一次上太多的负载，造成目标服务器直接因内存耗光死机，而不得不硬重启，得不偿失。

在带宽不足的情况下，最好是本机进行测试，建议使用内网的另一台或者多台服务器通过内网进行测试，这样得出的数据，准确度会高很多。远程对web服务器进行压力测试，往往效果不理想（因为网络延时过大或带宽不足）

下载安装：

1
#yum install httpd-tools

参数文档：
ab - Apache HTTP server benchmarking tool

键入命令：

ab -n1000 -c10 http://www.imooc.com/

-n发出1000个请求，-c模拟10并发，相当10人同时访问，后面是测试url）

ab -t 60 -c 100 http://jxdxsw.com/
在60秒内发请求，一次100个请求。

别用我的小网站测试啊 本来就慢。。。哈哈

结果参数解释： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
This is ApacheBench, Version 2.3 <$Revision: 1430300 $>
This is ApacheBench, Version 2.3 <$Revision: 1430300 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking www.imooc.com (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Completed 600 requests
Completed 700 requests
Completed 800 requests
Completed 900 requests
Completed 1000 requests
Finished 1000 requests
Server Software:        nginx
Server Hostname:        www.imooc.com
Server Port:            80
Document Path:          /
Document Length:        183809 bytes  //  HTTP响应数据的正文长度
Concurrency Level:      10
Time taken for tests:   150.110 seconds  //  所有这些请求处理完成所花费的时间 
Complete requests:      1000  // 完成请求数 
Failed requests:        0     // 失败请求数
Write errors:           0
Total transferred:      184566000 bytes  //网络总传输量 
HTML transferred:       183809000 bytes   //HTML内容传输量 
Requests per second:    6.66 [#/sec] (mean)  //吞吐量-每秒请求数 
Time per request:       1501.104 [ms] (mean) //服务器收到请求，响应页面要花费的时间 
Time per request:       150.110 [ms] (mean, across all concurrent requests)  //并发的每个请求平均消耗时间 
Transfer rate:          1200.72 [Kbytes/sec] received  //平均每秒网络上的流量，可以帮助排除是否存在网络流量过大导致响应时间延长的问题
//网络上消耗的时间的分解：
Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       31  435 1009.6     43    3060
Processing:   761 1047 139.6   1026    2440
Waiting:      520  801 133.4    781    2191
Total:        805 1482 1010.1   1100    4507
// 整个场景中所有请求的响应情况。在场景中每个请求都有一个响应时间 
// 其中 50％ 的用户响应时间小于 1100 毫秒 
// 80 ％ 的用户响应时间小于 1297 毫秒 
// 最大的响应时间小于4507 毫秒 
Percentage of the requests served within a certain time (ms)
  50%   1100
  66%   1189
  75%   1247
  80%   1297
  90%   3964
  95%   4082
  98%   4198
  99%   4227
 100%   4507 (longest request)

参考：

慕课网 进击node.js基础

  |   字数统计: 468(字)

发表于 | 分类于 | 阅读次数

CSS3实现旋转照片墙
效果

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS3 transform旋转特效</title>
	<style>
	body{
	background-color:#eee;
}
h1{
	text-align:center;
}
.container{
	width:960px; 
	height:450px; 
	margin:60px auto; 
	position:relative;
}
.container img{
	width:300px;
	height: 400px;
	padding:10px 10px 15px; 
	background:white; 
	border:1px solid #ddd; 
	box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
	-webkit-transition:all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in; 
	position:absolute; 
	z-index:1;
}
.container img:hover{
	box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
	-webkit-transform:rotate(0deg) scale(1.20); 
	-moz-transform:rotate(0deg) scale(1.20); 
	transform:rotate(0deg) scale(1.20); 
	z-index:2;
}
.pic1{
	left: 400px; 
	top: 0; 
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg); 
	transform: rotate(-5deg);
}
.pic2{
	top: 0; 
	left: 600px; 
	-webkit-transform: rotate(-20deg); 
	-moz-transform: rotate(-20deg); 
	transform: rotate(-20deg);
}
.pic3
{
	bottom: 0; 
	right: 0; 
	-webkit-transform: rotate(5deg); 
	-moz-transform: rotate(5deg); 
	transform: rotate(5deg);
}
	
.pic4
{
	bottom:0; 
	left:300px; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
.pic5
{
	bottom: 0; 
	left: 0; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
.pic6
{
	top: 0; 
	left:0; 
	-webkit-transform: rotate(10deg); 
	-moz-transform: rotate(10deg); 
	transform: rotate(10deg);
}
.pic7
{
	top: 0; 
	left: 850px; 
	-webkit-transform: rotate(20deg); 
	-moz-transform: rotate(20deg); 
	transform: rotate(20deg);
}
.pic8
{
	bottom: -20px; 
	right: 630px; 
	-webkit-transform: rotate(5deg); 
	-moz-transform: rotate(5deg); 
	transform: rotate(5deg);
}
.pic9
{
	top: 90px; 
	left: 550px; 
	-webkit-transform: rotate(15deg); 
	-moz-transform: rotate(15deg); 
	transform: rotate(15deg);
}
.pic10
{
	left:180px; 
	top:20px; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
		
	</style>
</head>
<body>
	<h1>CSS3照片墙</h1>
	<div class="container">
		<img class="pic pic1" src="images/mm1.jpg">
		<img class="pic pic2" src="images/mm2.jpg">
		<img class="pic pic3" src="images/mm3.jpg">
		<img class="pic pic4" src="images/mm4.jpg">
		<img class="pic pic5" src="images/mm5.jpg">
		<img class="pic pic6" src="images/mm6.jpg">
		<img class="pic pic7" src="images/mm7.jpg">
		<img class="pic pic8" src="images/mm8.jpg">
		<img class="pic pic9" src="images/mm9.jpg">
		<img class="pic pic10" src="images/mm10.jpg">
	</div>
</body>
</html>

技术点

  • 简单CSS3实现任意设置元素的旋转角
  • 简单CSS3实现图片的等比缩放
  • 利用CSS3将元素的样式变化以动画的方式展现出来。

参考

慕课网 CSS3绚丽照片墙

  |   字数统计: 807(字)

发表于 | 分类于 | 阅读次数

李清照有多伟大

本文系博主回答知乎同名问题所写文章，谢绝转载。
知乎问题链接

“秀影茕立，凝眉终古”

这是我脑海里易安居士的形象。

我不知道她算不算的得上伟大，但我深深的被她所吸引。
吸引我的，

是她喷珠漱玉的词章；
是她澄明清透的心性；
是她凝眉轻蹙的倩影；

千古风流八咏楼，江山留与后人愁。
水通南国三千里，气压江城十四州。

强敌临境，国脉衰颓下的八咏楼，她登临其上，再难生起“遥吟俯畅，逸兴遄飞”的博雅风华，填塞胸臆的唯有漫天匝地，茫茫无际的国恨家愁。
时光穿透近九百年，我仿佛看到了这位已过知命之年的女词仙，她面带倦容，风尘仆仆，两弯凝眉似蹙非蹙，一腔悲抑残形消骨。
生怕离别苦，多少事、欲说还休。新来瘦，非干病酒，不是悲秋
她少年繁华，中经丧乱，晚景凄苦。一语谓之“忧患得失，何其多也”。
其诗其词其人，非一个“愁”字所能概括的，可以说极为繁杂丰富，情思深远。

沉醉不知归路，兴尽晚回舟，误入藕花深处

这是她少女年华的娇憨

小院闲窗春已深。重帘未卷影沉沉。倚楼无语理瑶琴。
远岫出云催薄暮，细风吹雨弄轻阴。梨花欲谢恐难禁。

这是她内心的苦闷与骚动。（爱情这位不速之客终于叩启了她的心扉，撩拨着这颗多情易感的芳心，“醒时空对烛花红”当是她春情萌动的伊始。）

红藕香残玉簟秋。轻解罗裳，独上兰舟。云中谁寄锦书来，雁字回时，月满西楼。
花自飘零水自流。一种相思，两处闲愁。此情无计可消除，才下眉头，却上心头。

这是她倾诉愁肠，思恋负笈远游的丈夫的闺怨。
同样的情境的还有：

薄雾浓云愁永昼，瑞脑销金兽。佳节又重阳，玉枕纱厨，半夜凉初透。
东篱把酒黄昏后，有暗香盈袖。莫道不销魂，帘卷西风，人比黄花瘦。

最后三句“莫道不销魂，帘卷西风，人比黄花瘦”，可谓万斛愁情。

寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。
满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！

这是她晚年的凄清孤寂。
白铸清词，骚坛独步，这就是她的成就
现实中爱的匮乏与破灭，悲凉之雾广被华林，恰好为她的艺术创造提供了源源不竭的灵泉。
或许，她的端庄典雅、凄清之美，她那灵明的心性会同她的词句一起
终古滋润着浊世人群的心田。

  |   字数统计: 795(字)

发表于 | 分类于 | 阅读次数

css3实现鼠标悬停消息提示框

效果

技术点：

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实现鼠标悬停消息提示框</title>
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width"  initial-scale="1">
	<link rel="stylesheet" type="text/css" href="style/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style/prettyToolTips.css">
</head>
<body>
	<div class="nav">
		<ul>
			<li>
				<a href="#" title="" class="tooltip tooltip-effect-1">Home
					<span class="tooltip-content">
					<i class="fa fa-home fa-fw"></i></span>
				</a>
			</li>
			<li>
				<a href="#" title="" class="tooltip tooltip-effect-2">About me
					<span class="tooltip-content">
					<i class="fa fa-user fa-fw"></i></span>
				</a>
			</li>
			<li>
				<a href="#" title="" class="tooltip tooltip-effect-3">Photography
					<span class="tooltip-content">
					<i class="fa fa-camera fa-fw"></i></span>
				</a>
			</li>
			<li>
				<a href="#" title="" class="tooltip tooltip-effect-4">Work
					<span class="tooltip-content">
					<i class="fa fa-briefcase fa-fw" ></i></span>
				</a>
			</li>
			<li>
				<a href="#" title="" class="tooltip tooltip-effect-5">Contact
					<span class="tooltip-content">
					<i class="fa fa-envelope fa-fw"></i></span>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
/* Global */
html{
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-o-text-size-adjust:none;
	-ms-text-size-adjust:none;
	text-size-adjust:none;
}
body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #47c9af;
	color: #74777b;
	font-weight: 300;
	font-size: 1.5em;
	font-family: "Raleway","Arail";
}
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
a:link,a:visited,a:focus{text-decoration: none;outline: none;}
*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:after,*:before{
	display: block;
	content: "";
}
*:after{clear:both;}
/* Navigator */
.nav{
	width: 800px;
	height: 300px;
	margin:200px auto;
}
.nav li{
	display: inline-block;
	margin:0 1em;
}
.tooltip{
	display: inline-block;
	font-weight: 700;
	color: rgba(0,0,0,0.4);
	padding: 0.15em 0.25em 0;
	position: relative;
	z-index: 999;
	-webkit-transition:color 0.6s;
	transition:color 0.6s;
}
.tooltip:hover{color:rgba(255,255,255,1);}
.tooltip-content{
	position: absolute;
	z-index: 9999;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fff;
	left: 50%;
	margin-left: -40px;
	bottom:100%;
	margin-bottom: 20px;
	text-align: center;
	padding-top: 25px;
	color: #47c9af;
	opacity: 0;
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.tooltip .tooltip-content i{
	opacity: 0;
	-webkit-transition:opacity 0.6s;
	transition:opacity 0.6s;
}
.tooltip-content::after{
	display: block;
	content: "";
	width: 30px;
	height: 20px;
	background:url(../images/tooltip1.svg) no-repeat center;
	background-size: 100%;
	position: absolute;
	top:100%;
	left: 50%;
	margin:-6px 0 0 -15px;
}
.tooltip-effect-1 .tooltip-content{
	-webkit-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
	transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
} 
.tooltip-effect-1 .tooltip-content i{
	-webkit-transform:scale3d(0.5,0.5,0.5);
	transform:scale3d(0.5,0.5,0.5);
}
.tooltip-effect-2 .tooltip-content{
	-webkit-transform:translate3d(0,20px,0);
	transform:translate3d(0,20px,0);
	
} 
.tooltip-effect-2 .tooltip-content i{
	-webkit-transform:translate3d(0,15px,0);
	transform:translate3d(0,15px,0);
	
	
}
.tooltip-effect-3 .tooltip-content{
	-webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
	
	
} 
.tooltip-effect-3 .tooltip-content i{
	-webkit-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);
	
}
.tooltip-effect-4 .tooltip-content{
	-webkit-transform:translate3d(0,-20px,0) ;
	transform:translate3d(0,-20px,0) ;
	
	
	
} 
.tooltip-effect-4 .tooltip-content i{
	-webkit-transform:translate3d(0,20px,0);
	transform:translate3d(0,20px,0);
	
}
.tooltip-effect-5 .tooltip-content{
	-webkit-transform:scale3d(0.5,.5,0.5);
	transform:scale3d(0.5,0.5,0.5);
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
	
	
} 
.tooltip-effect-5 .tooltip-content i{
	-webkit-transform:translate3d(0,20px,0);
	transform:translate3d(0,20px,0);
	
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i{
	opacity: 1;
	-webkit-transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
	transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}

参考

CSS3 用户界面
慕课网 CSS3实现漂亮ToolTips效果
Font Awesome 官网

  |   字数统计: 186(字)

发表于 | 分类于 | 阅读次数

jQuery 如何存储，获取和删除 Cookies

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') {
        options = options || {};
        if (value === null) {
            value = '';
            options = $.extend({}, options);
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
        } else {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

然后通过下面方法使用：

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    $('#write_cokies').click(function(){
        $.cookie('name', 'test',{expires: 7});                  
    });
    $('#read_ookies').click(function(){
        var test = $.cookie('name');
        alert (test);
    });
    $('#delete_cookies').click(function(){
        $.cookie('name', null);                              
    });
});
  |   字数统计: 2,354(字)

发表于 | 分类于 | 阅读次数

CSS3实现网页平滑过渡效果

效果
效果

代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实现的页面平滑过渡 | 镜心书社</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
	<link rel="stylesheet" type="text/css" href="style/smooth-transition.css">
</head>
<body>
	<div class="container">
		<div class="st-container">
		<!-- nav begin -->
			<input type="radio" name="radio-set" checked="checked" id="st-control-1">
			<a href="#st-panel-1" title="">Serendipity</a>
			<input type="radio" name="radio-set" id="st-control-2">
			<a href="#st-panel-2" title="">Happinese</a>
			<input type="radio" name="radio-set" id="st-control-3">
			<a href="#st-panel-3" title="">Tranquillity</a>
			<input type="radio" name="radio-set" id="st-control-4">
			<a href="#st-panel-4" title="">Positivity</a>
			<input type="radio" name="radio-set" id="st-control-5">
			<a href="#st-panel-5" title="">Passion</a>
		<!-- nav end content begin-->
			<div class="st-scroll">
				<section class="st-panel" id="st-panel-1">
					<div class="st-description" data-icon="H"></div>
					<h2>Serendipity</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel st-color" id="st-panel-2">
					<div class="st-description" data-icon="Q"></div>
					<h2>Happinese</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel" id="st-panel-3">
					<div class="st-description" data-icon="B"></div>
					<h2>Tranquillity</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel st-color" id="st-panel-4">
					<div class="st-description" data-icon="U"></div>
					<h2>Positivity</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel " id="st-panel-5">
					<div class="st-description" data-icon="L"></div>
					<h2>Passion</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				
			</div>
		</div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
@font-face{
	font-family: "Raphaelicons";
	src: url('./fonts/raphaelicons-webfont.eot')format('eot'),
		url('./fonts/raphaelicons-webfont.woff')format('woff'),
		url('./fonts/raphaelicons-webfont.ttf')format('truetype'),
		url('./fonts/raphaelicons-webfont.svg')format('svg');
	font-weight: normal;
	font-style: normal;
}
body{
	font-family: Georgia,serif;
	background: #ddd;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	overflow: hidden;
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: inherit | grayscale;
}
a{
	text-decoration: none;
	color: #555;
}
.clear{height: 0;
		height: 0;
		overflow: hidden;
		clear: both;
		padding: 0;
		margin: 0;
	}
.st-container{
	width: 100%;
	height: 100%;
	position: absolute;;
	left: 0;
	top: 0;
	font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
}
.st-container > input,
.st-container > a{
	width: 20%;
	height: 34px;
	line-height: 34px;
	position: fixed;
	bottom: 0;
	cursor: pointer;
}
.st-container > input{
	opacity: 0;
	z-index: 1000;
}
.st-container > a{
	z-index: 10;
	font-weight: 700;
	font-size: 16px;
	background: #e23a6e;
	text-align: center;
	color: #fff;
	text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
#st-control-1,#st-control-1 + a{
	left: 0;
}
#st-control-2,#st-control-2 + a{
	left: 20%;
}
#st-control-3,#st-control-3 + a{
	left: 40%;
}
#st-control-4,#st-control-4 + a{
	left: 60%;
}
#st-control-5,#st-control-5 + a{
	left: 80%;
}
.st-container input:checked + a,
.st-container input:checked:hover + a{
	background: #821134;
}
.st-container input:checked + a:after{
	content:'';
	width: 0;
	height: 0;
	overflow: hidden;
	border: 20px solid transparent;
	border-bottom-color:#821134; 
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -20px;
}
.st-container input:hover + a{
	background: #ad244f;
}
.st-scroll,
.st-panel{
	width: 100%;
	height: 100%;
	position: relative;
}
.st-scroll{
	left: 0;
	top: 0;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	-moz-transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.st-panel{
	background-color: #fff;
	overflow:hidden;
}
#st-control-1:checked ~ .st-scroll{
	-webkit-transform: translateY(0%);
	-moz-transform:translateY(0%);
	-o-transform:translateY(0%);
	-ms-transform:translateY(0%);
	transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
	-webkit-transform: translateY(-100%);
	-moz-transform:translateY(-100%);
	-o-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
	-webkit-transform: translateY(-200%);
	-moz-transform:translateY(-200%);
	-o-transform:translateY(-200%);
	-ms-transform:translateY(-200%);
	transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
	-webkit-transform: translateY(-300%);
	-moz-transform:translateY(-300%);
	-o-transform:translateY(-300%);
	-ms-transform:translateY(-300%);
	transform:translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
	-webkit-transform: translateY(-400%);
	-moz-transform:translateY(-400%);
	-o-transform:translateY(-400%);
	-ms-transform:translateY(-400%);
	transform:translateY(-400%);
}
.st-description{
	width: 200px;
	height: 200px;
	background: #fa96b5;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -100px;
	-webkit-transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after{
	content: attr(data-icon);
	width: 200px;
	height: 200px;
	
	color: #fff;
	font-size: 90px;
	text-align: center;
	line-height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -100px 0 0 -100px;
	-webkit-transform: rotate(-45deg) translateY(25%);
	-moz-transform: rotate(-45deg) translateY(25%);
	-o-transform: rotate(-45deg) translateY(25%);
	-ms-transform: rotate(-45deg) translateY(25%);
	transform: rotate(-45deg) translateY(25%);
	font-family: "Raphaelicons";
	text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
.st-panel h2{
	color: #e23a6e;
	font-size:54px;
	line-height: 50px;
	text-align: center;
	font-weight: 900;
	width: 80%;
	position: absolute;
	left: 10%;
	top: 50%;
	margin-top: -70px;
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	-webkit-backface-visibility:hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
	-webkit-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	-moz-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	-o-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	-ms-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	animation: moveDown 0.8s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
	0%{
		-webkit-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-webkit-transform: translateY(0px);
		opacity: 1;
	}	
}
@-moz-keyframes moveDown{
	0%{
		-moz-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-moz-transform: translateY(0px);
		opacity: 1;
	}	
}
@-o-keyframes moveDown{
	0%{
		-o-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-o-transform: translateY(0px);
		opacity: 1;
	}	
}
@-ms-keyframes moveDown{
	0%{
		-ms-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-ms-transform: translateY(0px);
		opacity: 1;
	}	
}
@keyframes moveDown{
	0%{
		transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}	
}
.st-panel p{
	position: absolute;
	width:60%;
	left: 50%;
	top: 50%;
	margin-left: -30%;
	font-size: 2em;
	text-align: center;
	line-height: 22px;
	padding: 0;
	-webkit-backface-visibility:hidden;
	color: #8b8b8b;
	margin-top: 20px;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 P,
#st-control-2:checked ~ .st-scroll #st-panel-2 P,
#st-control-3:checked ~ .st-scroll #st-panel-3 P,
#st-control-4:checked ~ .st-scroll #st-panel-4 P,
#st-control-5:checked ~ .st-scroll #st-panel-5 P{
	-webkit-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	-moz-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	-o-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	-ms-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	animation: moveUp 0.8s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
	0%{
		-webkit-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-webkit-transform: translateY(0px);
		opacity: 1;
	}	
}
@-moz-keyframes moveUp{
	0%{
		-moz-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-moz-transform: translateY(0px);
		opacity: 1;
	}	
}
@-o-keyframes moveUp{
	0%{
		-o-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-o-transform: translateY(0px);
		opacity: 1;
	}	
}
@-ms-keyframes moveUp{
	0%{
		-ms-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-ms-transform: translateY(0px);
		opacity: 1;
	}	
}
@keyframes moveUp{
	0%{
		transform: translateY(40px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}	
}
.st-color{
	background: #fa96b5;
}
.st-color .st-description{
	background: #fff;
}
.st-color [data-icon]:after{
	color: #fa96b5;
}
.st-color h2{
	color: #fff;
	text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
}
.st-color p{
	color: rgba(255, 255, 255, 0.8);
	text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:520px) {
	.st-panel h2{
		font-size: 42px;
	}
	.st-panel p{
		width: 80%;
		left: 10%;
		margin-top:0; 
		margin-left: 0;
	}
	.st-container>a{
		font-size: 13px;
	}
}
@media screen and (max-width:360px) {
	.st-panel h2{
		font-size: 42px;
	}
	.st-panel p{
		width: 80%;
		left: 10%;
		margin-top:0; 
	}
	.st-container>a{
		font-size: 10px;
	}
	.st-description{
		width: 120px;
		height: 120px;
		margin-left:-60px; 
	}
	[data-icon]:after{
		font-size: 60px;
		-webkit-transform: rotate(-45deg) translateY(15%);
		-moz-transform: rotate(-45deg) translateY(15%);
		-o-transform: rotate(-45deg) translateY(15%);
		-ms-transform: rotate(-45deg) translateY(15%);
		transform: rotate(-45deg) translateY(15%);
		
	}
}

技术点

  • 通过input 的checked单选按钮实现是否被选中
  • translate3d（可以开启GPU硬件加速）
  • CSS3画三角形
  • backface-visibility
  • transition
  • @font-face实现小icon（不用切图，减少http请求）
  • animation
  • @keyframes
  • 自适应（响应式 用媒体查询实现）
  • @media query

-webkit-font-smoothing 字体平滑处理和抗锯齿渲染
CSS3里面加入了一个“-webkit-font-smoothing”属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

它有三个属性：

  • none —— 对低像素的文本比较好

  • subpixel-antialiased ——默认值

  • antialiased ——抗锯齿很好

例子： 

1
2
3
4
5
body{ 
-webkit-font-smoothing: antialiased; 
}

国外某网站例子

附：

1
-moz-osx-font-smoothing: inherit | grayscale

这个属性也是更清晰的作用，特别是图标文字流行的今天。

隐藏元素的四种方法

dispaly:none;
//隐藏不占位

1
2
position:absolute;
    left:-99999px
1
2
visibility:hidden;
//隐藏占位
1
opacoty:0;

PS:这个demo里导航的移动原理是css的transitionY，而非一般导航里的通过标签a去链接；

而position：fixde这个定位机制让a标签本身的链接作用作废了（大家可以试试，反正一旦给链接设置成fixed链接作用就失效），链接作用作废的话a的visited状态就失效了，所以这里才选择了input去表达状态的选中与否（因为不同于hover状态是所有盒子都具备的，visited（or checked）状态只有a标签和input的radio type有）；

以上，详细解释了为什么用input，最后强调一下，这里的a标签只起到一个语义化的作用。

css3生成三角形看我的这篇博文 点这里

Browser and device support

  • Internet Explorer 8 and @font-face

    • IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

  • IE Compatibility modes

    • CSS3 is not supported in the old Internet Explorer compatibility modes. To be sure you’re using the latest rendering mode for IE, consider including the appropriate tag in your pages:
1
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirm the document mode by opening the debugging tools: press F12 and check the “Document Mode”.

This tag is included in all of Bootstrap’s documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

See this StackOverflow question for more information.

1
提一句：标题和正文的动画可以用`animate.css`实现。我们这里是为了学习css3就不多做解释了，感性兴趣的可以了解下。

参考

慕课网 css3实现网页平滑过渡效果
Browser and device support
http://www.dafont.com/
http://www.google.com/webfonts
@font-face
CSS-Only Responsive Layout with Smooth Transitions

  |   字数统计: 973(字)

发表于 | 分类于 | 阅读次数

01-bootstrap组件简单实现网站布局

效果

技术点

  • 用<div class="container"></div>将元素包裹起来实现居中

  • 栅格化布局

  • jumbotron组件，list-group组件 ，nav组件

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
	<nav class="navbar navbar-inverse">
  <div class="container-fluid container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">镜心的小树屋</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contant</a></li>
        <li><a href="#">About</a></li>
      </ul>
   
      
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
	<div class="container">
		<div class="row">
			<div class="col-sm-9">
				<p class="pull-right visible-xs">
					<button class="btn-xs btn btn-primary">Toggle</button>
				</p>
				<div class="jumbotron">
				  <h1>Hello, world!</h1>
				  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				  </p>
				  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
				</div>
				<div class="row">
					<div class="col-6 col-sm-6 col-lg-4">
						<h2>headlinw</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a href="" class="btn btn-default">View details</a>
					</div>
					<div class="col-6 col-sm-6 col-lg-4">
						<h2>headlinw</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a href="" class="btn btn-default">View details</a>
					</div>
					<div class="col-6 col-sm-6 col-lg-4">
						<h2>headlinw</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a href="" class="btn btn-default">View details</a>
					</div>
					<div class="col-6 col-sm-6 col-lg-4">
						<h2>headlinw</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a href="" class="btn btn-default">View details</a>
					</div>
					<div class="col-6 col-sm-6 col-lg-4">
						<h2>headlinw</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a href="" class="btn btn-default">View details</a>
					</div>
					<div class="col-6 col-sm-6 col-lg-4">
						<h2>headlinw</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a href="" class="btn btn-default">View details</a>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<ul class="list-group">
				  <li class="list-group-item">Cras justo odio</li>
				  <li class="list-group-item">Dapibus ac facilisis in</li>
				  <li class="list-group-item">Morbi leo risus</li>
				  <li class="list-group-item">Porta ac consectetur ac</li>
				  <li class="list-group-item">Vestibulum at eros</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

参考

bootstrap 组件
慕课网 响应式布局

  |   字数统计: 790(字)

发表于 | 分类于 | 阅读次数

CSS3实现图片阴影效果

上图为曲线阴影
下图为翘边阴影

实现原理 ：在图片下叠加一层，使其边框显示在图片边缘 。上图叠加了一层，下图叠加了两层 具体看慕课网的教程。

技术点

  • :before
  • :after
  • box-shadow
  • transform:skew()
1
border-radius: 100px/10px;

1
border-radius: 100px 10px;

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
body{
	font-family: Arial;
	font-size: 20px;
}
body,ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
.wrap{
	width: 70%;
	height:200px;
	margin:50px auto; 
	background: #fff;
}
.wrap h1{
	font-size: 20px;
	text-align: center;
	line-height: 200px;
}
.effect{
	position: relative;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;;
	-o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; ;
	-ms-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;;
}
.effect:after,.effect:before{
	content: '';
	background: #f00;
	position: absolute;
	z-index:-1;
	top: 50%;
	bottom: 0;
	left: 20px;
	right: 20px;
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.8);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	border-radius: 100px/10px;
}
.box{width: 980px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin:20px auto;
}
.box li{
	position: relative;
	width: 300px;
	height: 210px;
	float: left;
	background: #fff;
	margin:20px 10px;
	border:2px solid #efefef;
	box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-ms-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
}
.box li img{
	display: block;
	width: 290px;
	height: 200px;
	margin:5px;
}
.box li:before{
	content:'';
	position: absolute;
	z-index: -2;
	width: 90%;
	height: 80%;
	left: 20px;
	bottom:8px;
	background: transparent;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-transform:skew(-12deg) rotate(-4deg);
	-moz-transform:skew(-12deg) rotate(-4deg);
	-o-transform:skew(-12deg) rotate(-4deg);
	-ms-transform:skew(-12deg) rotate(-4deg);
	transform:skew(-12deg) rotate(-4deg);
}
.box li:after{
	content:'';
	position: absolute;
	z-index: -2;
	width: 90%;
	height: 80%;
	right: 20px;
	bottom:6px;
	background: transparent;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-transform:skew(12deg) rotate(4deg);
	-moz-transform:skew(12deg) rotate(4deg);
	-o-transform:skew(12deg) rotate(4deg);
	-ms-transform:skew(12deg) rotate(4deg);
	transform:skew(12deg) rotate(4deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实现图片阴影效果(曲线阴影和翘边阴影) | 镜心书社</title>
	<link rel="stylesheet" type="text/css" href="style/pic_shadow.css">
</head>
<body>
	<div class="wrap effect">
		<h1>Shadow Effect</h1>
	</div>
	<ul class="box">
		<li><img src="images/1 (1).jpg" alt=""></li>
		<li><img src="images/1 (2).jpg" alt=""></li>
		<li><img src="images/1 (3).jpg" alt=""></li>
	</ul>
</body>
</html>

慕课网 CSS3实现“图片阴影”效果

  |   字数统计: 1,563(字)

发表于 | 分类于 | 阅读次数

js几种事件处理程序

微信公众号阅读

事件就是用户或浏览器自身执行的某种动作，如click,laod,mouseover都是事件的名称。

事件流描述的是从页面中接收事件的顺序。

事件处理程序就是对事件作出响应的函数。事件处理程序的名字以“on”开头，如click事件对应的事件处理程序的名称为onclick。

为事件指定处理程序的方式有多种，如：HTML事件处理程序、DMO0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。

（1）html事件处理程序

即：将事件处理程序，写在相应的html标签中。
eg:

1
<input type="button" value="click me" onclick="alert("hello")" />

缺点：①存在一个时间差，当用户在html元素一出现在页面上就去触发相应的事件时，事件的处理程序可能还不具备执行条件（比如说调用的函数还木有被解析），就会引发错误。
eg:

1
2
<input type="button" value="click me" onclick="message()" />
<script type="text/JavaScript">
function message(){ 
        alert("hello world");
}

因为调用的函数处于按钮的下方，如果在message函数被加载之前就点击了按钮就会引发错误。
②html和js代码耦合度太高，如果要改变事件处理程序，就要改动两个地方：html代码和javascript代码。

（2）DMO0级事件处理程序
eg:

1
2
3
4
var btn=document.getElementById("myBtn");
 btn.onclick=function(){
            alert(this.id)
};

注意：如果这段代码位于按钮之后，就有可能在一点时间内怎么点击都木有反应，因为在这段代码运行以前不会指定事件处理程序。

DMO0级事件处理程序被认为是元素的方法，换句话说，DMO0级事件处理程序是在元素的作用域中运行的，所以程序中的this引用当前元素。可以在事件处理程序中通过this访问元素的任何属性和方法。
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

也可删除指定的事件处理程序，只要将事件处理程序的属性设置为null就Ok了。
eg:

1
btn.onclick=null;

将处理程序设置为null以后，再点击按钮不会发生任何动作。

（3）DOM2级事件处理程序

DOM2级事件定义了两个方法，用于指定和删除事件处理程序。这两个操作分别为：addEventListener()和removeEventListner().所有的DOM节点都包含这两个方法。他们要接受3个参数，分别为：要处理的事件名，处理函数，布尔值。最后的布尔值参数如果为ture,表示在捕获阶段处理程序，如果为false，表示在冒泡阶段调用事件处理程序。

例如在按钮上为click添加事件处理程序，可以用下面的代码：

1
2
3
4
5
var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){
alert("hello world");false
});
//这里添加的事件处理程序也是依附于元素的的作用域

使用DOM2事件处理程序的优点是：可以为同一个元素添加多个事件处理程序。
例：

1
2
3
var btn=getElementById("myBtn");
	btn.addEventListner("click",function(){alert(this.id);},flase);
	btn.addEventListner("click",function(){alert("hello world");},flase);

结果：先显示id，后显示hello world。
通过addEventListner()添加的事件处理程序只能通过removeEventListner来删除。移除时使用的参数与添加事件处理程序的参数相同。另：通过addEventListner添加的匿名函数无法删除。

（4）IE事件处理程序。

IE添加和删除事件处理程序的函数分别为：attachEvent()和detachEvent();
这两个函数接收相同的两个参数：事件处理程序名与事件处理函数。由于IE只支持事件冒泡，所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。
例如：

1
2
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE在使用attachEvent方法的情况下，事件处理程序的作用域为全局作用域，因此this等于window。（在编写跨浏览器的代码时，记住这一点非常重要）。
与addEventListner类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序；
eg:

1
2
3
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

值得注意的是：这些事件的处理程序是按逆序触发的，也就是说，先弹出hello world 再弹出clicked。
detach()使用方法略。

（5）跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件，主要可以使用两个方法：
①使用能隔离浏览器差异的js库。
②自己编写最适合的事件处理方法。这里要用到能力检测，即：识别浏览器的能力。要保证代码能在大多数浏览器下一致的运行，只须关注冒泡阶段。

代码步骤如下：

首先要创建的方法是addHandler(用于处理跨浏览器的兼容性问题，这里没有给出具体代码),它的职责是视情况判定使用DOM0级方法，DOM2级方法，IE方法来添加事件。addHandler接收3个参数：要操作的元素、事件名称、事件处理程序函数。这个方法属于一个名叫EventUtil的对象。这里使用这个对象来处理浏览器之间的差异。
与addHandler对应的方法是removeHandler(),它也接受相同的参数。这个事件的职责是移除之前添加的事件处理程序。不论事件是以什么方式添加到对象中的，如果其他方法程序无效，则默认使用DOM0级方法。
使用EventUtil的方法如下：

1
2
3
4
5
6
7
var btn=document.getElementById("myBtn");
var handler=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()

没有考虑到所有的浏览器问题，例如IE中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

参考：

《javascript高级程序设计》13章

  |   字数统计: 1,297(字)

发表于 | 分类于 | 阅读次数

网页常用特效-导航类

简单头部导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color:#eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{list-style: none;}
		ul li{float: left;padding: 0 20px;line-height: 40px;text-align: center;}
		ul li a{text-decoration: none;color:#000;}
		ul li:hover{background-color:#666; }
		ul li:hover a{color: #fff;}
	</style>
</head>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li><a href="#" title="">前端</a>
				<!-- <ul>
					<li>Javascript</li>
					<li>jQuery</li>
					<li>HTML5</li>
				</ul> -->
			</li>
			<li><a href="#" title="">后端</a></li>
			<li><a href="#" title="">移动</a></li>
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算</a></li>
			<li><a href="#" title="">运维&测试</a></li>
		</ul>
	</nav>
</body>
</html>

这里有个小主意点：

1
2
3
4
5
6
ul li:hover{
	background-color:#666; 
}
ul li:hover a{
	color: #fff;
}

下拉菜单

这种在li上面实现hover胜在简单，但是有一个问题，如果我要给其中一个选项加上下拉菜单，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li><a href="#" title="">前端</a>
				<!-- 下拉菜单	-->
				<ul>
					<li>Javascript</li>
					<li>jQuery</li>
					<li>HTML5</li>
				</ul>
			</li>
			<li><a href="#" title="">后端</a></li>
			<li><a href="#" title="">移动</a></li>
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算</a></li>
			<li><a href="#" title="">运维&测试</a></li>
		</ul>
	</nav>

效果会成这样

让下拉菜单纵向显示

1
ul li ul li{float: none;background: #eee;margin-top:2px; }

效果

所以，我们之前不该在li上添加hover 而应该在li 下面的a添加 ，改成这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color: #eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{ list-style: none;}
		ul li{float: left;line-height: 40px;text-align: center;position: relative;}
		ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
		ul li a:hover{color: #fff;background-color:#666; }
		
		ul li ul li{float: none;background: #eee;margin-top:2px; }
		ul li ul{position: absolute;left: 0px;top:40px;display: none;}
		ul li ul a{width: 80px;} 
		ul li ul li a:hover{background-color:blue;
		}
		ul li:hover ul {display: block}
	</style>
</head>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li><a href="#" title="">前端</a>
	<!-- 下拉菜单			 -->
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">HTML5</a></li>
				</ul>
			</li>
			<li><a href="#" title="">后端</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Python</a></li>
				</ul>				
			</li>
			<li><a href="#" title="">移动</a>
				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">IOS</a></li>
					<li><a href="#">Unity 3D</a></li>
				</ul>
			</li>				
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算&大数据</a></li>
			<li><a href="#" title="">运维&测试</a></li>
			<li><a href="#" title="">UI设计</a></li>
			
		</ul>
	</nav>
</body>
</html>

javascript实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color: #eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{ list-style: none;}
		ul li{float: left;line-height: 40px;text-align: center;position: relative;}
		ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
		ul li a:hover{color: #fff;background-color:#666; }
		
		ul li ul li{float: none;background: #eee;margin-top:2px; }
		ul li ul{position: absolute;left: 0px;top:40px;display: none;}
		ul li ul a{width: 80px;} 
		ul li ul li a:hover{background-color:blue;
		}
	
	</style>
</head>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#" title="">前端</a>
	<!-- 下拉菜单			 -->
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">HTML5</a></li>
				</ul>
			</li>
			<li><a href="#" title="">后端</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Python</a></li>
				</ul>				
			</li>
			<li><a href="#" title="">移动</a>
				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">IOS</a></li>
					<li><a href="#">Unity 3D</a></li>
				</ul>
			</li>				
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算&大数据</a></li>
			<li><a href="#" title="">运维&测试</a></li>
			<li><a href="#" title="">UI设计</a></li>
			
		</ul>
	</nav>
	<script type="text/javascript">
		function showsubmenu(li){
			var submenu=li.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}
		function hidesubmenu(li){
			var submenu = li.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
	</script>
</body>
</html>

jQuery实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color: #eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{ list-style: none;}
		ul li{float: left;line-height: 40px;text-align: center;position: relative;}
		ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
		ul li a:hover{color: #fff;background-color:#666; }
		
		ul li ul li{float: none;background: #eee;margin-top:2px; }
		ul li ul{position: absolute;left: 0px;top:40px;display: none}
		ul li ul a{width: 80px;} 
		ul li ul li a:hover{background-color:blue;
		}
	   
	</style>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li class="navmenu"><a href="#" title="">前端</a>
	<!-- 下拉菜单			 -->
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">HTML5</a></li>
				</ul>
			</li>
			<li class="navmenu"><a href="#" title="">后端</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Python</a></li>
				</ul>				
			</li>
			<li class="navmenu"><a href="#" title="">移动</a>
				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">IOS</a></li>
					<li><a href="#">Unity 3D</a></li>
				</ul>
			</li>				
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算&大数据</a></li>
			<li><a href="#" title="">运维&测试</a></li>
			<li><a href="#" title="">UI设计</a></li>
			
		</ul>
	</nav>
	
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		
		$(function(){
			$(".navmenu").mouseover(function(){
				$(this).children("ul").show();
			})
			$(".navmenu").mouseout(function(){
				$(this).children("ul").hide();
			})
		})
	</script>
</body>
</html>