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
|
使用雪碧图的优点是可以减少加载网页时对服务器的请求次次数，可以合并多数的图片和小图标，不需要多个图片分别进行请求，同时```提高了页面的加载速度```。
> 本文我们通过使用阿里巴巴矢量图库内刺栗壳所提供的 icon 来进行演示，图片下载地址：https://gitee.com/analysis-of-river-snow/draw>ing-bed/raw/master/20210421225013.png
> 配合 http://tools.jb51.net/code/css_sprite 进行绘制
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="http://analysis-of-river-snow.gitee.io/xue-css/less/xue.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
</head>
<body>
<div class="xu-col-3">
<div class="or">
<p class="title"><span class="on-btn-1"></span>当感到无趣时</p>
<h1>让我们与世界交流下</h1>
</div>
<div class="or" style="text-align: right">
<p class="title"><span class="on-btn-2"></span>人生本芳华，不如</p>
<h2>定个闹钟提醒自己</h2>
</div>
<div class="or">
<p class="title"><span class="on-btn-3"></span>任何的想法</p>
<h2>拥有有实现的可能</h2>
</div>
<div class="or" style="text-align: right">
<p class="title"><span class="on-btn-4"></span>所有的肯定</p>
<h2>都是失败的积累</h2>
</div>
<div class="or">
<p class="title"><span class="on-btn-5"></span>满意时的笑容</p>
<h2>却抹去不了背后的付出</h2>
</div>
<div class="or" style="text-align: right">
<p class="title"><span class="on-btn-6"></span>爆发时</p>
<h2>小宇宙内蕴含无限可能</h2>
</div>
<div class="or">
<p class="title"><span class="on-btn-7"></span>世界很美</p>
<h2>打开快手，记录美好时光！</h2>
</div>
</div>
</body>
</html>
|
