Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
791 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| .markdown-section { | ||
| margin: 0 auto; | ||
| max-width: 1360px; | ||
| padding: 30px 15px 40px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .vuep { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .vuep-editor, | ||
| .vuep-preview, | ||
| .vuep-error { | ||
| border-radius: 2px; | ||
| height: inherit; | ||
| margin-right: 10px; | ||
| overflow: auto; | ||
| flex: 0 0 100%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .vuep-preview { | ||
| overflow: initial; | ||
| } | ||
|
|
||
| .content { | ||
| left: 360px; | ||
| } | ||
|
|
||
| .sidebar { | ||
| width: 360px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .markdown-section { | ||
| padding: 5px 30px 40px; | ||
| } | ||
|
|
||
| .markdown-section pre>code { | ||
| padding: 3px 5px; | ||
| } | ||
|
|
||
| h1 a:hover, | ||
| h2 a:hover { | ||
| text-decoration: none !important; | ||
| } | ||
|
|
||
| .sidebar h1, | ||
| .sidebar h2 { | ||
| font-size: 18px; | ||
| padding-left: 5px; | ||
| } | ||
|
|
||
| .sidebar ul li { | ||
| margin: 2; | ||
| } | ||
|
|
||
| .sidebar ul li a { | ||
| transition: all .2s; | ||
| } | ||
|
|
||
| .sidebar ul li a:hover { | ||
| text-decoration: none; | ||
| color: #42b983; | ||
| } | ||
|
|
||
| #gitalk-container { | ||
| width: unset !important; | ||
| max-width: 1300px; | ||
| padding: 0 30px; | ||
| } | ||
|
|
||
| .github-fork { | ||
| position: fixed; | ||
| top: 0; | ||
| right: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const gitalk = new Gitalk({ | ||
| clientID: '38238cb03b9966294d48', | ||
| clientSecret: '2550a359e8369c93d7dd1259f9db3984a117387f', | ||
| repo: 'CSS-Inspiration', | ||
| owner: 'chokcoco', | ||
| admin: ['chokcoco'], | ||
| distractionFreeMode: false, | ||
| id: md5(window.location.pathname) | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| ## 双飞翼布局 | ||
|
|
||
| 最常见的双飞翼布局实现方法。 | ||
|
|
||
| ### 需求 | ||
|
|
||
| 双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。 | ||
|
|
||
| 双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。 | ||
|
|
||
| ### 关键点 | ||
|
|
||
| + 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度 | ||
| + 双飞翼布局的关键点父元素不需要设置 padding | ||
| + 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 | ||
|
|
||
| HTML： | ||
|
|
||
| ```pug | ||
| // pug 模板引擎 | ||
| div.g-container | ||
| div.g-middle | ||
| div.g-middle-inner middle-inner | ||
| div.g-left left | ||
| div.g-right right | ||
| ``` | ||
|
|
||
| SCSS： | ||
| ```scss | ||
| .g-container { | ||
| position: relative; | ||
| height: 100vh; | ||
| min-width: 400px; | ||
|
|
||
| & > div { | ||
| height: 100vh; | ||
| float: left; | ||
| text-align: center; | ||
| color: #fff; | ||
| line-height: 100vh; | ||
| font-size: 3vw; | ||
| } | ||
| } | ||
|
|
||
| .g-middle { | ||
| position: relative; | ||
| width: 100%; | ||
| background: #cc6630; | ||
|
|
||
| .g-middle-inner { | ||
| margin: 0 200px; | ||
| } | ||
| } | ||
|
|
||
| .g-left { | ||
| position: relative; | ||
| width: 200px; | ||
| background: #ffcc00; | ||
| margin-left: -100%; | ||
| } | ||
|
|
||
| .g-right { | ||
| position: relative; | ||
| width: 200px; | ||
| background: pink; | ||
| margin-left: -200px; | ||
| } | ||
| ``` | ||
|
|
||
| 效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： | ||
|
|
||
| <iframe height='350' scrolling='no' title='双飞翼布局' src='//codepen.io/Chokcoco/embed/EdwzVW/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/EdwzVW/'>双飞翼布局</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>. | ||
| </iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| ## 圣杯布局 | ||
|
|
||
| 使用 flex 实现的圣杯布局。 | ||
|
|
||
| ### 需求 | ||
|
|
||
| 圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。 | ||
|
|
||
| 圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。 | ||
|
|
||
| ### 关键点 | ||
|
|
||
| + 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置 | ||
| + 圣杯布局的关键点父元素需要设置 padding | ||
| + 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 | ||
|
|
||
| HTML： | ||
|
|
||
| ```pug | ||
| // pug 模板引擎 | ||
| div.g-container | ||
| div.g-middle middle | ||
| div.g-left left | ||
| div.g-right right | ||
| ``` | ||
|
|
||
| SCSS： | ||
| ```scss | ||
| .g-container { | ||
| position: relative; | ||
| height: 100vh; | ||
| min-width: 400px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: nowrap; | ||
|
|
||
| & > div { | ||
| height: 100vh; | ||
| text-align: center; | ||
| color: #fff; | ||
| line-height: 100vh; | ||
| font-size: 3vw; | ||
| } | ||
| } | ||
|
|
||
| .g-middle { | ||
| order: 2; | ||
| flex: auto 1 0 ; | ||
| background: #cc6630; | ||
| } | ||
|
|
||
| .g-left { | ||
| order: 1; | ||
| flex: 200px 0 0; | ||
| background: #ffcc00; | ||
| } | ||
|
|
||
| .g-right { | ||
| order: 3; | ||
| flex: 200px 0 0; | ||
| background: pink; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| 效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： | ||
|
|
||
| <iframe height='350' scrolling='no' title='圣杯布局（flex）' src='//codepen.io/Chokcoco/embed/GYyNGw/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/GYyNGw/'>圣杯布局（flex）</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>. | ||
| </iframe> |
Oops, something went wrong.