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/introduction/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'files/zh-cn/learn/css/css_layout/introduction') 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 看到预览版 (也可以见源码)

    -- cgit v1.2.3-54-g00ecf