freeCodeCamp//响应式Web设计项目-建立技术文档页面//Build a Technical Documentation Page

最新推荐文章于 2023-02-20 10:54:37 发布

ProginnZoyo

最新推荐文章于 2023-02-20 10:54:37 发布

阅读量1.5k

点赞数 1

分类专栏： freeCodeCamp实战项目笔记文章标签： html css html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_50555183/article/details/110240531

版权

freeCodeCamp实战项目同时被 2 个专栏收录

4 篇文章 7 订阅

订阅专栏

笔记

4 篇文章 2 订阅

订阅专栏

响应式Web设计项目

建立致敬页面
建立调查表
建立产品登陆页面
建立技术文档页面
建立个人投资组合网页

项目要求

构建一个功能类似于此的CodePen.io应用程序：https://codepen.io/freeCodeCamp/full/zNqgVx

项目目标

目标详细在：网页 https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page

项目代码

代码详情页

：My Technical Documentation Page

html

<html>
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title>My Technical Documentation Page</title>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </head>
  <body>
    <nav id="navbar">
        <header id="nav-head">Navbar</header>
        <a href="#HTML" class="nav-link">HTML</a>
        <a href="#CSS" class="nav-link">CSS</a>
        <a href="#JavaScript" class="nav-link">JavaScript</a>
        <a href="#Java" class="nav-link">Java</a>
        <a href="#jQuery" class="nav-link">jQuery</a>
      </nav>
    <main id="main-doc">
      <section class="main-section" id="HTML">
        <header>HTML</header>
        <p>超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
        <p>超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
        </p>
        <ul>
          <li>语言特点</li>
          <li>书写方式</li>
          <li>整体结构</li>
        </ul>
        <code></code>
      <section>
      <section class="main-section" id="CSS">
        <header>CSS</header>
        <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
        <p>CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <code></code>
      </section>
      <section class="main-section" id="JavaScript">
        <header>JavaScript</header>
        <p>JavaScript（缩写为JS）是一种高级的、多范式、解释型的编程语言，是一门基于原型、函数先行的语言，它支持面向对象编程、命令式编程以及函数式编程。</p>
        <p>它提供语法来操控文本、数组、日期以及正则表达式，不支持I/O（比如网络、存储和图形等），但可以由它的宿主环境提供支持。它已经由ECMA（欧洲计算机制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器支持。</p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <code></code>
      </section>
      <section class="main-section" id="Java">
        <header>Java</header>
        <p>Java是由Sun公司于1995年5月推出的面向对象的程序设计语言。</p>
        <p>Java继承了C++语言面向对象技术的核心，又舍弃了C++语言中的指针、运算符重载以及多重继承的特性，同时引入了泛型编程、类型安全的枚举等特性，使Java成为简单、面向对象、分布式、解释性、健壮、安全与系统无关、可移植、高性能、多线程和动态的语言。</p>
        <p>随着互联网的迅猛发展，Java已经成为重要的网络编程语言，被广泛应用于企业级Web应用开发和移动应用开发。</p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <code></code>
      </section>
      <section class="main-section" id="jQuery">
        <header>jQuery</header>
        <p>jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。</p>
        <p>jquery设计的宗旨是“write Less，Do More”（即倡导写更少的代码，做更多的事情），其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。</p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <code></code>
      </section>
    </main>
  </body>
</html>

css

body{
  background-color: black;
}
#navbar {
  display: block;
  position: fixed;
  float: left;
  padding: 0px;
  margin-right: 50px;
}
#nav-head,a:link,a:visited{
  display: block;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #333333;
  width: 120px;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
}
a:hover,a:active {
  background-color: #666666;
}
main {
  margin-left: 150px;
  color: #FFFFFF;
}
@media screen and (max-widtn: 300px;){
  body {
    background-color: lightblue;
  }
}