发表于   |   分类于

闭包概念：

  • 1.使用闭包主要是为了设计私有的方法和变量。
  • 2.闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包有三个特性:

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

发表于   |   分类于
  • 1.cookie数据存放在客户的浏览器上，session数据放在服务器上。
  • 2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。
  • 3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用COOKIE。
  • 4.单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
  • 5.所以个人建议：(1)将登陆信息等重要信息存放为SESSION；(2)其他信息如果需要保留，可以放在COOKIE中

发表于   |   分类于

在网页中使用那些原生应用里的动画效果会让用户感到神奇。本实例向你展示了如何使用CSS重新实现那些常见的iOS动画。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>使用变换和转换来实现iOS样式的翻卡效果</title>

</head>

<body>
<div class="viewPort">
    <div id="card" class="card flipped">
        <div class="frontView">HTML51 Niles</div>
        <div class="backView">Hello!</div>
    </div>
</div>  
</body>
</html>
阅读全文 »

发表于   |   分类于

网格字体三种主要实施方式：标准方式、@import和JavaScript

1.标准方式

首先Google会帮我们处理其他问题。标准实施方式只需要在HTML页面上添加一行代码：

1
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

当加载这个样式的时候，在页面添加这些声明：

1
2
3
4
5
6
@font-face{
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 400;
	src:local('Bitter-Regular'), url('http://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSg0zyEkA.woff') format('woff');
}

只需要简单的把字体名添加到样式里

1
2
3
4
h1{
	font-family: Bitter, Georgia, serif;
	font-weight: 400;
}

阅读全文 »

发表于   |   分类于

HTML

1
2
3
<div class="path">
	<img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar" />
</div>

CSS

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
/**
 * Animation along a circular path - Solution 2
 */
 
@keyframes spin {
	from {
		transform: rotate(0turn)
		           translateY(-150px) translateY(50%)
		           rotate(1turn)
	}
	to {
		transform: rotate(1turn)
		           translateY(-150px) translateY(50%)
		           rotate(0turn);
	}
}


.avatar {
	animation: spin 3s infinite linear;
}

/* Anything below this is just styling */

.avatar {
	display: block;
	width: 50px;
	margin: calc(50% - 25px) auto 0;
	border-radius: 50%;
	overflow: hidden;
}

.path {
	width: 300px; height: 300px;
	padding: 20px;
	margin: 100px auto;
	border-radius: 50%;
	background: #fb3;
}