Skip to content

Commit b79ae07

Browse files
webVueBlogwebVueBlog
committed
feat: docs 效果，选择器等
1 parent a348432 commit b79ae07

12 files changed

+249
-83
lines changed

‎.temp/app-enhancers/global-components-13.js renamed to ‎.temp/app-enhancers/global-components-1.js

File renamed without changes.

‎.temp/app-enhancers/global-components-14.js

-6
This file was deleted.

‎.temp/internal/app-enhancers.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import m0 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\0.js"
22
import m1 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\1.js"
33
import m2 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\data-block.js"
4-
import m3 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\global-components-14.js"
4+
import m3 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\global-components-11.js"
55
import m4 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\2.js"
66
import m5 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\3.js"
77
import m6 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\dynamic-pagation.js"

‎.temp/internal/page-components.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
* Generated by "@vuepress/internal-page-components"
33
*/
44
export default {
5-
"v-71b5b85d": () => import("C:\\temp\\awesome-css\\docs\\README.md"),
65
"v-d3bebd6a": () => import("C:\\temp\\awesome-css\\docs\\handbook\\transition.md"),
7-
"v-17d17d01": () => import("C:\\temp\\awesome-css\\docs\\result\\pullCurtain.md")
6+
"v-71b5b85d": () => import("C:\\temp\\awesome-css\\docs\\README.md"),
7+
"v-4b67aa6b": () => import("C:\\temp\\awesome-css\\docs\\result\\best-way-to-center-element.md"),
8+
"v-17d17d01": () => import("C:\\temp\\awesome-css\\docs\\result\\pullCurtain.md"),
9+
"v-226d16ea": () => import("C:\\temp\\awesome-css\\docs\\selector\\active.md"),
10+
"v-de1785ea": () => import("C:\\temp\\awesome-css\\docs\\selector\\after_before.md")
811
}

‎.temp/internal/routes.js

+17-32
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import GlobalLayout from "C:\\temp\\awesome-css\\node_modules\\@vuepress\\core\\
88

