From ac636d968c32ebce510947b6a713a3c59a2673ae Mon Sep 17 00:00:00 2001 From: meowmeowmeowcat Date: Tue, 10 Aug 2021 08:33:41 +0800 Subject: 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 --- files/zh-cn/learn/css/css_layout/grids/index.html | 54 ++++++++++++++-------- .../learn/css/css_layout/introduction/index.html | 12 ++--- .../learn/css/css_layout/positioning/index.html | 31 +++++++------ .../learn/css/styling_text/fundamentals/index.html | 32 ++++++------- 4 files changed, 74 insertions(+), 55 deletions(-) (limited to 'files/zh-cn') 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

在规则里加入你的第二个声明。刷新页面后，你会看到子项们排进了新定义的网格中。

+
+

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

@@ -138,10 +140,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

这个定义里，第一列被分配了2fr可用空间，余下的两列各被分配了1fr的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，fr可以与一般的长度单位混合使用，比如grid-template-columns: 300px 2fr 1fr，那么第一列宽度是300px，剩下的两列会根据除去300px后的可用空间按比例分配。

+
+

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

@@ -190,10 +194,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

间隙距离可以用任何长度单位包括百分比来表示，但不能使用fr单位。

+
+

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

@@ -259,10 +265,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。

+
-
.container {
+
.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   grid-gap: 20px;
 }

+

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

@@ -318,10 +326,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

在你的文件中试试看，你也许可以用到以下的代码。

+
-
.container {
+
.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-auto-rows: minmax(100px, auto);
   grid-gap: 20px;
 }

+

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

@@ -404,10 +414,11 @@ footer { grid-row: 3; } +
+

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

