freeCodeCamp 2018 Personal Portfolio满分答案

最新推荐文章于 2021-08-21 17:12:18 发布

HYLWZS

最新推荐文章于 2021-08-21 17:12:18 发布

阅读量665

点赞数 1

分类专栏： html 文章标签： css html html5 typescript

本文链接：https://blog.csdn.net/weixin_45628746/article/details/109172069

版权

html 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<style>
@media(max-width:200px){
  font-family:"宋体";
}
#welcome-section{
  background-color:yellow;
  margin-top:0;
  top:0;
  height:465px;
  width:auto;
}
#divnav{
  position:fixed;
  margin:0;
  top:0;
}

</style>
<section id="welcome-section">
  <h1 align="center">欢迎区</h1>
  <p align="center">
    Responsive Web Design Projects - Build a Personal Portfolio Webpage
  </p>
</section>
<div id="projects">
  <div class="project-tile" id="project01" align="center">
    <p>
      目标：使用 CodePen.io 搭建一个与这个功能上相似的 app：https://codepen.io/freeCodeCamp/full/zNBOYG。
在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目，由于目前我们只学到了 CSS，因此建议你只使用 CSS 完成这个项目，顺便还可以巩固一下之前学到的内容。你也可以使用 Bootstrap 或者是 SASS。在当前的项目中，不推荐使用其他技术如 jQurey、React、Angular 或者是 Vue，因为一旦出现问题，风险自担。但在别的项目中我们仍有机会去使用不同的技术栈比如 React，我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题，编码愉快！
    </p>
  </div>
  <div class="project-tile" id="project02">
  </div>
  <div class="project-tile" id="project03">
  </div>
  <a href="#project01">goto_project01</a>
  <div>
    <p align="center">
    需求 1：我的作品集应该有一个 id 为welcome-section的欢迎区。
需求 2：欢迎区内应该有一个包含标题的h1元素。
需求 3：我的作品集应该有一个 id 为projects的项目区。
需求 4：项目区至少包含一个带有project-tile类的元素来保存项目。
需求 5：项目区至少包含一个链接到一个项目的链接。
需求 6：我的作品集应有一个 id 为navbar的导航栏。
需求 7：导航栏至少包含一个我可以跳转到本页另外区域的链接。
需求 8：我的作品集应有一个 id 为profile-link的链接，它能在新标签打开我的 GitHub 或者 FCC 作品集。
需求 9：我的作品集至少使用一次媒体查询。
需求 10：欢迎区的高度应该的与视口的高度保持一致。
需求 11：导航栏应保持在视口的顶部。
    </p>
  </div>
  <br>
</div>
<div id="divnav">
<nav id="navbar">
  <a href="#project01">goto_project01</a>
  <a href="#project02">goto_project02</a>
  <a href="#project03">goto_project03</a>
</nav>
  </div>
<br>
<a href="https://github.cn" id="profile-link" target="_blank">goto_mygithub</a>