From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../styling_boxes/a_cool_looking_box/index.html    |  88 ++++++++++++++++++
 .../creating_fancy_letterheaded_paper/index.html   | 101 +++++++++++++++++++++
 2 files changed, 189 insertions(+)
 create mode 100644 files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html
 create mode 100644 files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html

(limited to 'files/zh-cn/learn/css/styling_boxes')

diff --git a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html
new file mode 100644
index 0000000000..6ddd1d114b
--- /dev/null
+++ b/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html
@@ -0,0 +1,88 @@
+---
+title: 一个漂亮的盒子
+slug: Learn/CSS/Styling_boxes/A_cool_looking_box
+translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件：</th>
+   <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的：</th>
+   <td>测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="起点">起点</h2>
+
+<p>在开始评估之前，你需要：</p>
+
+<ul>
+ <li>复制一份<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a>代码，并在一个新的目录下把它们保存为<code>index.html</code> 和 <code>style.css</code>。</li>
+</ul>
+
+<div class="note">
+<p><strong>提醒</strong>：或者你也可以用<a href="http://jsbin.com/" rel="noopener">JSBin</a>或<a href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<code>&lt;style&gt;</code>元素里就好。</p>
+</div>
+
+<h2 id="项目简介">项目简介</h2>
+
+<p>你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。</p>
+
+<h3 id="一般任务">一般任务</h3>
+
+<ul>
+ <li>把CSS链接到HTML里。</li>
+</ul>
+
+<h3 id="样式化盒子">样式化盒子</h3>
+
+<p>给{{htmlelement("p")}}添加样式：</p>
+
+<ul>
+ <li>一个对于大按钮来说合理的宽度，200像素左右。</li>
+ <li>一个对于大按钮来说合理的高度，并使文本纵向居中。</li>
+ <li>居中文本。</li>
+ <li>用<code>rem</code>使字体稍大一点，大约17-18像素，在注释里说说你的值是怎么算出来的。</li>
+ <li>给你的设计定一个基础颜色，把它作为盒子的背景颜色。</li>
+ <li>把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。</li>
+ <li>一个精巧的圆角边框。</li>
+ <li>一个跟基础颜色相近、1像素宽的实线边框，颜色要稍深一点。</li>
+ <li>一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在30%的处渐变到0.2的不透明度，然后保持相同颜色到最后。</li>
+ <li>多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的3D外观。</li>
+</ul>
+
+<h2 id="范例">范例</h2>
+
+<p>完成之后的盒子可能会像下面的截图这样：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p>
+
+<h2 id="评估">评估</h2>
+
+<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a>或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
+
+<h2 id="在这个模块里">在这个模块里</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap">盒模型概要</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Backgrounds" rel="nofollow">背景</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Borders">边框</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables">样式化表格</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">高级盒效果</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper" rel="nofollow">创建精美的信纸</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box" rel="nofollow">一个漂亮的盒子</a></li>
+</ul>
+
+<p>​​​ </p>
diff --git a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html
new file mode 100644
index 0000000000..692071dfde
--- /dev/null
+++ b/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html
@@ -0,0 +1,101 @@
+---
+title: 创建精美的信纸
+slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper
+translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件：</th>
+   <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的：</th>
+   <td>测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="起点">起点</h2>
+
+<p>在开始评估之前，你需要：</p>
+
+<ul>
+ <li>复制一份<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a>代码，并在一个新的目录下把它们保存为<code>index.html</code> 和 <code>style.css</code>。</li>
+ <li>在同一个目录下下载这几张图片：<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">顶部</a>、<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">底部</a>和<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">标志</a>。</li>
+</ul>
+
+<div class="note">
+<p><strong>提醒</strong>：或者你也可以用<a href="http://jsbin.com/">JSBin</a>或<a href="https://thimble.mozilla.org/">Thimble</a>这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<code>&lt;style&gt;</code>元素里就好。</p>
+</div>
+
+<h2 id="项目简介">项目简介</h2>
+
+<p>你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：</p>
+
+<h3 id="信纸主体">信纸主体</h3>
+
+<ul>
+ <li>把CSS链接到HTML文档里。</li>
+ <li>给信纸添加这样一个背景：
+  <ul>
+   <li>把之前下载的顶部图片固定到信纸顶部。</li>
+   <li>把之前下载的底部图片固定到信纸底部。</li>
+   <li>为了给信纸一点纹理，在前面背景的基础上添加一个半透明的渐变，使其在顶部和底部附近稍微变暗，但中间的大部分完全透明。</li>
+  </ul>
+ </li>
+ <li>多添加一个<code>background</code>声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。</li>
+ <li>给信纸添加一个白色的背景颜色。</li>
+ <li>给信纸添加一个1mm的上下实线边框，选一个符合信纸的颜色主题的边框颜色。</li>
+</ul>
+
+<h3 id="标志">标志</h3>
+
+<ul>
+ <li>把之前下载的标志图片添加为{{htmlelement("h1")}}的背景图片。</li>
+ <li>给标志添加一个过滤器，使它有一个隐隐约约的阴影。</li>
+ <li>现在把添加的过滤器注释掉，尝试用其他（更跨浏览器兼容）的方式实现一个相同的阴影，阴影需要同样符合圆形图片的形状。</li>
+</ul>
+
+<h2 id="提示和技巧">提示和技巧</h2>
+
+<ul>
+ <li>记住，你可以这样为较旧的浏览器创建一个后备方案：先写一个较旧的浏览器支持的后备声明，然后再接着写只有较新的浏览器才支持的声明。这样比较旧的浏览器会应用第一个声明而忽略掉第二个不支持的声明，与此同时比较新的浏览器会先应用第一个声明，然后用第二个声明把它覆盖掉。</li>
+ <li>如果想的话你可以随意地用自己的图片来做这个评估。</li>
+</ul>
+
+<h2 id="范例">范例</h2>
+
+<p>完成之后的信纸可能会像下面的截图这样：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p> </p>
+
+<h2 id="评估">评估</h2>
+
+<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684/1">discussion thread for this exercise</a> 或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="在这个模块里">在这个模块里</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap">盒模型概要</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Borders">边框</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables">样式化表格</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">高级盒效果</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">创建精美的信纸</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">一个漂亮的盒子</a></li>
+</ul>
+
+<p> </p>
-- 
cgit v1.2.3-54-g00ecf