diff options
| author | meowmeowmeowcat <meowmeowcat1211@gmail.com> | 2021-08-10 08:33:41 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-10 08:33:41 +0800 |
| commit | ac636d968c32ebce510947b6a713a3c59a2673ae (patch) | |
| tree | d8df215528d1260d2b31cf92755a4316f630f27c /files/zh-cn/learn/css/css_layout | |
| parent | 31bc8af6d08abf6214e7785a86c11b3b9c2a6549 (diff) | |
| download | translated-content-ac636d968c32ebce510947b6a713a3c59a2673ae.tar.gz translated-content-ac636d968c32ebce510947b6a713a3c59a2673ae.tar.bz2 translated-content-ac636d968c32ebce510947b6a713a3c59a2673ae.zip | |
Fix live samples in Learn/CSS, zh-CN (#1961)
* Fix broken live examples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
* Fix broken live samples
Diffstat (limited to 'files/zh-cn/learn/css/css_layout')
| -rw-r--r-- | files/zh-cn/learn/css/css_layout/grids/index.html | 54 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/css_layout/introduction/index.html | 12 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/css_layout/positioning/index.html | 31 |
3 files changed, 58 insertions, 39 deletions
diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html index ab825e40e4..15b54cd485 100644 --- a/files/zh-cn/learn/css/css_layout/grids/index.html +++ b/files/zh-cn/learn/css/css_layout/grids/index.html @@ -83,10 +83,11 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>在规则里加入你的第二个声明。刷新页面后，你会看到子项们排进了新定义的网格中。</p> +<div id="Grid_1"> <div class="hidden"> <h6 id="简单的网格示例">简单的网格示例 </h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -100,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <div>One</div> <div>Two</div> <div>Three</div> @@ -110,11 +111,12 @@ translation_of: Learn/CSS/CSS_layout/Grids <div>Seven</div> </div> </pre> -<pre class="notranslate">.container { +<pre class="brush:css notranslate">.container { display: grid; grid-template-columns: 200px 200px 200px; } </pre> </div> +</div> <p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> @@ -138,10 +140,11 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>这个定义里，第一列被分配了<code>2fr</code>可用空间，余下的两列各被分配了<code>1fr</code>的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，<code>fr</code>可以与一般的长度单位混合使用，比如<code>grid-template-columns: 300px 2fr 1fr</code>，那么第一列宽度是<code>300px</code>，剩下的两列会根据除去<code>300px</code>后的可用空间按比例分配。</p> +<div id="Grid_2"> <div class="hidden"> <h6 id="使用了fr单位的简单网格示例">使用了fr单位的简单网格示例</h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -161,7 +164,7 @@ translation_of: Learn/CSS/CSS_layout/Grids } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <div>One</div> <div>Two</div> <div>Three</div> @@ -171,6 +174,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <div>Seven</div> </div> </pre> </div> +</div> <p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> @@ -190,10 +194,11 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>间隙距离可以用任何长度单位包括百分比来表示，但不能使用<code>fr</code>单位。</p> +<div id="Grid_3"> <div class="hidden"> <h6 id="添加了间隙的简单网格示例">添加了间隙的简单网格示例</h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -214,7 +219,7 @@ translation_of: Learn/CSS/CSS_layout/Grids } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <div>One</div> <div>Two</div> <div>Three</div> @@ -225,6 +230,7 @@ translation_of: Learn/CSS/CSS_layout/Grids </div> </pre> </div> +</div> <p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> @@ -259,10 +265,11 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。</p> +<div id="Grid_4"> <div class="hidden"> <h6 id="修改隐式网格尺寸的示例">修改隐式网格尺寸的示例</h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -276,7 +283,7 @@ translation_of: Learn/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <div>One</div> <div>Two</div> <div>Three</div> @@ -288,12 +295,13 @@ translation_of: Learn/CSS/CSS_layout/Grids </pre> </div> -<pre class="notranslate">.container { +<pre class="brush:css notranslate">.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-gap: 20px; }</pre> +</div> <p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> @@ -318,10 +326,11 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>在你的文件中试试看，你也许可以用到以下的代码。</p> +<div id="Grid_5"> <div class="hidden"> <h6 id="自动使用多列填充的网格">自动使用多列填充的网格</h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -336,7 +345,7 @@ translation_of: Learn/CSS/CSS_layout/Grids } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <div>One</div> <div>Two</div> <div>Three</div> @@ -347,12 +356,13 @@ translation_of: Learn/CSS/CSS_layout/Grids </div> </pre> </div> -<pre class="notranslate">.container { +<pre class="brush:css notranslate">.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; }</pre> +</div> <p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> @@ -404,10 +414,11 @@ footer { grid-row: 3; }</pre> +<div id="Grid_6"> <div class="hidden"> <h6 id="基于线的元素放置_2">基于线的元素放置</h6> -<pre class="notranslate"> body { +<pre class="brush:css notranslate"> body { width: 90%; max-width: 900px; margin: 2em auto; @@ -452,7 +463,7 @@ aside { } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <header>This is my lovely blog</header> <article> <h1>My article</h1> @@ -467,6 +478,7 @@ aside { <footer>Contact me@mysite.com</footer> </div> </pre> </div> +</div> <p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> @@ -508,10 +520,11 @@ footer { <p>刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。</p> +<div id="Grid_7"> <div class="hidden"> <h6 id="基于线的元素放置_3">基于线的元素放置</h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -557,7 +570,7 @@ footer { } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <header>This is my lovely blog</header> <article> <h1>My article</h1> @@ -571,6 +584,7 @@ footer { <footer>Contact me@mysite.com</footer> </div> </pre> </div> +</div> <p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> @@ -612,10 +626,11 @@ footer { grid-row: 3; }</pre> +<div id="Grid_8"> <div class="hidden"> <h6 id="一个CSS网格系统">一个CSS网格系统</h6> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -661,7 +676,7 @@ aside { } </pre> -<pre class="notranslate"><div class="container"> +<pre class="brush:html notranslate"><div class="container"> <header>This is my lovely blog</header> <article> <h1>My article</h1> @@ -676,6 +691,7 @@ aside { </div> </pre> </div> +</div> <p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html index a96e967bad..6a0b707111 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.html +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。</p> -<h2 id="正常布局流Normal_flow">正常布局流(Normal flow)</h2> +<h2 id="Normal_flow">正常布局流(Normal flow)</h2> <p>正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：</p> @@ -66,7 +66,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>默认情况下，浏览器的显示如下:</p> -<p>{{ EmbedLiveSample('正常布局流Normal_flow', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> <p>注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。</p> @@ -349,7 +349,7 @@ p { <li><strong>粘性定位(Sticky positioning)</strong>是一种新的定位方式，它会让元素先保持和<code>position: static</code>一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像<code>position: fixed</code>一样定位。</li> </ul> -<h3 id="简单定位示例">简单定位示例</h3> +<h3 id="Simple_positioning_example">简单定位示例</h3> <p>我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在下面这一个相同的HTML上：</p> @@ -376,7 +376,7 @@ p { <p>渲染效果如下:</p> -<p>{{ EmbedLiveSample('简单定位示例', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> <h3 id="相对定位">相对定位</h3> @@ -581,7 +581,7 @@ p { <p><strong>注意</strong>: 想要发现更多关于定位的信息，请参阅我们的<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>和<a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a>文章。</p> </div> -<h2 id="表格布局">表格布局</h2> +<h2 id="Table_layout">表格布局</h2> <p>HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。</p> @@ -649,7 +649,7 @@ form p { <p>结果如下：</p> -<p>{{ EmbedLiveSample('CSS_表格', '100%', '170') }}</p> +<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> <p>你可以在 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> 看到预览版 (也可以见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">源码</a>)</p> diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html index d5e21680d0..c49c904ac4 100644 --- a/files/zh-cn/learn/css/css_layout/positioning/index.html +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -33,7 +33,7 @@ original_slug: Learn/CSS/CSS_layout/定位 </tbody> </table> -<h2 id="文档流">文档流</h2> +<h2 id="basic-flow">文档流</h2> <p>定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。</p> @@ -74,7 +74,7 @@ span { border: 1px solid black; }</pre> -<p>{{ EmbedLiveSample('文档流', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('basic-flow', '100%', 500) }}</p> <p>在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。</p> @@ -115,7 +115,7 @@ span { <p>如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。</p> -<h3 id="介绍_top_bottom_left_right">介绍 top, bottom, left, right</h3> +<h3 id="Introducing_top_bottom_left_and_right">介绍 top, bottom, left, right</h3> <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 <code>.positioned</code> 规则中添加以下声明：</p> @@ -164,7 +164,7 @@ span { }</pre> </div> -<p>{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> <p>酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 <code>top: 30px;</code>一个力推动框的顶部，使它向下移动30px。</p> @@ -172,7 +172,7 @@ span { <p><strong>注意：</strong> 你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> 查看这个例子 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">see source code</a>)。</p> </div> -<h3 id="绝对定位">绝对定位</h3> +<h3 id="Absolute_positioning">绝对定位</h3> <p>绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：</p> @@ -216,7 +216,7 @@ span { }</pre> </div> -<p>{{ EmbedLiveSample('绝对定位', '100%', 420) }}</p> +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 450) }}</p> <p>首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……</p> @@ -234,7 +234,7 @@ span { <p><strong>注意：</strong>你可以在<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> 查看这个例子(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">see source code</a>)。</p> </div> -<h3 id="定位上下文">定位上下文</h3> +<h3 id="Positioning_contexts">定位上下文</h3> <p>哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Identifying the containing block</a>).</p> @@ -283,7 +283,7 @@ span { }</pre> </div> -<p>{{ EmbedLiveSample('定位上下文', '100%', 420) }}</p> +<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> <p>定位的元素现在相对于{{htmlelement("body")}}元素。</p> @@ -291,7 +291,7 @@ span { <p>注意：你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">see source code</a>).</p> </div> -<h3 id="介绍_z-index">介绍 z-index</h3> +<h3 id="Introducing_z-index">介绍 z-index</h3> <p>所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？</p> @@ -362,7 +362,7 @@ p:nth-of-type(1) { </pre> </div> -<p>{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> <p>请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。</p> @@ -370,7 +370,7 @@ p:nth-of-type(1) { <p><strong>注意：</strong>你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">see source code</a>).</p> </div> -<h3 id="固定定位">固定定位</h3> +<h3 id="Fixed_positioning">固定定位</h3> <p>还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。</p> @@ -448,7 +448,7 @@ p:nth-of-type(1) { }</pre> </div> -<p>{{ EmbedLiveSample('固定定位', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> <div class="note"> <p><strong>注意：</strong>你可以在这里看到这个例子<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">see source code</a>).</p> @@ -458,6 +458,7 @@ p:nth-of-type(1) { <p>还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。</p> +<div id="Sticky_1"> <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> @@ -491,6 +492,7 @@ p:nth-of-type(1) { top: 30px; left: 30px; }</pre> +</div> <p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> @@ -539,8 +541,9 @@ p:nth-of-type(1) { } </pre> +<div id="Sticky_2"> <div class="hidden"> -<pre class="notranslate">body { +<pre class="brush:css notranslate">body { width: 500px; height: 1400px; margin: 0 auto; @@ -557,7 +560,7 @@ dt { } </pre> -<pre class="notranslate"><h1>Sticky positioning</h1> +<pre class="brush:html notranslate"><h1>Sticky positioning</h1> <dl> <dt>A</dt> |