-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
184 lines (183 loc) · 5.63 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
/>
<meta
name="keywords"
content="johan,johanbo,随朱波流,azhubaby,johnny,johnny joestar"
/>
<meta name="description" content="johan的代码示例效果合集" />
<title>代码示例效果合集</title>
<style>
li {
line-height: 1.5;
}
</style>
</head>
<body>
<a
class="github-fork-ribbon"
href="https://github.com/johanazhu/demo"
data-ribbon="Fork me on GitHub"
title="Fork me on GitHub"
>Fork me on GitHub</a
>
<h1>📺代码示例效果</h1>
<h2>📌CSS</h2>
<ul>
<li>
<a href="./水平垂直居中.html">水平垂直居中</a>
</li>
<li>
<a href="./左边固定，右边自适应.html">左边固定，右边自适应</a>
</li>
<li>
<a href="./圣杯布局与双飞翼布局/圣杯布局/index.html">圣杯布局</a>
</li>
<li>
<a href="./圣杯布局与双飞翼布局/双飞翼布局/index.html">双飞翼布局</a>
</li>
<li>
<a href="./三角形.html">三角形</a>
</li>
<li>
<a href="./BFC/margin塌陷.html">BFC——margin塌陷</a>
</li>
<li>
<a href="./BFC/margin合并.html">BFC——margin合并</a>
</li>
<li>
<a href="./BFC/自适应布局.html">BFC——自适应布局</a>
</li>
<li>
<a href="./进度条.html">进度条</a>
</li>
</ul>
<h2>📌自适应方案</h2>
<ul>
<li>
<a href="./自适应方案/rem/index.html">REM 布局(手写rem)</a>
</li>
<li>
<a href="./自适应方案/flexible/index.html">REM 布局(flexible)</a>
</li>
<li>
<a href="./自适应方案/vw/index.html">VW 布局</a>
</li>
<li>
<a href="./自适应方案/px/index.html">PX + CSS变量布局</a>
</li>
<li>
<a href="./自适应方案/media/index.html">媒体查询布局</a>
</li>
</ul>
<h2>📌懒加载方案</h2>
<ul>
<li>
<a href="./懒加载/index.html">监听图片高度实现懒加载</a>
</li>
<li>
<a href="./懒加载/getBoundingClientRect.html"
>getBoundingClientRect 实现懒加载</a
>
</li>
<li>
<a href="./懒加载/observer.html">IntersectionObserver 实现懒加载</a>
</li>
</ul>
<h2>📌渲染十万条数据解决方案</h2>
<ul>
<li>
<a href="./渲染十万条数据解决方案/虚拟列表/scroll/index.html"
>渲染十万条数据解决方案-虚拟列表-scroll</a
>
</li>
<li>
<a
href="./渲染十万条数据解决方案/虚拟列表/IntersectionObserver/index.html"
>渲染十万条数据解决方案-虚拟列表-IntersectionObserver</a
>
</li>
<li>
<a href="./渲染十万条数据解决方案/懒加载/scroll/index.html"
>渲染十万条数据解决方案-懒加载-scroll</a
>
</li>
<li>
<a
href="./渲染十万条数据解决方案/懒加载/getBoundingClientRect/index.html"
>渲染十万条数据解决方案-懒加载-getBoundingClientRect</a
>
</li>
<li>
<a
href="./渲染十万条数据解决方案/懒加载/IntersectionObserver/index.html"
>渲染十万条数据解决方案-懒加载-IntersectionObserver</a
>
</li>
<li>
<a href="./渲染十万条数据解决方案/时间分片/index.html"
>渲染十万条数据解决方案-时间分片-一次性所处渲染问题</a
>
</li>
<li>
<a href="./渲染十万条数据解决方案/时间分片/requestAnimationFrame.html"
>渲染十万条数据解决方案-时间分片-解决方案</a
>
</li>
</ul>
<h2>📌React</h2>
<ul>
<li>
<a href="./setState是同步还是异步/build/index.html"
>setState 是同步还是异步</a
>
</li>
<li>
<a href="./hash&history/hash.html">前端路由hash实现</a>
</li>
<li>
<a href="./hash&history/history.html">前端路由history实现</a>
</li>
</ul>
<h2>📌性能优化</h2>
<ul>
<li>
<a href="./防抖与节流/index.html">防抖与节流</a>
</li>
</ul>
<h2>📌网络缓存策略</h2>
<ul>
<li>
<a href="https://strong-cache.vercel.app/">强缓存</a>
</li>
<li>
<a href="https://negotiate-cache.vercel.app/">协商缓存</a>
</li>
</ul>
<h2>📌微信营销页面</h2>
<ul>
<li>
<a href="./WeChat/WeixinJSBridge.html">微信营销页面之WeixinJSBridge</a>
</li>
<li>
<a href="./WeChat/自动播放音乐.html">微信营销页面之自动播放音乐</a>
</li>
<li>
<a href="./WeChat/canvas-snapshot/index.html"
>微信营销页面之网页长按保存及识别二维码</a
>
</li>
</ul>
</body>
</html>