99
injectComponentOption(GlobalLayout, 'mixins', rootMixins)
1010
export const routes = [
11+
{
12+
name: "v-d3bebd6a",
13+
path: "/handbook/transition.html",
14+
component: GlobalLayout,
15+
beforeEnter: (to, from, next) => {
16+
ensureAsyncComponentsLoaded("Layout", "v-d3bebd6a").then(next)
17+
},
18+
},
1119
{
1220
name: "v-71b5b85d",
1321
path: "/",
@@ -21,11 +29,11 @@ export const routes = [
2129
redirect: "/"
2230
},
2331
{
24-
name: "v-d3bebd6a",
25-
path: "/handbook/transition.html",
32+
name: "v-4b67aa6b",
33+
path: "/result/best-way-to-center-element.html",
2634
component: GlobalLayout,
2735
beforeEnter: (to, from, next) => {
28-
ensureAsyncComponentsLoaded("Layout", "v-d3bebd6a").then(next)
36+
ensureAsyncComponentsLoaded("Layout", "v-4b67aa6b").then(next)
2937
},
3038
},
3139
{
@@ -37,43 +45,20 @@ export const routes = [
3745
},
3846
},
3947
{
40-
name: "v-b1564aac",
41-
path: "/tag/",
48+
name: "v-226d16ea",
49+
path: "/selector/active.html",
4250
component: GlobalLayout,
4351
beforeEnter: (to, from, next) => {
44-
ensureAsyncComponentsLoaded("Tags", "v-b1564aac").then(next)
52+
ensureAsyncComponentsLoaded("Layout", "v-226d16ea").then(next)
4553
},
46-
meta: {"pid":"tags","id":"tags"}
4754
},
4855
{
49-
path: "/tag/index.html",
50-
redirect: "/tag/"
51-
},
52-
{
53-
name: "v-ef9325c4",
54-
path: "/categories/",
56+
name: "v-de1785ea",
57+
path: "/selector/after_before.html",
5558
component: GlobalLayout,
5659
beforeEnter: (to, from, next) => {
57-
ensureAsyncComponentsLoaded("FrontmatterKey", "v-ef9325c4").then(next)
60+
ensureAsyncComponentsLoaded("Layout", "v-de1785ea").then(next)
5861
},
59-
meta: {"pid":"categories","id":"categories"}
60-
},
61-
{
62-
path: "/categories/index.html",
63-
redirect: "/categories/"
64-
},
65-
{
66-
name: "v-6319eb4e",
67-
path: "/timeline/",
68-
component: GlobalLayout,
69-
beforeEnter: (to, from, next) => {
70-
ensureAsyncComponentsLoaded("TimeLines", "v-6319eb4e").then(next)
71-
},
72-
meta: {"pid":"timeline","id":"timeline"}
73-
},
74-
{
75-
path: "/timeline/index.html",
76-
redirect: "/timeline/"
7762
},
7863
{
7964
path: '*',

‎.temp/internal/siteData.js

+71-41
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,27 @@ export const siteData = {
1515
]
1616
],
1717
"pages": [
18+
{
19+
"frontmatter": {},
20+
"regularPath": "/handbook/transition.html",
21+
"relativePath": "handbook/transition.md",
22+
"key": "v-d3bebd6a",
23+
"path": "/handbook/transition.html",
24+
"headers": [
25+
{
26+
"level": 2,
27+
"title": "演示：",
28+
"slug": "演示"
29+
},
30+
{
31+
"level": 2,
32+
"title": "指定要转换的属性",
33+
"slug": "指定要转换的属性"
34+
}
35+
],
36+
"lastUpdated": "2022/5/18 上午11:45:28",
37+
"lastUpdatedTimestamp": 1652845528000
38+
},
1839
{
1940
"frontmatter": {},
2041
"regularPath": "/",
@@ -37,6 +58,11 @@ export const siteData = {
3758
"title": "属性",
3859
"slug": "属性"
3960
},
61+
{
62+
"level": 3,
63+
"title": "选择器",
64+
"slug": "选择器"
65+
},
4066
{
4167
"level": 3,
4268
"title": "效果",
@@ -73,24 +99,10 @@ export const siteData = {
7399
},
74100
{
75101
"frontmatter": {},
76-
"regularPath": "/handbook/transition.html",
77-
"relativePath": "handbook/transition.md",
78-
"key": "v-d3bebd6a",
79-
"path": "/handbook/transition.html",
80-
"headers": [
81-
{
82-
"level": 2,
83-
"title": "演示：",
84-
"slug": "演示"
85-
},
86-
{
87-
"level": 2,
88-
"title": "指定要转换的属性",
89-
"slug": "指定要转换的属性"
90-
}
91-
],
92-
"lastUpdated": "2022/5/18 上午11:45:28",
93-
"lastUpdatedTimestamp": 1652845528000
102+
"regularPath": "/result/best-way-to-center-element.html",
103+
"relativePath": "result/best-way-to-center-element.md",
104+
"key": "v-4b67aa6b",
105+
"path": "/result/best-way-to-center-element.html"
94106
},
95107
{
96108
"frontmatter": {},
@@ -124,31 +136,30 @@ export const siteData = {
124136
"lastUpdatedTimestamp": 1652851964000
125137
},
126138
{
127-
"frontmatter": {
128-
"layout": "Tags",
129-
"title": "Tags"
130-
},
131-
"regularPath": "/tag/",
132-
"key": "v-b1564aac",
133-
"path": "/tag/"
134-
},
135-
{
136-
"frontmatter": {
137-
"layout": "FrontmatterKey",
138-
"title": "Categories"
139-
},
140-
"regularPath": "/categories/",
141-
"key": "v-ef9325c4",
142-
"path": "/categories/"
139+
"frontmatter": {},
140+
"regularPath": "/selector/active.html",
141+
"relativePath": "selector/active.md",
142+
"key": "v-226d16ea",
143+
"path": "/selector/active.html"
143144
},
144145
{
145-
"frontmatter": {
146-
"layout": "TimeLines",
147-
"title": "Timeline"
148-
},
149-
"regularPath": "/timeline/",
150-
"key": "v-6319eb4e",
151-
"path": "/timeline/"
146+
"frontmatter": {},
147+
"regularPath": "/selector/after_before.html",
148+
"relativePath": "selector/after_before.md",
149+
"key": "v-de1785ea",
150+
"path": "/selector/after_before.html",
151+
"headers": [
152+
{
153+
"level": 2,
154+
"title": "content的值：",
155+
"slug": "content的值"
156+
},
157+
{
158+
"level": 2,
159+
"title": "浏览器兼容：",
160+
"slug": "浏览器兼容"
161+
}
162+
]
152163
}
153164
],
154165
"themeConfig": {
@@ -209,6 +220,21 @@ export const siteData = {
209220
}
210221
]
211222
},
223+
{
224+
"title": "选择器",
225+
"path": "/selector/after_before",
226+
"collapsable": false,
227+
"children": [
228+
{
229+
"title": "::before和::after",
230+
"path": "/selector/after_before"
231+
},
232+
{
233+
"title": ":active",
234+
"path": "/selector/active"
235+
}
236+
]
237+
},
212238
{
213239
"title": "效果",
214240
"path": "/result/pullCurtain",
@@ -217,6 +243,10 @@ export const siteData = {
217243
{
218244
"title": "拉起窗帘",
219245
"path": "/result/pullCurtain"
246+
},
247+
{
248+
"title": "实现水平垂直居中最便捷的方法",
249+
"path": "/result/best-way-to-center-element"
220250
}
221251
]
222252
}

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,15 @@
1010

1111
- [transition](https://webvueblog.github.io/awesome-css/handbook/transition.html)
1212

13+
### 选择器
14+
15+
- [::before和::after](https://webvueblog.github.io/awesome-css/selector/after_before.html)
16+
- [:active](https://webvueblog.github.io/awesome-css/selector/active.html)
17+
1318
### 效果
1419

1520
- [拉起窗帘](https://webvueblog.github.io/awesome-css/result/pullCurtain.html)
21+
- [实现水平垂直居中最便捷的方法](https://webvueblog.github.io/awesome-css/result/best-way-to-center-element.html)
1622

1723
## 学前必读
1824

‎docs/.vuepress/config.js

+15
Original file line numberDiff line numberDiff line change
@@ -117,13 +117,28 @@ module.exports = {
117117
path: "/handbook/transition"
118118
}],
119119
},
120+
{
121+
title: "选择器",
122+
path: '/selector/after_before',
123+
collapsable: false, // 不折叠
124+
children: [{
125+
title: "::before和::after",
126+
path: "/selector/after_before"
127+
},{
128+
title: ":active",
129+
path: "/selector/active"
130+
}],
131+
},
120132
{
121133
title: "效果",
122134
path: '/result/pullCurtain',
123135
collapsable: false, // 不折叠
124136
children: [{
125137
title: "拉起窗帘",
126138
path: "/result/pullCurtain"
139+
},{
140+
title: "实现水平垂直居中最便捷的方法",
141+
path: "/result/best-way-to-center-element"
127142
}],
128143
},
129144
]

‎docs/README.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,15 @@
1010

1111
- [transition](https://webvueblog.github.io/awesome-css/handbook/transition.html)
1212

13+
### 选择器
14+
15+
- [::before和::after](https://webvueblog.github.io/awesome-css/selector/after_before.html)
16+
- [:active](https://webvueblog.github.io/awesome-css/selector/active.html)
17+
1318
### 效果
1419

15-
- [拉起窗帘](https://webvueblog.github.io/awesome-css/result/pullCurtain.html)
20+
- [拉起窗帘](https://webvueblog.github.io/awesome-css/result/pullCurtain.html)
21+
- [实现水平垂直居中最便捷的方法](https://webvueblog.github.io/awesome-css/result/best-way-to-center-element.html)
1622

1723
## 留言评论
1824

‎docs/result/best-way-to-center-element.md

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
实现水平垂直居中最便捷的方法
2+
3+
FFC/GFC 使 `margin: auto` 在垂直方向上居中元素。
4+
5+
`dispaly: flex`
6+
7+
在通过justify-content和align-self进行对齐之前，任何正的空闲空间都会分配给该维度中的自动页边距。
8+
9+
margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
10+
11+
html:
12+
13+
```js
14+
<div class="container">
15+
<div class="box"></div>
16+
</div>
17+
```
18+
19+
css:
20+
21+
```js
22+
/* 第一种：display: flex; margin: auto; */
23+
.container {
24+
width: 100vw;
25+
height: 100vh;
26+
display: flex;
27+
}
28+
29+
.box {
30+
width: 30vmin;
31+
height: 30vmin;
32+
background: green;
33+
margin: auto;
34+
}
35+
36+
/* 第二种 display: flex; */
37+
/* .container {
38+
width: 100vw;
39+
height: 100vh;
40+
display: flex;
41+
justify-content: center;
42+
}
43+
44+
.box {
45+
width: 30vmin;
46+
height: 30vmin;
47+
background: green;
48+
align-self: center;
49+
} */
50+
```
51+
52+
<iframe height="300" style="width: 100%;" scrolling="no" title="实现水平垂直居中最便捷的方法" src="https://codepen.io/webvueblog/embed/YzeVQaE?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
53+
See the Pen <a href="https://codepen.io/webvueblog/pen/YzeVQaE">
54+
实现水平垂直居中最便捷的方法</a> by 我是哪吒（达达） (<a href="https://codepen.io/webvueblog">@webvueblog</a>)
55+
on <a href="https://codepen.io">CodePen</a>.
56+
</iframe>

0 commit comments

Comments
 (0)