freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md

---
id: 587d78b0367417b2b2512b05
challengeType: 3
forumTopicId: 301146
localeTitle: 制作一个技术文档页面
---

## Description
<section id='description'>
<strong>目标：</strong>使用 <a href='https://codepen.io' target='_blank'>CodePen.io</a> 搭建一个与这个功能上相似的 app：<a href='https://codepen.io/freeCodeCamp/full/NdrKKL' target='_blank'>https://codepen.io/freeCodeCamp/full/NdrKKL</a>。
在满足以下<a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>需求</a>并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术（比如 jQurey、React、Angular 或 Vue），否则，如果在编码中出现问题，你需要自行解决。在后续的其他项目中，你将有机会使用各种技术栈（比如 React）。如果你在使用上述推荐的技术栈编码的过程中发现问题，请提交给我们来处理。祝你编码愉快！
<strong>需求 1：</strong>我能看见一个对应<code>id="main-doc"</code>的<code>main</code>元素，它包含页面的主要内容（技术文档）。
<strong>需求 2：</strong>在<code>#main-doc</code>元素内，我能看见至少 5 个<code>section</code>元素，每个元素都有一个<code>main-section</code>类属性。
<strong>需求 3：</strong>每个<code>.main-section</code>中的第一个元素应该是<code>header</code>元素，其中包含描述该部分主题的文本。
<strong>需求 4：</strong>具有<code>main-section</code>类的每个<code>section</code>元素应该有一个与包含在其中的每个<code>header</code>的文本相对应的 id，用下划线替换文本中的所有空格（例如，包含标题 "Javascript and Java" 的<code>section</code>应该有对应<code>id="Javascript_and_Java"</code>）。
<strong>需求 5：</strong>所有<code>.main-section</code>元素总计包含至少 10 个<code>p</code>元素。
<strong>需求 6：</strong>所有<code>.main-section</code>元素总计包含至少 5 个<code>code</code>元素。
<strong>需求 7：</strong>所有<code>.main-section</code>元素总计包含至少 5 个<code>li</code>项。
<strong>需求 8：</strong>我能看见一个对应<code>id="navbar"</code>的<code>nav</code>元素。
<strong>需求 9：</strong>navbar 元素应包含一个<code>header</code>元素，其中包含描述技术文档主题的文本。
<strong>需求 10：</strong>此外，导航栏应包含类名为<code>nav-link</code>的链接元素（<code>a</code>），每个元素都应该有一个类<code>main-section</code>。
<strong>需求 11：</strong>导航栏中的<code>header</code>元素必须位于导航栏中的任何链接（<code>a</code>）元素之前。
<strong>需求 12：</strong>具有<code>nav-link</code>类的每个元素都应该包含每个部分的标题文本对应的文本（例如，如果你有一个“Hello world”部分/标题，你的导航栏应该有一个包含文本“Hello world”的元素）。
<strong>需求 13：</strong>当我点击一个 navbar 元素时，页面应该导航到<code>main-doc</code>元素的相应部分（例如，如果我单击包含文本 "Hello world" 的<code>nav-link</code>元素，页面将导航到一个带有对应 header 和 id 的section 元素）。
<strong>需求 14：</strong>在常规尺寸的设备上（笔记本电脑，台式机），带有<code>id="navbar"</code>的元素应该显示在屏幕左侧，并且始终对用户可见。
<strong>需求 15：</strong>我的技术文档页面应该至少使用一次媒体查询。
你可以通过 fork 这个项目 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。
完成之后，将你的 URL 提交到相应的项目，并测试通过。
</section>

## Instructions
<section id='instructions'>
</section>

## Tests
<section id='tests'>

```yml
tests: []

```

</section>

## Challenge Seed
<section id='challengeSeed'>

</section>

## Solution
<section id='solution'>

```js
// solution required
```

</section>