1 files changed, 80 insertions, 0 deletions
diff --git a/files/zh-cn/learn/css/howto/index.html b/files/zh-cn/learn/css/howto/index.html
new file mode 100644
index 0000000000..ecf4c7891b
--- /dev/null
+++ b/files/zh-cn/learn/css/howto/index.html
@@ -0,0 +1,80 @@
+---
+title: 解决常见的css问题
+slug: Learn/CSS/Howto
+translation_of: Learn/CSS/Howto
+---
+<p class="summary">以下链接提供了一些你在使用CSS时可能遇到的常见问题的解决方案。</p>
+
+<h2 id="主要使用事项">主要使用事项</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="基础">基础</h3>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS%E5%A6%82%E4%BD%95%E8%BF%90%E8%A1%8C#应用CSS到DOM">如何应用CSS到DOM中？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#空白">CSS如何留白？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#注释">CSS如何添加注释？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#类型、类和ID选择器">CSS如何通过元素名、类名以及ID筛选元素？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#标签属性选择器">CSS如何通过属性名和属性内容筛选元素？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类与伪元素">如何使用伪类？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类与伪元素">如何使用伪元素？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#选择器列表">如何将多个选择器应用于同一个规则？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#颜色">如何在CSS中指定颜色？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS#审查_CSS">如何在浏览器中调试CSS？</a></li>
+</ul>
+
+<h3 id="样式和内容">样式和内容</h3>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals">如何给文字添加样式？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Styling_lists">如何定制元素列表？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Styling_links">如何给链接添加样式？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals#文字阴影">如何给文本添加阴影？</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="盒子和布局">盒子和布局</h3>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">如何调整CSS盒模型大小？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">如何控制盒模型溢出？</a></li>
+ <li><a href="/zh-CN/docs/Web/CSS/background-clip">如何控制CSS盒模型中背景绘制部分？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">如何理解 inline、block 以及 inline-block？</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/zh-CN/docs/Web/CSS/background-clip">如何使用 background-clip 控制背景图覆盖？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#替代（IE）盒模型">如何使用box-sizing完全改变盒模型？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#背景颜色">如何改变背景色？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#玩转背景和边框">如何修改边框？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">如何给HTML表格添样式？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#盒子阴影">如何添加盒子阴影？</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="罕见问题与进阶技巧">罕见问题与进阶技巧</h2>
+
+<p>CSS允许一些高级的设计技巧。这些文章可以帮助您解决一些更复杂的使用案例。</p>
+
+<h3 id="通用">通用</h3>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级">如何计算CSS选择器的优先级？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#控制继承">如何控制CSS中的继承？</a></li>
+</ul>
+
+<h3 id="进阶效果">进阶效果</h3>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#Filters%EF%BC%88%E6%BB%A4%E9%95%9C%EF%BC%89">如何使用CSS滤镜？</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#Blend_modes（混合模式）">如何在CSS中使用混合模式？</a></li>
+</ul>
+
+<h3 id="布局">布局</h3>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">使用CSS flex布局</a></li>
+ <li><a href="/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts">使用CSS多列布局</a></li>
+ <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Content">使用CSS生成内容</a></li>
+</ul>