-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
544 lines (455 loc) · 46.2 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
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
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
<html class="hide-aside" lang="zh-CN" data-theme="light"><head><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><!-- hexo injector head_begin start --><style type="text/css">.douban-card-block {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-height: 400px;
}
.douban-card {
display: flex;
margin: 30px 10px;
padding: 15px;
border-radius: 15px;
position: relative;
justify-content: center;
align-items: center;
overflow: hidden;
color: antiquewhite;
text-decoration: none;
}
.douban-card:hover {
text-decoration: none;
}
.douban-card-bgimg {
position: absolute;
width: 115%;
height: 115%;
filter: blur(15px) brightness(0.6);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.douban-card-img {
position: relative;
height: 130px;
width: 80px;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.douban-card-left:hover .douban-card-img {
filter: blur(5px) brightness(0.6);
transform: perspective(800px) rotateX(180deg);
}
.douban-card-left .douban-card-img {
transition: all 500ms ease;
}
.douban-card-left {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.douban-card-left .douban-card-status {
height: 130px;
width: 80px;
text-align: center;
font-weight: bold;
position: absolute;
left: 0;
top: 30%;
transform: rotateX(180deg);
backface-visibility: hidden;
transition: all 500ms ease;
}
.douban-card-left:hover .douban-card-status {
transform: perspective(800px) rotateX(0deg);
}
.douban-card-right {
position: relative;
display: flex;
flex-direction: column;
margin-left: 12px;
font-size: 16px;
font-family: "Courier New", Courier, monospace;
line-height: 1.3;
color: antiquewhite;
}
.douban-card-item {
margin-top: 4px;
}
</style><!-- hexo injector head_begin end --><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>kawu の 博客</title><meta name="keywords" content="kawuli kawul kawu"><meta name="author" content="Kawuli"><meta name="copyright" content="Kawuli"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><meta name="description" content="kawul`s Personal-web">
<meta property="og:type" content="website">
<meta property="og:title" content="kawu の 博客">
<meta property="og:url" content="http://kawul007.github.io/index.html">
<meta property="og:site_name" content="kawu の 博客">
<meta property="og:description" content="kawul`s Personal-web">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://kawul007.github.io/img/hh.gif">
<meta property="article:author" content="Kawuli">
<meta property="article:tag" content="kawuli kawul kawu">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://kawul007.github.io/img/hh.gif"><link rel="shortcut icon" href="/img/bitbug.ico"><link rel="canonical" href="http://kawul007.github.io/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: true,
post: true
},
runtime: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: true,
islazyload: false,
isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'kawu の 博客',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2023-02-06 22:16:04'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="/css/page.css"><link rel="stylesheet" href="/css/modify.css"><link rel="stylesheet" href="/css/video.css"><link rel="stylesheet" href="/css/universe.css"><link ref="stylesheet" href="/css/flip.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet"><style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite; -ms-animation: avatar_turn_around 1s linear infinite; animation: avatar_turn_around 1s linear infinite; }</style><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/hh.gif" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">11</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-tree"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fa fa-earth"></i><span> 博客总览</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-file"></i><span> 总览</span></a></li><li><a class="site-page child" href="/artitalk/"><i class="fa-fw fa-fw fas fa-comment"></i><span> 碎碎念</span></a></li></ul></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fas fa-fish"></i><span> 摸会儿鱼</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-headphones"></i><span> 听音乐</span></a></li><li><a class="site-page child" href="/gallery/"><i class="fa-fw fas fa-archive"></i><span> 精美壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fa fa-dog"></i><span> 豆瓣</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-film"></i><span> 电影</span></a></li><li><a class="site-page child" href="/books/"><i class="fa-fw fas fa-book"></i><span> 书籍</span></a></li></ul></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fas fa-cat"></i><span> 更多</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/link/"><i class="fa-fw fas fa-heart"></i><span> 链接</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-user-ninja"></i><span> 关于我</span></a></li></ul></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background: transparent"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">kawu の 博客</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-tree"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fa fa-earth"></i><span> 博客总览</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-file"></i><span> 总览</span></a></li><li><a class="site-page child" href="/artitalk/"><i class="fa-fw fa-fw fas fa-comment"></i><span> 碎碎念</span></a></li></ul></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fas fa-fish"></i><span> 摸会儿鱼</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-headphones"></i><span> 听音乐</span></a></li><li><a class="site-page child" href="/gallery/"><i class="fa-fw fas fa-archive"></i><span> 精美壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fa fa-dog"></i><span> 豆瓣</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-film"></i><span> 电影</span></a></li><li><a class="site-page child" href="/books/"><i class="fa-fw fas fa-book"></i><span> 书籍</span></a></li></ul></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw fas fa-cat"></i><span> 更多</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/link/"><i class="fa-fw fas fa-heart"></i><span> 链接</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-user-ninja"></i><span> 关于我</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">kawu の 博客</h1><div id="site-subtitle"><span id="subtitle"></span></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/post/9407f7ec.html" title="Yoo!😎"><img class="post_bg" src="/img/blog-img28.jpg" onerror="this.onerror=null;this.src='/img/404error.png'" alt="Yoo!😎"></a></div><div class="recent-post-info"><a class="article-title" href="/post/9407f7ec.html" title="Yoo!😎">Yoo!😎</a><div class="article-meta-wrap"><span class="article-meta"><i class="fas fa-thumbtack sticky"></i><span class="sticky">置顶</span><span class="article-meta-separator">|</span></span><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-07-12T02:17:14.000Z" title="发表于 2022-07-12 10:17:14">2022-07-12</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/post/9407f7ec.html#post-comment"><i class="fa-solid fa-spinner fa-spin"></i></a><span class="article-meta-label"> 条评论</span></span></div><div class="content">This is my very first post🥳🥳, and this will be where my personal learnings are shared and recorded. Of course, there will also be some daily contents😀. If you like this website, please leave me a message? Or follow me on my github👈. Have a nice day!!!!🦕
前端相关【更新中】React、CSS、JS、HTML相关
后端相关【更新中】SpringBoot、MyBatis-Plus、MySQL相关
日常分享【更新中】Bug记录、杂谈、随笔、EMO、
图册【更新中】精美壁纸、个人摄影七七八八
外语学习【maybe】English、Spanish、Japanese
</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/post/1ac195fa.html" title="HTTP - Status Code"><img class="post_bg" src="/img/blog-img67.jpg" onerror="this.onerror=null;this.src='/img/404error.png'" alt="HTTP - Status Code"></a></div><div class="recent-post-info"><a class="article-title" href="/post/1ac195fa.html" title="HTTP - Status Code">HTTP - Status Code</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-12-29T12:18:58.000Z" title="发表于 2022-12-29 20:18:58">2022-12-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/">计算机基础</a></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/post/1ac195fa.html#post-comment"><i class="fa-solid fa-spinner fa-spin"></i></a><span class="article-meta-label"> 条评论</span></span></div><div class="content">HTTP status code
HTTP 响应状态码用来表明特定 HTTP 请求是否成功完成。 响应被归为以下五大类：信息响应[Informational responses] (100–199)成功响应[Successful responses] (200–299)重定向消息[Redirection messages] (300–399)客户端错误响应[Client error responses ] (400–499)服务端错误响应 (500–599)[Server error responses ]等。
信息响应
status code
details
100 Continue
这个临时响应表明，迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它
101 Switching Protocols
该代码是响应客户端的 Upgrade (en-US) 请求头发送的，指明服务器即将切换的协议
102 Processing (WebDAV)
此代码表示服务器已收到并正在处理该请求，但当前没有响应可用
103 Early Hints
此状 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/post/2784a893.html" title="CSS布局--FlexBox"><img class="post_bg" src="/img/blog-img101.jpg" onerror="this.onerror=null;this.src='/img/404error.png'" alt="CSS布局--FlexBox"></a></div><div class="recent-post-info"><a class="article-title" href="/post/2784a893.html" title="CSS布局--FlexBox">CSS布局--FlexBox</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-07-14T10:06:30.000Z" title="发表于 2022-07-14 18:06:30">2022-07-14</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/">前端相关</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/CSS/">CSS</a></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/post/2784a893.html#post-comment"><i class="fa-solid fa-spinner fa-spin"></i></a><span class="article-meta-label"> 条评论</span></span></div><div class="content">FlexBox
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。父级容器属性要设置成display:flex
Flex容器属性值
flex-direction -> 取值：row【从左到右】,row-reverse【从右到左】,column【从上到下】,column-reverse【从下到上】；1234.flex-container { display: flex; flex-direction: row;/*column,row-reverse,column-reverse*/}
flex-wrap -> 取值：wrap【自行换行】,nowrap【默认值，不换行】,wrap-reverse【自行换行，从下到上排列元素】；1234.flex-container { display: flex; flex-wra ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/post/8baa85b6.html" title="CSS布局--浮动Float"><img class="post_bg" src="/img/blog-img30.jpg" onerror="this.onerror=null;this.src='/img/404error.png'" alt="CSS布局--浮动Float"></a></div><div class="recent-post-info"><a class="article-title" href="/post/8baa85b6.html" title="CSS布局--浮动Float">CSS布局--浮动Float</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-07-15T02:17:14.000Z" title="发表于 2022-07-15 10:17:14">2022-07-15</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/">前端相关</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/CSS/">CSS</a></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/post/8baa85b6.html#post-comment"><i class="fa-solid fa-spinner fa-spin"></i></a><span class="article-meta-label"> 条评论</span></span></div><div class="content">Float 布局
把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。</br>
属性值123float: none; //无浮动特性float: right; //向右float: left; //向左
清除浮动
clear 类 可选择 left、right、both 等值
123.cleared { clear: left; //可选择right/left/both来停止任何活动的右/左/左右浮动}
父级添加 overflow 属性，但是无法显示溢出区的部分
伪类 向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。
12345.wrapper::after { content: ""; //必须要有 clear: both; display: block;& ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/post/21eaa247.html" title="CSS布局--Grid布局"><img class="post_bg" src="/img/blog-img51.jpg" onerror="this.onerror=null;this.src='/img/404error.png'" alt="CSS布局--Grid布局"></a></div><div class="recent-post-info"><a class="article-title" href="/post/21eaa247.html" title="CSS布局--Grid布局">CSS布局--Grid布局</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-07-15T02:21:06.000Z" title="发表于 2022-07-15 10:21:06">2022-07-15</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/">前端相关</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/CSS/">CSS</a></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/post/21eaa247.html#post-comment"><i class="fa-solid fa-spinner fa-spin"></i></a><span class="article-meta-label"> 条评论</span></span></div><div class="content">Grid布局
CSS 网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件Grid是由一系列水平及垂直的线构成的一种布局模式。根据Grid，能够将设计元素进行排列，设计一系列具有固定位置以及宽度的元素的页面，使网站页面更加统一。一个Grid布局通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。跟弹性盒子一样只需给父级盒子添加display:grid其子项会变成网格项。
grid-template-columns & grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。属性取值：repeat(3,1fr) === auto auto auto === 1fr 1fr 1fr </br>其中1fr是网格容器中可用空间的一等份,通过repeat()来设置重复值；3个auto属性意味着吧容器中的可用空间3等分；
grid-columns-gap & grid-row-gap属性来控制列和行之间的间隔； ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/post/cd7ec1b.html" title="计算机网络-综述"><img class="post_bg" src="/img/blog-img64.jpg" onerror="this.onerror=null;this.src='/img/404error.png'" alt="计算机网络-综述"></a></div><div class="recent-post-info"><a class="article-title" href="/post/cd7ec1b.html" title="计算机网络-综述">计算机网络-综述</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-07-15T06:03:58.000Z" title="发表于 2022-07-15 14:03:58">2022-07-15</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/">计算机基础</a><i class="fas fa-angle-right article-meta-link"></i><a class="article-meta__categories" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E8%AE%A1%E7%BD%91/">计网</a></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/post/cd7ec1b.html#post-comment"><i class="fa-solid fa-spinner fa-spin"></i></a><span class="article-meta-label"> 条评论</span></span></div><div class="content">计算机网络—综述
从本章开始主要记录复习计算机网络相关知识点的过程以及对相关协议、实战以及例题等的记录。
综述
ISO/OSI七层模型
TCP/IP模型
简要说明
应用层
应用层
报文传输 SMTP、FTP、DNS、RCP
表示层
会话层
传输层
传输层
传输协议分组TCP、UDP
网络层
网际层
IP数据报IP(ICMP)、ARP、RARP
数据链路层
网络接口
帧网络接口协议（链路控制和媒体访问）
物理层
硬件（物理网络）
以太网令牌环FDDI、其他网络
物理层（Physical Layer）
激活、维持、关闭通信端点之间的机械特性、电气特性、功能特性以及过程特性。该层为上层协议提供了一个传输数据的可靠的物理媒体。简单的说，物理层确保原始的数据可在各种物理媒体上传输。物理层记住两个重要的设备名称，中继器（Repeater，也 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/hh.gif" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"></div><div class="author-info__name">Kawuli</div><div class="author-info__description">Don`t Squander It Thinking. Do!</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">11</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Kawul007"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">买了极便宜的域名，欢迎访问``给我留言！</div></div><div class="sticky_layout"><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/" style="font-size: 1.25em; color: rgb(115, 199, 155)">前端相关</a><a href="/tags/CSS/" style="font-size: 1.25em; color: rgb(51, 181, 89)">CSS</a><a href="/tags/HTML/" style="font-size: 1.25em; color: rgb(155, 145, 81)">HTML</a><a href="/tags/%E7%BD%91%E7%BB%9C%E7%9B%B8%E5%85%B3/" style="font-size: 1.45em; color: rgb(147, 107, 60)">网络相关</a><a href="/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" style="font-size: 1.35em; color: rgb(52, 166, 119)">计算机网络</a><a href="/tags/%E6%97%A5%E5%B8%B8/" style="font-size: 1.15em; color: rgb(151, 96, 182)">日常</a></div></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">11</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishdate="2022-06-30T16:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">7.9k</div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastpushdate="2023-02-06T14:16:03.935Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background: transparent"><div id="footer-wrap"><div class="copyright">©2020 - 2023 By Kawuli</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><div class="js-pjax"><script>(() => {
const getCommentUrl = () => {
const eleGroup = document.querySelectorAll('#recent-posts .article-title')
let urlArray = []
eleGroup.forEach(i=>{
urlArray.push(i.getAttribute('href'))
})
return urlArray
}
const getCount = () => {
const runTwikoo = () => {
twikoo.getCommentsCount({
envId: 'https://twikoo.kawul007.top/',
region: 'us-east-1',
urls: getCommentUrl(),
includeReply: false
}).then(function (res) {
document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
item.innerText = res[index].count
})
}).catch(function (err) {
console.log(err)
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(runTwikoo)
}
}
window.pjax ? getCount() : window.addEventListener('load', getCount)
})()</script><script>function subtitleType () {
if (true) {
window.typed = new Typed("#subtitle", {
strings: ["希望成功~~","参差多态，幸福本然","春风得意马蹄疾，一日看尽长安花","明年次日青云去，却笑人间举子忙","来日方长，未来可期","Do not Squander it thinking Do~","百尺竿头须进步，十方世界是全身"],
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '希望成功~~'
}
}
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
}
} else {
subtitleType()
}</script><script>(() => {
const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
if ($mermaidWrap.length) {
window.runMermaid = () => {
window.loadMermaid = true
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'
Array.from($mermaidWrap).forEach((item, index) => {
const mermaidSrc = item.firstElementChild
const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
const mermaidID = 'mermaid-' + index
const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
mermaidSrc.insertAdjacentHTML('afterend', svgCode)
})
})
}
const loadMermaid = () => {
window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
}
window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
}
})()</script></div><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Flip.min.js" integrity="sha512-byzUdBXaTSrgrlWDvkyU6TBkRSUUiI3EzVIdZtrYEUx1hFnsel9QmEs3QWpKo+8N+G9eOjSxQzFWF1PLq0+WVw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script defer="" src="/js/flip.js"></script><canvas id="universe"></canvas><script defer="" src="/js/universe.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-show-text.min.js" data-mobile="false" data-text="Hi,今天,学习了没？,Dont worry,Smile" data-fontsize="15px" data-random="true" async="async"></script><script src="//code.tidio.co/aumhbygu63ufz6cmn5bludxbj6zixpkc.js" async="async"></script><script>function onTidioChatApiReady() {
window.tidioChatApi.hide();
window.tidioChatApi.on("close", function() {
window.tidioChatApi.hide();
});
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
var chatBtnFn = () => {
document.getElementById("chat_btn").addEventListener("click", function(){
window.tidioChatApi.show();
window.tidioChatApi.open();
});
}
chatBtnFn()
</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
var pjax = new Pjax({
elements: 'a:not([target="_blank"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
})
document.addEventListener('pjax:send', function () {
// removeEventListener scroll
window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
typeof preloader === 'object' && preloader.initLoading()
document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
if (!window.aplayers[i].options.fixed) {
window.aplayers[i].destroy()
}
}
}
typeof typed === 'object' && typed.destroy()
//reset readmode
const $bodyClassList = document.body.classList
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
typeof disqusjs === 'object' && disqusjs.destroy()
})
document.addEventListener('pjax:complete', function () {
window.refreshFn()
document.querySelectorAll('script[data-pjax]').forEach(item => {
const newScript = document.createElement('script')
const content = item.text || item.textContent || item.innerHTML || ""
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
newScript.appendChild(document.createTextNode(content))
item.parentNode.replaceChild(newScript, item)
})
GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
// google analytics
typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});
// baidu analytics
typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
typeof preloader === 'object' && preloader.endLoading()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script><script async="" data-pjax="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --> <script data-pjax="">if(document.getElementsByClassName('recent-posts')[0] && (location.pathname ==='/tags'|| '/tags' ==='all')){
var parent = document.getElementsByClassName('recent-posts')[0];
var child = '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet"><div class="magnet_item"><a class="magnet_link" href="http://kawul007.github.io/tags/前端相关/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🐈 kawuの前端狂补！ (3)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://kawul007.github.io/tags/计算机网络/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🌍 kawuの基础整理！ (6)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://kawul007.github.io/tags/日常/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🐱👓 kawuの生活趣事！ (1)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><a class="magnet_link_more" href="http://kawul007.github.io/tags" style="flex:1;text-align: center;margin-bottom: 10px;">查看更多...</a></div></div>';
console.log('已挂载magnet')
parent.insertAdjacentHTML("afterbegin",child)}
</script><style>#catalog_magnet{flex-wrap: wrap;display: flex;width:100%;justify-content:space-between;padding: 10px 10px 0 10px;align-content: flex-start;}.magnet_item{flex-basis: calc(33.333333333333336% - 5px);background: #f2f2f2;margin-bottom: 10px;border-radius: 8px;transition: all 0.2s ease-in-out;}.magnet_item:hover{background: #b30070}.magnet_link_more{color:#555}.magnet_link{color:black}.magnet_link:hover{color:white}@media screen and (max-width: 600px) {.magnet_item {flex-basis: 100%;}}.magnet_link_context{display:flex;padding: 10px;font-size:16px;transition: all 0.2s ease-in-out;}.magnet_link_context:hover{padding: 10px 20px;}</style>
<style></style><script data-pjax="">function history_calendar_injector_config(){
var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
var item_html = '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>';
console.log('已挂载history_calendar')
// parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
}if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='all'|| 'all' ==='all')){
history_calendar_injector_config()
} </script><script data-pjax="" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><script async="" src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><script data-pjax="">
function butterfly_swiper_injector_config(){
var parent_div_git = document.getElementById('recent-posts');
var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl("post/21eaa247.html");" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/blog-img51.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-07-15</span><a class="blog-slider__title" onclick="pjax.loadUrl("post/21eaa247.html");" href="javascript:void(0);" alt="">CSS布局--Grid布局</a><div class="blog-slider__text">要是早点会用grid布局多好！可以省下很多时间做网页整体布局🤡</div><a class="blog-slider__button" onclick="pjax.loadUrl("post/21eaa247.html");" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl("post/cd7ec1b.html");" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/blog-img64.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-07-15</span><a class="blog-slider__title" onclick="pjax.loadUrl("post/cd7ec1b.html");" href="javascript:void(0);" alt="">计算机网络-综述</a><div class="blog-slider__text">计算机网络复习内容，整理在这里方便后续查看~</div><a class="blog-slider__button" onclick="pjax.loadUrl("post/cd7ec1b.html");" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl("post/8baa85b6.html");" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/blog-img30.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-07-15</span><a class="blog-slider__title" onclick="pjax.loadUrl("post/8baa85b6.html");" href="javascript:void(0);" alt="">CSS布局--浮动Float</a><div class="blog-slider__text">用对float布局便会发现一个新世界~搞出更多有趣布局啦🥳</div><a class="blog-slider__button" onclick="pjax.loadUrl("post/8baa85b6.html");" href="javascript:void(0);" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl("post/2784a893.html");" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/blog-img101.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-07-14</span><a class="blog-slider__title" onclick="pjax.loadUrl("post/2784a893.html");" href="javascript:void(0);" alt="">CSS布局--FlexBox</a><div class="blog-slider__text">flexbox是前端开发当中最为常见的布局之一，掌握它拿下好看的瀑布流不在话下！🤩</div><a class="blog-slider__button" onclick="pjax.loadUrl("post/2784a893.html");" href="javascript:void(0);" alt="">详情 </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
console.log('已挂载butterfly_swiper')
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
}
var elist = 'undefined'.split(',');
var cpage = location.pathname;
var epage = '/';
var flag = 0;
for (var i=0;i<elist.length;i++){
if (cpage.includes(elist[i])){
flag++;
}
}
if ((epage ==='all')&&(flag == 0)){
butterfly_swiper_injector_config();
}
else if (epage === cpage){
butterfly_swiper_injector_config();
}
</script><script defer="" src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer="" data-pjax="" src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><!-- hexo injector body_end end --></body></html>