unslug zh-cn: move

7 files changed, 391 insertions, 310 deletions

diff --git a/files/zh-cn/web/progressive_web_apps/添加到主屏幕/index.html b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html
index a0915ea9d2..a0915ea9d2 100644
--- a/files/zh-cn/web/progressive_web_apps/添加到主屏幕/index.html
+++ b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html
diff --git a/files/zh-cn/web/progressive_web_apps/加载/index.html b/files/zh-cn/web/progressive_web_apps/loading/index.html
index 7f45a3c278..7f45a3c278 100644
--- a/files/zh-cn/web/progressive_web_apps/加载/index.html
+++ b/files/zh-cn/web/progressive_web_apps/loading/index.html
diff --git a/files/zh-cn/web/progressive_web_apps/network_independent/index.html b/files/zh-cn/web/progressive_web_apps/network_independent/index.html
deleted file mode 100644
index 4b8b532173..0000000000
--- a/files/zh-cn/web/progressive_web_apps/network_independent/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: 网络独立
-slug: Web/Progressive_web_apps/Network_independent
-tags:
-  - Application Shell
-  - IndexedDB
-  - PWA
-  - Progressive web apps
-  - Service Workers
-  - Web Storage
-  - localStorage
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Network_independent
----
-<div class="column-container summary">
-<div class="column-11">当网络不可靠，甚至不存在时，现代网络应用程序仍可以工作。没有更多的空白连接错误页面或恐龙穿过沙漠。除了离线高速缓存和服务工作者之外，UI和内容之间的一个明确的分隔可让您存储应用程序的数据和核心资产，以备将来使用。</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div>
-</div>
-
-<p>The basic ideas behind network independence are to be able to:</p>
-
-<ul>
- <li>Revisit a site and get its contents even if no network is available.</li>
- <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li>
- <li>Control what is shown to the user in situations where there is no connectivity.</li>
-</ul>
-
-<h2 id="核心指南">核心指南</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt>
- <dd>A simple guide for those new to the Service Worker API.</dd>
- <dt><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></dt>
- <dd>The basics of IndexedDB, explained in detail.</dd>
- <dt><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></dt>
- <dd>The Web storage API made simple.</dd>
- <dt><a href="https://developers.google.com/web/updates/2015/11/app-shell">Instant Loading Web Apps with An Application Shell Architecture</a></dt>
- <dd>A guide to using the App Shell coding pattern to create apps that load quickly.</dd>
-</dl>
-
-<h2 id="技术">技术</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">技术</th>
-   <th scope="col">描述</th>
-   <th scope="col">支持概览</th>
-   <th scope="col">最新规范</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td>
-   <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td>
-   <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td>
-   <td>{{SpecName('Service Workers')}}</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></td>
-   <td>A transactional database system that allows complex client-side data storage to be controlled via JavaScript.</td>
-   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/API/IndexedDB_API#Browser_compatibility">more detail</a>)</td>
-   <td>{{SpecName('IndexedDB')}}</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a></td>
-   <td>A simple API for storing name-value pairs on the client-side.</td>
-   <td>Widespread (<a href="/en-US/docs/Web/API/Web_Storage_API#Browser_compatibility">more detail</a>)</td>
-   <td>{{SpecName('Web Storage')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="工具">工具</h2>
-
-<dl>
- <dt><a href="http://mozilla.github.io/localForage/">localForage</a></dt>
- <dd>A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.</dd>
- <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
- <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd>
- <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt>
- <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd>
- <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt>
- <dd>A node module to generate service worker code that will precache specific resources.</dd>
- <dt><a href="https://www.talater.com/upup/">upup</a></dt>
- <dd>A tiny script that makes sure your site is always there for your users.</dd>
-</dl>
-
-<h2 id="参见">参见</h2>
-
-<dl>
- <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt>
- <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd>
-</dl>
diff --git a/files/zh-cn/web/progressive_web_apps/re-engageable/index.html b/files/zh-cn/web/progressive_web_apps/re-engageable/index.html
deleted file mode 100644
index 0ff507d2e6..0000000000
--- a/files/zh-cn/web/progressive_web_apps/re-engageable/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Re-engageable
-slug: Web/Progressive_web_apps/Re-engageable
-tags:
-  - Modern web apps
-  - Notifications API
-  - Progressive web apps
-  - Push API
-  - Service Workers
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Re-engageable
----
-<div class="column-container summary">
-<div class="column-11">原生平台一个主要优势是，用户可以轻松通过更新或加载新内容，即使用户没有正在查看应用程序或者使用他们的设备。现在的Web应用程序现在也可以使用Web Push API等技术实现这样的功能。</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div>
-</div>
-
-<h2 id="核心指南">核心指南</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt>
- <dd>A simple guide for those new to the Service Worker API.</dd>
- <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></dt>
- <dd>Learn the essentials behind the Web Push API.</dd>
- <dt><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></dt>
- <dd>Web notifications in a nutshell.</dd>
-</dl>
-
-<h2 id="技术">技术</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">技术</th>
-   <th scope="col">描述</th>
-   <th scope="col">浏览器支持</th>
-   <th scope="col">最新规范</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td>
-   <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td>
-   <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td>
-   <td>{{SpecName('Service Workers')}}</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/Push_API">Push API</a></td>
-   <td>When subscribed to, the push service provides an endpoint that can be used by a server to send a push message to a web app under the control of a particular service worker.</td>
-   <td>Experimental: chrome and Firefox (<a href="/en-US/docs/Web/API/Push_API#Browser_Compatibility">more detail</a>)</td>
-   <td>{{SpecName("Push API")}}</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></td>
-   <td>Fires system notifications directly from web applications.</td>
-   <td>Widespreadin modern browsers (<a href="/en-US/docs/Web/API/Notifications_API#Browser_compatibility">more detail</a>)</td>
-   <td>{{SpecName('Web Notifications')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="工具">工具</h2>
-
-<dl>
- <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
- <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd>
- <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt>
- <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd>
- <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt>
- <dd>A node module to generate service worker code that will precache specific resources.</dd>
-</dl>
-
-<h2 id="参见">参见</h2>
-
-<dl>
- <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt>
- <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd>
-</dl>
diff --git a/files/zh-cn/web/progressive_web_apps/responsive/index.html b/files/zh-cn/web/progressive_web_apps/responsive/index.html
deleted file mode 100644
index 3177fc1c29..0000000000
--- a/files/zh-cn/web/progressive_web_apps/responsive/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Responsive design
-slug: Web/Progressive_web_apps/Responsive
-tags:
-  - Media Queries
-  - PWA
-  - Progressive web apps
-  - Responsive web design
-  - viewport
-translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks
-translation_of_original: Web/Progressive_web_apps/Responsive
----
-<div class="column-container summary">
-<div class="column-11"><span class="seoSummary">响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。</span></div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div>
-</div>
-
-<h2 id="核心指南">核心指南</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a></dt>
- <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd>
- <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a></dt>
- <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd>
-</dl>
-
-<h2 id="技术">技术</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Technology</th>
-   <th scope="col">Description</th>
-   <th scope="col">Support summary</th>
-   <th scope="col">Latest spec</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td>
-   <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td>
-   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td>
-   <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td>
-   <td>Controls viewport settings, primarily on mobile devices.</td>
-   <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br>
-    Viewport meta tag: Widespread across modern mobile devices</td>
-   <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
-   <td>A very useful CSS feature for creating flexible, responsive layouts.</td>
-   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td>
-   <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="工具">工具</h2>
-
-<dl>
- <dt><a href="https://modernizr.com/">Modernizr</a></dt>
- <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd>
- <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt>
- <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd>
-</dl>
-
-<h2 id="参见">参见</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt>
- <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd>
- <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Responsive_navigation_patterns">Responsive navigation patterns</a></dt>
- <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd>
-</dl>
diff --git a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html
new file mode 100644
index 0000000000..ef181eedcc
--- /dev/null
+++ b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html
@@ -0,0 +1,391 @@
+---
+title: 媒体
+slug: Web/Guide/CSS/Getting_started/Media
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+---
+<p>{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}</p>
+
+<p>本章节是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> <span style="line-height: 1.5;">指南的第14章也是最后一部分。 这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。</span></p>
+
+<h2 class="clearLeft" id="信息_Media">信息: Media</h2>
+
+<p>CSS的作用是将网页文档以更友好的展现方式呈现给用户。</p>
+
+<p><span style="line-height: 1.5;">例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。</span></p>
+
+<p>CSS通过使用{{CSSXref("@media")}} 的格式来对特定的媒介指定适配规则。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>我们的站点上有一个导航区域允许用户浏览。</p>
+
+<p>在标签语言中，导航区域父元素的id是 <code>nav-area.</code>(在 {{HTMLVersionInline(5)}}中, 可以使用 {{HTMLElement("nav")}} 元素代替带有id属性的 {{HTMLElement("div")}}。)</p>
+
+<p>为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:</p>
+
+<pre class="brush:css">@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+</div>
+
+<p><span style="line-height: 1.5;">一些常见的媒介类型</span><span style="line-height: 1.5;">:</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>screen</code></td>
+   <td>彩色计算机显示</td>
+  </tr>
+  <tr>
+   <td><code>print</code></td>
+   <td>打印（分页式媒体）</td>
+  </tr>
+  <tr>
+   <td style="padding-right: 1em;"><code>projection</code></td>
+   <td>投影</td>
+  </tr>
+  <tr>
+   <td><code>all</code></td>
+   <td>所有媒体 (默认)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details">
+<div class="tuto_type">更多</div>
+
+<p>一些其他指定媒介类型的规则。</p>
+
+<p><span style="line-height: 1.5;">类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">LINK</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">标签上添加media属性来指定媒介类型。</span></p>
+
+<p>在CSS中，你可以在样式表开头使用 {{CSSXref("@import")}} 一个url来引入另外的样式表，同时指定其媒介类型。</p>
+
+<p><span style="line-height: 1.5;">根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。</span></p>
+
+<p><span style="line-height: 1.5;">想获取媒介类型更多细节，请参考CSS规范中的</span> <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> <span style="line-height: 1.5;">部分。</span></p>
+
+<p>接下来将介绍更多 {{cssxref("display")}} <span style="line-height: 1.5;">属性的例子</span><span style="line-height: 1.5;">: </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a><span style="line-height: 1.5;">.</span></p>
+</div>
+
+<h3 id="打印">打印</h3>
+
+<p>CSS有一些特性能够支持打印和分页媒体。</p>
+
+<p> {{cssxref("@page")}} 规则能够设置页间距，对于双面打印，还可以分开设置 <code>@page:left</code> 和 <code>@page:right。</code></p>
+
+<p>对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。</p>
+
+<p>可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>这个规则把四个方向的页边距都设置为1 inch:</p>
+
+<pre class="brush:css">@page {margin: 1in;} </pre>
+
+<p><span style="line-height: 1.5;">这个规则确保每个H1元素都从新的一页开始</span>:</p>
+
+<pre class="brush:css">h1 {page-break-before: always;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>想获取更多细节，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> 部分。</p>
+
+<p><span style="line-height: 1.5;">像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。</span></p>
+</div>
+
+<h3 id="用户界面">用户界面</h3>
+
+<p><span style="line-height: 1.5;">CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。</span></p>
+
+<p>并没有针对用户界面设备的特殊媒介类型。</p>
+
+<p>下面有五种特殊的选择器:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":hover")}}</code></td>
+   <td>当鼠标悬浮任何E元素上</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":focus")}}</code></td>
+   <td>当元素获得键盘焦点</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":active")}}</code></td>
+   <td>当元素是当前的活动元素</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":link")}}</code></td>
+   <td>当元素超链接到一个url但是用户还没有访问过</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":visited")}}</code></td>
+   <td>当元素超链接到一个url但是用户已经访问过</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注意: </strong>在 {{gecko("2.0")}} <em>中可获得的 :visited 选择器信息是有限的。更过细节请参照</em><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a><span style="line-height: 1.5;"> 。</span></p>
+</div>
+
+<p> {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr style="cursor: pointer;">
+   <td><code>pointer</code></td>
+   <td>指示超链接</td>
+  </tr>
+  <tr style="cursor: wait;">
+   <td><code>wait</code></td>
+   <td>表明程序无法接受输入</td>
+  </tr>
+  <tr style="cursor: progress;">
+   <td><code>progress</code></td>
+   <td>表明程序正在运行，但是仍可以接受输入</td>
+  </tr>
+  <tr style="cursor: default;">
+   <td><code>default</code></td>
+   <td>默认（通常是箭头）</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。<br>
+ 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。</p>
+
+<p>一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 <strong>disabled</strong> 属性和 <strong>readonly</strong> 属性。选择器可以通过方括: <code>{{mediawiki.external('disabled')}}</code> 或者 <code>{{mediawiki.external('readonly')}}来指定这些属性。</code></p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p><span style="line-height: 1.5;">这些规则规定了按钮在用户使用时动态变化的样式</span>:</p>
+
+<pre class="brush:css">.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  } </pre>
+
+<p><span style="line-height: 1.5;">这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明</span>:</p>
+
+<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+       <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+       <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+      </tr>
+      <tr style="line-height: 25%;">
+       <td> </td>
+      </tr>
+      <tr style="font-style: italic;">
+       <td>disabled</td>
+       <td>normal</td>
+       <td>active</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多</div>
+
+<p>获取更多关于CSS用户界面的信息，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> 部分。</p>
+
+<p><span style="line-height: 1.5;">本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。</span></p>
+</div>
+
+<h2 id="实践_打印文档">实践: 打印文档</h2>
+
+<ol>
+ <li>创建一个新的HTML文档, <code>doc4.html</code>. 把下面的HTML代码粘贴过去:
+
+  <pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Print sample&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style4.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Section A&lt;/h1&gt;
+    &lt;p&gt;This is the first section...&lt;/p&gt;
+    &lt;h1&gt;Section B&lt;/h1&gt;
+    &lt;p&gt;This is the second section...&lt;/p&gt;
+    &lt;div id="print-head"&gt;
+      Heading for paged media
+    &lt;/div&gt;
+    &lt;div id="print-foot"&gt;
+      Page:
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>创建一个新的样式表, <code>style4.css</code>. 把下面的HTML代码粘贴过去:
+  <pre class="brush:css">/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+</pre>
+ </li>
+ <li>在浏览器中查看文档，你会看到它使用的是默认样式。</li>
+ <li>打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。
+  <table>
+   <tbody>
+    <tr>
+     <td>
+      <table style="border: 2px outset #36b; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section A</div>
+
+              <div style="font-size: 75%;">This is the first section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+     <td>
+      <table style="border: 2px outset #36b; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section B</div>
+
+              <div style="font-size: 75%;">This is the second section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;">
+ <caption>挑战</caption>
+ <tbody>
+  <tr>
+   <td><span style="line-height: 1.5;">把指定打印样式的规则转移到单独的CSS文件。</span>
+    <p>学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 <code style="font-style: normal;">style4.css</code> 样式表里去。</p>
+
+    <p>当鼠标放在标题时，改变颜色为蓝色。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">查看这些挑战的解决方案。</a></p>
+
+<h2 id="接下来">接下来?</h2>
+
+<p>如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">讨论区</a> 中不吝赐教。</p>
+
+<p>目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 <strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a> 来动态地改变规则。</strong></p>
diff --git a/files/zh-cn/web/progressive_web_apps/优势/index.html b/files/zh-cn/web/progressive_web_apps/优势/index.html
deleted file mode 100644
index 809b1edb38..0000000000
--- a/files/zh-cn/web/progressive_web_apps/优势/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 渐进式webApp优势
-slug: Web/Progressive_web_apps/优势
-translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications
-translation_of_original: Web/Progressive_web_apps/Advantages
----
-<p class="summary">以下是渐进式webApp所有的优势清单</p>
-
-<h2 id="Discoverable">Discoverable<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>The eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.</p>
-
-<p>Some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like <a href="http://ogp.me/">Open Graph</a>, which provides a format for specifying similar metadata in the HTML <code>&lt;head&gt;</code> using meta tags.</p>
-
-<p>The relevant web standard here is the <a href="/en-US/docs/Web/Manifest">Web app manifest</a>, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.</p>
-
-<ul>
-</ul>
-
-<h2 id="Installable">Installable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.</p>
-
-<p>Modern web apps can have this native app feel via properties set inside the Web app manifest, and via a feature available in modern smartphone browsers called <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen</a>.</p>
-
-<h2 id="Linkable">Linkable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process. This is how it has always been.</p>
-
-<h2 id="Network_independent">Network independent<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>Modern web apps can work when the network is unreliable, or even non-existent. The basic ideas behind network independence are to be able to:</p>
-
-<ul>
- <li>Revisit a site and get its contents even if no network is available.</li>
- <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li>
- <li>Control what is shown to the user in situations where there is no connectivity.</li>
-</ul>
-
-<p>This is achieved by a combination of technologies — <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> to control page requests (for example storing them offline), the <a href="/en-US/docs/Web/API/Cache">Cache API</a> for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store application data offline.</p>
-
-<h2 id="Progressive">Progressive<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers. We've been doing this for years with best practices such as <a href="/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>.</p>
-
-<h2 id="Re-engageable">Re-engageable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren't looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> for controlling pages, the <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> for sending updates straight from server to app via a service worker, and the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> for generating system notifications to help engage users when they're not in the browser.</p>
-
-<h2 id="Responsive">Responsive<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2>
-
-<p>Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.</p>
-
-<h2 id="Safe">Safe<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2>
-
-<p>The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another (<a href="https://twitter.com/andreasbovens/status/926965095296651264">example</a>).</p>
-
-<p> </p>