@@ -508,10 +520,11 @@ footer {

刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。

+
+

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

@@ -612,10 +626,11 @@ footer { grid-row: 3; } +
+

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

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

每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。

-

正常布局流(Normal flow)

+

正常布局流(Normal flow)

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：

@@ -66,7 +66,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

默认情况下，浏览器的显示如下:

-

{{ EmbedLiveSample('正常布局流Normal_flow', '100%', 200) }}

+

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

@@ -349,7 +349,7 @@ p {
  • 粘性定位(Sticky positioning)是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位。
    • -

    简单定位示例

    +

    简单定位示例

    我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在下面这一个相同的HTML上：

    @@ -376,7 +376,7 @@ p {

    渲染效果如下:

    -

    {{ EmbedLiveSample('简单定位示例', '100%', 300) }}

    +

    {{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

    相对定位

    @@ -581,7 +581,7 @@ p {

    注意: 想要发现更多关于定位的信息，请参阅我们的Positioning和Practical positioning examples文章。

    -

    表格布局

    +

    表格布局

    HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。

    @@ -649,7 +649,7 @@ form p {

    结果如下：

    -

    {{ EmbedLiveSample('CSS_表格', '100%', '170') }}

    +

    {{ EmbedLiveSample('Table_layout', '100%', '170') }}

    你可以在 css-tables-example.html 看到预览版 (也可以见源码)

    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/定位 -

    文档流

    +

    文档流

    定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。

    @@ -74,7 +74,7 @@ span { border: 1px solid black; } -

    {{ EmbedLiveSample('文档流', '100%', 500) }}

    +

    {{ EmbedLiveSample('basic-flow', '100%', 500) }}

    在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。

    @@ -115,7 +115,7 @@ span {

    如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。

    -

    介绍 top, bottom, left,  right

    +

    介绍 top, bottom, left,  right

    {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

    @@ -164,7 +164,7 @@ span { } -

    {{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}

    +

    {{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

    酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

    @@ -172,7 +172,7 @@ span {

    注意： 你可以在 2_relative-positioning.html 查看这个例子 (see source code)。

    -

    绝对定位

    +

    绝对定位

    绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

    @@ -216,7 +216,7 @@ span { } -

    {{ EmbedLiveSample('绝对定位', '100%', 420) }}

    +

    {{ EmbedLiveSample('Absolute_positioning', '100%', 450) }}

    首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

    @@ -234,7 +234,7 @@ span {

    注意：你可以在3_absolute-positioning.html 查看这个例子(see source code)。

    -

    定位上下文

    +

    定位上下文

    哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).

    @@ -283,7 +283,7 @@ span { } -

    {{ EmbedLiveSample('定位上下文', '100%', 420) }}

    +

    {{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

    定位的元素现在相对于{{htmlelement("body")}}元素。

    @@ -291,7 +291,7 @@ span {

    注意：你可以在这里看到这个例子 4_positioning-context.html (see source code).

    -

    介绍 z-index

    +

    介绍 z-index

    所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？

    @@ -362,7 +362,7 @@ p:nth-of-type(1) { -

    {{ EmbedLiveSample('介绍_z-index', '100%', 400) }}

    +

    {{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

    请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

    @@ -370,7 +370,7 @@ p:nth-of-type(1) {

    注意：你可以在这里看到这个例子 5_z-index.html (see source code).

    -

    固定定位

    +

    固定定位

    还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

    @@ -448,7 +448,7 @@ p:nth-of-type(1) { } -

    {{ EmbedLiveSample('固定定位', '100%', 400) }}

    +

    {{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

    注意：你可以在这里看到这个例子6_fixed-positioning.html (see source code).

    @@ -458,6 +458,7 @@ p:nth-of-type(1) {

    还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

    +

    {{ EmbedLiveSample('Sticky_1', '100%', 200) }}

    @@ -539,8 +541,9 @@ p:nth-of-type(1) { } +
    -

    {{ EmbedLiveSample('颜色', '100%', 220) }}

    +

    {{ EmbedLiveSample('Color', '100%', 230) }}

    字体种类

    @@ -219,7 +219,7 @@ occasion such as this that he did.</p>

    注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

    -

    一个使用 font-family 的例子

    +

    一个使用 font-family 的例子

    让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

    @@ -243,7 +243,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
    -

    {{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

    +

    {{ EmbedLiveSample('A_font-family_example', '100%', 220) }}

    字体大小

    @@ -264,7 +264,7 @@ occasion such as this that he did.</p>

    你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

    -

    一个简单的 size 示例

    +

    一个简单的 size 示例

    当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

    @@ -298,9 +298,9 @@ p { font-family: Helvetica, Arial, sans-serif; } -

    {{ EmbedLiveSample('字体大小', '100%', 220) }}

    +

    {{ EmbedLiveSample('A_simple_sizing_example', '100%', 260) }}

    -

    字体样式，字体粗细，文本转换和文本装饰

    +

    字体样式，字体粗细，文本转换和文本装饰

    CSS 提供了 4 种常用的属性来改变文本的样子：

    @@ -374,7 +374,7 @@ p { font-family: Helvetica, Arial, sans-serif; } -

    {{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

    +

    {{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 260) }}

    文字阴影

    @@ -395,7 +395,7 @@ p {

    注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

    -

    多种阴影

    +

    多种阴影

    您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

    @@ -443,7 +443,7 @@ p { } -

    {{ EmbedLiveSample('多种阴影', '100%', 220) }}

    +

    {{ EmbedLiveSample('Hidden_example1', '100%', 260) }}

    注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

    @@ -453,7 +453,7 @@ p {

    有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

    -

    文本对齐

    +

    文本对齐

     {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

    @@ -504,9 +504,9 @@ p { }
    -

    {{ EmbedLiveSample('文本对齐', '100%', 220) }}

    +

    {{ EmbedLiveSample('Text_alignment', '100%', 260) }}

    -

    行高

    +

    行高

     {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

    @@ -553,9 +553,9 @@ p { } -

    {{ EmbedLiveSample('行高', '100%', 250) }}

    +

    {{ EmbedLiveSample('Hidden_example2', '100%', 300) }}

    -

    字母和单词间距

    +

    字母和单词间距

    {{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

    @@ -612,7 +612,7 @@ p { } -

    {{ EmbedLiveSample('字母和字间距', '100%', 250) }}

    +

    {{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}

    其他一些值得看一下的属性

    -- cgit v1.2.3-54-g00ecf