Permalink
Browse files

Merge pull request #314 from xiaomiwujiecao/zn-cn

README-ZH-CN.md, Fixed a bug in the Chinese documentation
  • Loading branch information...
2 parents f1b9c5a + 4bf019b commit a344d9558db8d4cd538d3cada81e85c2f0be41ea @lojjic committed on GitHub Aug 8, 2017
View
@@ -13,8 +13,7 @@
`CSS3`承诺要消除所有这些影响! 但是大家都知道,由于`Internet Explorer`缺乏对这些任意特性的支持
-,在可预见的未来,我们必须耐心的用同样旧的乏味的技巧来实现,而不去使用CSS3,
-。
+,在可预见的未来,我们必须耐心的用同样旧的乏味的技巧来实现,而不去使用CSS3。
那我们到底如何做?
@@ -29,21 +28,14 @@
border-radius: 1em;
}
```
-
-
-This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or
-8, which all display a square box. However, add the following single rule to that CSS:
-这样就可以在现在的任何一种主流浏览器中都有一个圆角框,除了`IE 6,7`或者`8`
-,都显示一个方框以外。 但是,将以下单个规则添加到该CSS中:
+这样,除了`IE 6,7`或者`8`,都显示一个方框以外。在现代任意主流浏览器中都有一个圆角框, 然而,我们将以下单个规则添加到该CSS中:
```
#myElement {
...
behavior: url(PIE.htc);
}
```
-
-Now the exact same rounded corners appear in IE! That's all there is to it. No, really, I mean it.
现在,完全相同的圆角出现在IE中! 这就是它的一切。 是的,是真的,我的意思是。
`PIE`目前对以下`CSS3`特性有全面或部分的支持:
@@ -61,6 +53,6 @@ Now the exact same rounded corners appear in IE! That's all there is to it. No
我们正在开发其他功能,如`radial gradients``multiple box shadows`以及修复许多错误。
但它仍然是
-一个年轻的项目,并且还有很长的路要走,虽然它已经相当显着
+一个年轻的项目,并且还有很长的路要走,虽然它的效果已经相当显著了
-我们正在努力构建一个带有文档和示例的网站。 在此,对于贡献(代码,文档,测试)的开发者表示非常感谢
+我们正在努力构建一个带有文档和示例的[网站](http://css3pie.com/)。 在此,对于贡献(代码,文档,测试)的开发者表示由衷的感谢
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>PIE 文档: 关于 PIE</title>
+
+</head>
+<body>
+
+<h1>关于 PIE</h1>
+
+
+<!-- noformat on -->
+<p>CSS Level 3带来了一些非常强大的样式功能。 圆角,柔和的阴影,渐变
+ 填充等等。 这些都是我们的设计师朋友喜欢使用的元素,因为它们使
+ 站点更加具有吸引力,但实施起来总是很困难并且很耗时间,因为涉及复杂的精灵图,额外的非语义标记,
+ 大型JavaScript库和其他可爱的hacks。</p>
+<p>CSS3承诺要消除所有这些影响! 但是大家都知道,由于Internet Explorer缺乏对这些任意特性的支持,在可预见的未来, <strong>我们必须耐心的用同样旧的乏味的技巧来实现</strong>, 而不去使用CSS3。
+</p>
+
+<p><strong>那我们到底如何做?</strong></p>
+
+<p>PIE代表`Progressive Internet Explorer(渐进式的IE)。 它是IE附加的行为,当应用于元素时,允许IE来识别和显示一些CSS3属性。 试想一下,如果你愿意的话,下面的CSS:</p>
+
+<pre><code>#myElement {
+ background: #EEE;
+ padding: 2em;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+}</code></pre>
+
+<p>这样,除了IE 6,7或者8,都显示一个方框以外。在现代任意主流浏览器中都有一个圆角框, 然而,我们将以下单个规则添加到该CSS中:</p>
+
+<pre><code>#myElement {
+ ...
+ behavior: url(PIE.htc);
+}</code></pre>
+
+<p>现在,完全相同的圆角出现在IE中! 这就是它的一切。 是的,是真的,我的意思是。</p>
+
+<p>`PIE`目前对以下`CSS3`特性有全面或部分的支持:</p>
+
+<ul>
+ <li>border-radius</li>
+ <li>box-shadow</li>
+ <li>border-image</li>
+ <li>multiple background images</li>
+ <li>linear-gradient as background image</li>
+</ul>
+
+<p>此外,PIE增加了对IE9的 <i>border-image</i> 和<i>linear-gradient</i>的支持,IE 9已经支持其他自带的功能。</p>
+
+<p>其他的新特性还处在开发阶段.</p>
+
+<p><strong>想要了解更多信息?</strong> 请参看在线的 <a href="/demos">案例</a>, 参阅<a href="/documentation/">文档</a>,
+ 并且可以 <a href="/download-latest">下载 PIE</a> 自己去尝试一下. 要确保你已经阅读了 <a
+ href="/documentation/known-issues/">已知的</a> 常见问题的解决方案界面 .</p>
+
+<p>PIE 毕竟是一个繁重而年轻的项目. 但是他已经节约了你 <em>大量</em> 的时间, and make
+ 并且使你作为Web开发者的生涯更加简单、纯粹。. 赶快使用 CSS3 愉快的编码吧!</p>
+
+<!-- noformat off -->
+
+</body>
+</html>
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>PIE 文档: 源码编译 PIE</title>
+
+</head>
+<body>
+
+<h1>源码编译 PIE </h1>
+
+
+
+<!-- noformat on -->
+
+<p>本文档介绍如何从最新的源代码构建PIE。 如果您想获得尚未将其发布到发行版中的功能或bug修复,这对你来说很有用。 如果您想自己修改代码来尝试修复bug或实现新功能,那么这里也是你必须读的。 如果按照我说的做了,请考虑将您的更改提交到主项目,以便我们都可以从中受益!</p>
+
+<h2 id="prereqs">准备条件</h2>
+
+<p>建立PIE是直截了当的。您需要安装以下工具::</p>
+
+<ol>
+ <li><a href="http://git-scm.com/">Git</a>, 如果您要从Git存储库中检出源代码</li>
+ <li><a href="http://java.com">Java</a> 运行时, 版本 >=6 </li>
+ <li><a href="http://ant.apache.org">Ant</a>, 用于执行构建</li>
+</ol>
+
+<p>安装这些准备条件后,请执行以下步骤:</p>
+
+
+
+<h2 id="getsource">获取源码</h2>
+
+<p>你有两种方式获取源码:</p>
+
+<ol>
+ <li>使用Git检出源码:
+ <pre><kbd>git clone git://github.com/lojjic/PIE.git
+cd PIE</kbd></pre>
+ 如果你想要2.x beta分支(master),那么你完成了; 如果你想要切换1.x稳定分支,然后运行:
+ <pre><kbd>git checkout 1.x</kbd></pre>
+ or:
+ </li>
+ <li>下载源的存档:<br>
+ <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a> (2.x beta 分支)<br>
+ <a href="http://github.com/lojjic/PIE/archives/1.x">http://github.com/lojjic/PIE/archives/1.x</a> (1.x 稳定版 分支)
+ </li>
+</ol>
+
+
+
+<h2 id="build">执行构建</h2>
+
+<p>从的本地副本的源代码根目录中,在终端中调用以下命令:</p>
+
+<pre><kbd>ant</kbd></pre>
+
+<p>T这将执行构建,创建一个名为“build/”的新目录。 此目录将包含以下文件内容
+ :</p>
+
+<ul>
+ <li>PIE.htc</li>
+ <li>PIE_IE678.js</li>
+ <li>PIE_IE9.js</li>
+ <li>PIE_uncompressed.htc</li>
+ <li>PIE_IE678_uncompressed.js</li>
+ <li>PIE_IE9_uncompressed.js</li>
+</ul>
+
+<p>要使用这些文件,将它们复制到服务器上的目录中,并引用PIE.htc(或
+ PIE_uncompressed.htc进行调试)。 或者,如果你想使用
+ PIE JS版本,那么您可以使用脚本标签包含PIE_IEx.js文件(请参阅
+<a href="/documentation/pie-js/">PIE JS</a> 文档查询详情.)</p>
+
+<!-- noformat off -->
+
+
+</body>
+</html>
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>PIE Demos and Example Sites</title>
+
+</head>
+<body>
+
+<h1>实例和测试站点</h1>
+
+
+<h2>实例</h2>
+
+<p>在这里,您可以找到常见用户界面元素的演示,样式使用纯CSS3书写。 当然,他们都在IE中完美工作,感谢PIE!</p>
+
+<p>我们正在努力将更多的演示放在一起。 如果您想要看到自己想要的演示,或者想要自己提交一个演示,请<a href="/contact/">让我们知道</a>
+ [subpages]
+
+<h2>示例网站</h2>
+
+<p>Here is just a tiny list of sites using PIE already in production. <a href="/contact/">Tell us about yours!</a></p>
+<p>这里只是使用PIE,已经在生产环境中的一小部分网站列表。 <a href="/contact/">告诉我们您的信息!</a></p>
+<ul>
+ <li><a rel="nofollow" href="http://americanapparel.net">American Apparel</a> (<strong><abbr
+ title="Not safe for work">NSFW</abbr></strong>)
+ </li>
+ <li><a rel="nofollow" href="http://www.bitcloud.com.au/">BitCloud</a></li>
+ <li><a rel="nofollow" href="http://www.cahealthadvocates.org/">California Health Advocates</a></li>
+ <li><a rel="nofollow" href="http://demo.crowdfavorite.com/carrington-business">Carrington Business WordPress
+ Theme</a></li>
+ <li><a rel="nofollow" href="http://www.cheapmortgages.com/">Cheap Mortgages</a></li>
+ <li><a rel="nofollow" href="http://www.discounthotels.co.uk/">Cheap Hotels</a></li>
+ <li><a rel="nofollow" href="http://www.composite.net/">Composite C1 CMS</a></li>
+ <li><a rel="nofollow" href="http://www.cthealth.org/">Connecticut Health Foundation</a></li>
+ <li><a rel="nofollow" href="http://setup.dynguide.com/">DynDNS</a></li>
+ <li><a rel="nofollow" href="http://www.heidiklumfragrances.com/">Heidi Klum Fragrances</a></li>
+ <li><a rel="nofollow" href="http://www.hitreach.co.uk/">Hit Reach Web Design &amp; SEO</a></li>
+ <li><a rel="nofollow" href="http://www.journeyoutreach.org/">Journey Outreach</a></li>
+ <li><a rel="nofollow" href="http://www.kitchenaidcookware.com/">KitchenAid Cookware</a></li>
+ <li><a rel="nofollow" href="http://www.kleinezeitung.at/">Kleine Zeitung</a></li>
+ <li><a rel="nofollow" href="http://sites.mckesson.com/betterhealth/">McKesson: For Better Health</a></li>
+ <li><a rel="nofollow" href="http://www.memyteam.com/">me:myteam</a></li>
+ <li><a rel="nofollow" href="http://modemerr.com/">Mode Merr</a></li>
+ <li><a rel="nofollow" href="http://mom.com/">Mom.com</a></li>
+ <li><a rel="nofollow" href="http://www.mosaichub.com/">mosaicHUB</a></li>
+ <li><a rel="nofollow" href="http://www.blogsouthwest.com/">Nuts About Southwest</a></li>
+ <li><a rel="nofollow" href="http://www.protagonize.com">Protagonize</a></li>
+ <li><a rel="nofollow" href="http://realti.ca/">Realti.ca</a></li>
+ <li><a rel="nofollow" href="http://roomandboard.com/">Room &amp; Board</a></li>
+ <li><a rel="nofollow" href="http://www.rudisglutenfree.com/">Rudi's Gluten-Free Bakery</a></li>
+ <li><a rel="nofollow" href="http://sheffieldismyplanet.co.uk/">Sheffield Is My Planet</a></li>
+ <li><a rel="nofollow" href="http://www.skillstar.com/">Skillstar</a></li>
+ <li><a rel="nofollow" href="http://www.socialistproductions.org/">Socialist Productions</a></li>
+ <li><a rel="nofollow" href="http://freestyle-developments.co.uk/demo/public/svs/">SVS Securities</a></li>
+ <li><a rel="nofollow" href="http://www.thenorthface.com/">The North Face</a></li>
+ <li><a rel="nofollow" href="http://twbasics.keycontent.org/">Tiki for Smarties</a></li>
+ <li><a rel="nofollow" href="http://www.tinypie.co.uk/">TinyPie Projects</a></li>
+ <li><a rel="nofollow" href="http://www.tractionco.com/">Traction</a></li>
+ <li><a rel="nofollow" href="https://www.viaprinto.de/">viaprinto</a></li>
+</ul>
+
+
+</body>
+</html>
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>PIE 文档: 快速开始</title>
+
+ </head>
+<body>
+
+<h1>快速开始</h1>
+
+
+<!-- noformat on -->
+
+<p>在大多数情况下,以下介绍应该让您开始安装PIE。 如果你遇到了
+ 一直遇到问题,请查阅我们的<a href="/documentation/known-issues/">已知问题</a>页面,或
+ 寻求<a href="http://css3pie.com/forum">论坛</a>中的帮助。</p>
+<h2>Step 1: 下载它</h2>
+
+<p><a href="/download-latest">下载PIE发行版</a> 将它解压到某个地方.</p>
+
+<h2>Step 2: 将它上传</h2>
+
+<p>将解压缩的软件包的内容上传到Web服务器上的目录。 在哪里无关紧要
+ 确切地说,只要你知道它在哪里。</p>
+
+<h2>Step 3: 写一些 CSS3样式</h2>
+
+<p>假设你已经有一个HTML文档,假设你想给它的一个元素使用圆角。
+ 可以为该元素创建一个CSS样式,并给它一个border-radius样式,如下所示:</p>
+
+<pre><code>#myAwesomeElement {
+ border: 1px solid #999;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}</code></pre>
+
+<p>(注意-webkit-和-moz-前缀版本; 这些都是必要的,以使圆角可以在
+ 基于WebKit和Mozilla的浏览器中起作用.)</p>
+
+<h2>Step 4: 应用 PIE</h2>
+
+<p>在同一个CSS规则中,添加以下样式行:</p>
+
+<pre><code>behavior: url(path/to/pie_files/PIE.htc);</code></pre>
+
+<p>当然,您需要调整路径,以匹配您在步骤2中上传PIE.htc的位置。<em>注意:此
+ 路径是相对于正在查看的HTML文件,而不是相对于其调用的CSS文件。</em></p>
+
+<h2>Step 5: 在IE中查看</h2>
+
+<p>如果一切顺利,此时您应该可以在IE中加载该页面,并查看CSS3圆角
+ 像其他浏览器一样渲染的一样。 现在你可以使用一些其他支持的CSS3属性
+ 例如,box-shadow。 请参阅相关的<a href="/documentation/supported-css3-features/">支持的CSS3的文档功能
+ </a>来查看PIE可以做些。 愉快的玩耍吧!</p>
+
+<!-- noformat off -->
+
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit a344d95

Please sign in to comment.