diff --git a/about/index.html b/about/index.html new file mode 100644 index 00000000..28d05147 --- /dev/null +++ b/about/index.html @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + BLOG OF 青橙 + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + +
+ +

什么都木有~

+ + +
+
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2023/04/index.html b/archives/2023/04/index.html index 6d2ca857..243f8a83 100644 --- a/archives/2023/04/index.html +++ b/archives/2023/04/index.html @@ -152,7 +152,7 @@

BLOG OF 青橙

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） diff --git a/archives/2023/11/index.html b/archives/2023/11/index.html index 330b3638..290f2988 100644 --- a/archives/2023/11/index.html +++ b/archives/2023/11/index.html @@ -128,7 +128,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -176,7 +176,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法 diff --git a/archives/2023/index.html b/archives/2023/index.html index 436909d3..db50d028 100644 --- a/archives/2023/index.html +++ b/archives/2023/index.html @@ -128,7 +128,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -176,7 +176,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法 @@ -224,7 +224,7 @@

BLOG OF 青橙

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） diff --git a/archives/index.html b/archives/index.html index a25db0e8..67a9a1d5 100644 --- a/archives/index.html +++ b/archives/index.html @@ -128,7 +128,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -176,7 +176,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法 @@ -224,7 +224,7 @@

BLOG OF 青橙

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） diff --git a/atom.xml b/atom.xml index 07549a7f..27535947 100644 --- a/atom.xml +++ b/atom.xml @@ -6,7 +6,7 @@ - 2023-11-25T10:14:34.281Z + 2023-11-27T09:28:24.719Z http://blog.webrelay.cn/ @@ -17,11 +17,11 @@ Hexo - JS内置构造函数 - String篇 + JavaScript字符串常用方法 http://blog.webrelay.cn/js-string-methods/ 2023-11-25T08:48:28.000Z - 2023-11-25T10:14:34.281Z + 2023-11-27T09:28:24.719Z JavaScript 中的字符串有许多内置方法，用于执行各种操作，包括字符串的创建、修改、搜索、截取等。以下是一些常用的 String 方法：

  1. 字符串长度和字符访问：

    • length: 返回字符串的长度。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.length); // 输出: 13

    • charAt(index): 返回指定索引位置的字符。

      1
      2
      const myString = "Hello";
      console.log(myString.charAt(0)); // 输出: "H"

  2. 字符串查找：

    • indexOf(substring[, start]): 返回子字符串第一次出现的索引。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.indexOf("World")); // 输出: 7

    • lastIndexOf(substring[, start]): 返回子字符串最后一次出现的索引。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.lastIndexOf("o")); // 输出: 8

    • includes(searchString[, position]): 判断字符串是否包含指定的子字符串。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.includes("World")); // 输出: true

  3. 字符串截取和连接：

    • slice(start[, end]): 返回从 start 到 end（不包括 end）的子字符串。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.slice(0, 5)); // 输出: "Hello"

    • substring(start[, end]): 与 slice 类似，但不允许负数。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.substring(0, 5)); // 输出: "Hello"

    • substr(start[, length]): 返回从 start 开始的指定长度的子字符串。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.substr(0, 5)); // 输出: "Hello"

    • concat(str1, str2, ...): 连接两个或多个字符串。

      1
      2
      3
      const str1 = "Hello";
      const str2 = "World";
      console.log(str1.concat(", ", str2)); // 输出: "Hello, World"

  4. 字符串转换：

    • toUpperCase(): 将字符串转换为大写。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.toUpperCase()); // 输出: "HELLO, WORLD!"

    • toLowerCase(): 将字符串转换为小写。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.toLowerCase()); // 输出: "hello, world!"

    • toString(): 返回字符串的原始值的字符串表示。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.toString()); // 输出: "Hello, World!"

  5. 字符串替换和删除：

    • replace(searchValue, replaceValue): 用新字符串替换匹配的子字符串。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.replace("World", "Universe")); // 输出: "Hello, Universe!"

    • replaceAll(searchValue, replaceValue): 替换所有匹配的子字符串。

      1
      2
      const myString = "Hello, World! Hello, Universe!";
      console.log(myString.replaceAll("Hello", "Hi")); // 输出: "Hi, World! Hi, Universe!"

    • trim(): 移除字符串两端的空白字符。

      1
      2
      const myString = "   Hello, World!   ";
      console.log(myString.trim()); // 输出: "Hello, World!"

  6. 字符串拆分：

    • split(separator[, limit]): 将字符串拆分为子字符串数组。

      1
      2
      3
      const myString = "apple,orange,banana";
      const fruits = myString.split(",");
      console.log(fruits); // 输出: ["apple", "orange", "banana"]

  7. 字符串比较：

    • localeCompare(str): 比较两个字符串，根据当前区域设置返回一个负数、零或正数。

      1
      2
      3
      const str1 = "apple";
      const str2 = "banana";
      console.log(str1.localeCompare(str2)); // 输出: 负数，表示 str1 在字母表中排在 str2 之前

  8. 其他方法：

    • startsWith(searchString[, position]): 判断字符串是否以指定的子字符串开头。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.startsWith("Hello")); // 输出: true

    • endsWith(searchString[, length]): 判断字符串是否以指定的子字符串结尾。

      1
      2
      const myString = "Hello, World!";
      console.log(myString.endsWith("World")); // 输出: true

    • repeat(count): 返回包含指定重复次数的字符串。

      1
      2
      const myString = "abc";
      console.log(myString.repeat(3)); // 输出: "abcabcabc"

这些实例展示了一些常见的字符串操作方法。根据具体的需求，可以选择适当的方法来处理字符串。

]]> @@ -73,11 +73,11 @@ - JS内置构造函数 - Array篇 + JavaScript数组常用方法 http://blog.webrelay.cn/js-array-methods/ 2023-11-21T12:01:54.000Z - 2023-11-25T08:47:01.351Z + 2023-11-27T09:28:39.811Z JavaScript 数组提供了许多方法，用于对数组进行各种操作，包括添加、删除、遍历、过滤等。以下是一些常见的数组方法：

修改数组的方法：

  1. push()： 在数组末尾添加一个或多个元素，并返回新的长度。

    1
    2
    3
    const fruits = ['apple', 'orange'];
    const newLength = fruits.push('banana');
    // fruits 现在是 ['apple', 'orange', 'banana']

  2. pop()： 移除数组末尾的元素，并返回该元素。

    1
    2
    3
    const fruits = ['apple', 'orange', 'banana'];
    const removedElement = fruits.pop();
    // fruits 现在是 ['apple', 'orange']

  3. shift()： 移除数组的第一个元素，并返回该元素。

    1
    2
    3
    const fruits = ['apple', 'orange', 'banana'];
    const removedElement = fruits.shift();
    // fruits 现在是 ['orange', 'banana']

  4. unshift()： 在数组的开头添加一个或多个元素，并返回新的长度。

    1
    2
    3
    const fruits = ['orange', 'banana'];
    const newLength = fruits.unshift('apple');
    // fruits 现在是 ['apple', 'orange', 'banana']

  5. splice()： 在数组中添加或删除元素，或者替换现有元素。

    1
    2
    3
    const fruits = ['apple', 'orange', 'banana', 'mango'];
    fruits.splice(1, 2, 'grape', 'kiwi');
    // fruits 现在是 ['apple', 'grape', 'kiwi', 'mango']

  6. reverse()： 颠倒数组中元素的顺序。

    1
    2
    3
    const fruits = ['apple', 'orange', 'banana'];
    const reversedFruits = fruits.reverse();
    // reversedFruits 现在是 ['banana', 'orange', 'apple']

  7. sort()： 对数组元素进行排序。

    1
    2
    3
    const fruits = ['apple', 'orange', 'banana'];
    const sortedFruits = fruits.sort();
    // sortedFruits 现在是 ['apple', 'banana', 'orange']

不修改原数组的方法：

  1. concat()： 连接两个或多个数组，并返回一个新数组。

    1
    2
    3
    4
    const fruits = ['apple', 'orange'];
    const moreFruits = ['banana', 'mango'];
    const allFruits = fruits.concat(moreFruits);
    // allFruits 是 ['apple', 'orange', 'banana', 'mango']

  2. slice()： 从数组中提取某个范围的元素，并返回一个新数组。

    1
    2
    3
    const fruits = ['apple', 'orange', 'banana', 'mango'];
    const citrus = fruits.slice(1, 3);
    // citrus 是 ['orange', 'banana']

迭代和查找方法：

  1. forEach()： 对数组的每个元素执行提供的函数。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3];
    numbers.forEach(function(number) {
        console.log(number);
    });
    // 输出: 1, 2, 3

  2. map()： 创建一个新数组，其元素是对原数组中每个元素调用提供的函数的结果。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3];
    const squaredNumbers = numbers.map(function(number) {
        return number * number;
    });
    // squaredNumbers 是 [1, 4, 9]

  3. filter()： 创建一个新数组，其中包含通过提供函数实现的测试的所有元素。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3, 4, 5];
    const evenNumbers = numbers.filter(function(number) {
        return number % 2 === 0;
    });
    // evenNumbers 是 [2, 4]

  4. find()： 查找数组中满足条件的第一个元素。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3, 4, 5];
    const found = numbers.find(function(element) {
        return element > 2;
    });
    // 输出 3

  5. every()： 检查数组中的所有元素是否满足条件。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3, 4, 5];
    const allGreaterThanZero = numbers.every(function(element) {
        return element > 0;
    });
    // 输出 true

  6. some()： 检查数组中是否至少有一个元素满足条件。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3, 4, 5];
    const hasEvenNumber = numbers.some(function(element) {
        return element % 2 === 0;
    });
    // 输出 true

  7. reduce()： 对数组中的所有元素进行累加操作。

    1
    2
    3
    4
    5
    const numbers = [1, 2, 3, 4, 5];
    const sum = numbers.reduce(function(accumulator, currentValue) {
        return accumulator + currentValue;
    }, 0);
    // 输出 15

这只是 JavaScript 数组方法的一小部分，还有很多其他方法，可以根据具体需求选择使用。这些方法使得对数组进行各种操作变得更加方便和灵活。

]]> @@ -104,9 +104,9 @@ http://blog.webrelay.cn/freecodecamp-responsive-web-design/ 2023-04-25T11:57:36.000Z - 2023-11-21T16:47:46.152Z + 2023-11-27T09:51:21.354Z - 本文章汇总了freeCodeCamp网站关于响应式网页设计的所有案例的源码

  1. 通过编写猫咪相册应用学习HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
</head>

<body>
    <main>
        <h1>CatPhotoApp</h1>
        <section>
            <h2>Cat Photos</h2>
            <!-- TODO: Add link to cat photos -->
            <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
            <a href="https://freecatphotoapp.com"><img
                    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
                    alt="A cute orange cat lying on its back."></a>
        </section>
        <section>
            <h2>Cat Lists</h2>
            <h3>Things cats love:</h3>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
                    alt="A slice of lasagna on a plate.">
                <figcaption>Cats <em>love</em> lasagna.</figcaption>
            </figure>
            <h3>Top 3 things cats hate:</h3>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
                    alt="Five cats looking around a field.">
                <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
            </figure>
        </section>
        <section>
            <h2>Cat Form</h2>
            <form action="https://freecatphotoapp.com/submit-cat-photo">
                <fieldset>
                    <legend>Is your cat an indoor or outdoor cat?</legend>
                    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
                    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
                </fieldset>
                <fieldset>
                    <legend>What's your cat's personality?</legend>
                    <input id="loving" type="checkbox" name="personality" value="loving" checked> <label
                        for="loving">Loving</label>
                    <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
                    <input id="energetic" type="checkbox" name="personality" value="energetic"> <label
                        for="energetic">Energetic</label>
                </fieldset>
                <input type="text" name="catphotourl" placeholder="cat photo URL" required>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
        </p>
    </footer>
</body>

</html>

  1. 通过编写咖啡店菜单学习基础CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon" />
                <article class="item">
                    <p class="flavor">French Vanilla</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
                </article>
                <article class="item">
                    <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
                </article>
                <article class="item">
                    <p class="flavor">Hazelnut</p><p class="price">4.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Mocha</p><p class="price">4.50</p>
                </article>
            </section>
            <section>
                <h2>Desserts</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />
                <article class="item">
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
                <article class="item">
                    <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
                </article>
                <article class="item">
                    <p class="dessert">Cheesecake</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
                </article>
            </section>
        </main>
        <hr class="bottom-line">
        <footer>
            <p>
                <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
            </p>
            <p class="address">123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>

</html>
styles.css

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
    font-family: sans-serif;
    padding: 20px;
}

h1 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

h2 {
    font-size: 30px;
}

.established {
    font-style: italic;
}

h1,
h2,
p {
    text-align: center;
}

.menu {
    width: 80%;
    background-color: burlywood;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 500px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -25px;
}

hr {
    height: 2px;
    background-color: brown;
    border-color: brown;
}

.bottom-line {
    margin-top: 25px;
}

h1,
h2 {
    font-family: Impact, serif;
}

.item p {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 18px;
}

.flavor,
.dessert {
    text-align: left;
    width: 75%;
}

.price {
    text-align: right;
    width: 25%;
}

/* FOOTER */

footer {
    font-size: 14px;
}

.address {
    margin-bottom: 5px;
}

a {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: brown;
}

a:active {
    color: brown;
}

  1. 通过构建一组彩色笔来学习CSS颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>CSS Color Markers</h1>
    <div class="container">
        <div class="marker red">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
    </div>
</body>

</html>
styles.css

h1 {
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
    padding: 10px 0;
}

.marker {
    width: 200px;
    height: 25px;
    margin: 10px auto;
}

.cap {
    width: 60px;
    height: 25px;
}

.sleeve {
    width: 110px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap,
.sleeve {
    display: inline-block;
}

.red {
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}

  1. 通过编写注册表单学习HTML表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <fieldset>
            <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text"required /></label>
            <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
            <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
            <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
        </fieldset>
        <fieldset>
            <label for="personal-account"><input id="personal-account" type="radio" name="account-type"class="inline" /> Personal Account</label>
            <label for="business-account"><input id="business-account" type="radio" name="account-type"class="inline" /> Business Account</label>
            <label for="terms-and-conditions">
                <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" />I accept the 
                <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
            </label>
        </fieldset>
        <fieldset>
            <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
            <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13"max="120" /></label>
            <label for="referrer">How did you hear about us?
                <select id="referrer" name="referrer">
                    <option value="">(select one)</option>
                    <option value="1">freeCodeCamp News</option>
                    <option value="2">freeCodeCamp YouTube Channel</option>
                    <option value="3">freeCodeCamp Forum</option>
                    <option value="4">Other</option>
                </select>
            </label>
            <label for="bio">Provide a bio:
                <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
            </label>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>
styles.css

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
}

h1,
p {
    margin: 1em auto;
    text-align: center;
}

form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0;
    border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
    border-bottom: none;
}

label {
    display: block;
    margin: 0.5rem 0;
}

input,
textarea,
select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
}

input,
textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

input[type="file"] {
    padding: 1px 2px;
}

a {
    color: #dfdfe2
}

  1. 调查表单【认证项目】

仿freeCodeCamp Survey Form，技术不精，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
<body>
    <h1 id="title">freeCodeCamp 调查表</h1>
    <p id="description">感谢您花时间帮助我们改进平台</p>
    <form id="survey-form" action="" method="post">

        <label id="name-label">名字<input id="name" name="name" type="text" placeholder="输入您的名字" required></label>
        <label id="email-label">邮箱<input id="email" name="email" type="email" placeholder="输入您的邮箱" required></label>
        <label id="number-label">年龄<span>（可选）</span><input id="number" name="number" type="number" min="0" max="120" placeholder="年龄"></label>
    
        <label for="dropdown">哪个选项最能描述您当前的角色？
            <select id="dropdown" name="dropdown">
                <option value="" disabled selected>选择当前角色</option>
                <option value="1">学生</option>
                <option value="2">全职工作者</option>
                <option value="3">全日制学习者</option>
                <option value="4">宁愿不说</option>
                <option value="5">其他</option>
            </select>
        </label>
    
        你会向朋友推荐 freeCodeCamp 吗？
        <label for="definitely" class="options">
            <input type="radio" id="definitely" class="inline" name="radio" value="definitely">肯定
        </label>
        <label for="maybe" class="options">
            <input type="radio" id="maybe" class="inline" name="radio" value="maybe">也许
        </label>
        <label for="notsure" class="options">
            <input type="radio" name="radio" id="notsure" class="inline" value="notsure">不确定
        </label>
    
        <label for="dropdown2">您最喜欢 freeCodeCamp 的什么功能？
            <select id="dropdown2" name="dropdown2">
                <option value="" disabled selected>选择一个选项</option>
                <option value="1">挑战</option>
                <option value="2">项目</option>
                <option value="3">社区</option>
                <option value="4">开源</option>
            </select>
        </label>
    
        您希望看到哪些改进？<span>（检查所有适用）</span>
        <label for="checkbox1" class="options"><input type="checkbox" name="checkbox1" id="checkbox1"class="inline" value="options1">前端项目</label>
        <label for="checkbox2" class="options"><input type="checkbox" name="checkbox2" id="checkbox2"class="inline" value="options2">后端项目</label>
        <label for="checkbox3" class="options"><input type="checkbox" name="checkbox3" id="checkbox3"class="inline" value="options3">数据可视化</label>
        <label for="checkbox4" class="options"><input type="checkbox" name="checkbox4" id="checkbox4"class="inline" value="options4">挑战</label>
        <label for="checkbox5" class="options"><input type="checkbox" name="checkbox5" id="checkbox5"class="inline" value="options5">开源社区</label>
        <label for="checkbox6" class="options"><input type="checkbox" name="checkbox6" id="checkbox6"class="inline" value="options6">Gitter 帮助室</label>
        <label for="checkbox7" class="options"><input type="checkbox" name="checkbox7" id="checkbox7"class="inline" value="options7">影片</label>
        <label for="checkbox8" class="options"><input type="checkbox" name="checkbox8" id="checkbox8"class="inline" value="options8">城市聚会</label>
        <label for="checkbox9" class="options"><input type="checkbox" name="checkbox9" id="checkbox9"class="inline" value="options8">维基百科</label>
        <label for="checkbox10" class="options"><input type="checkbox" name="checkbox10" id="checkbox10"class="inline" value="options10">论坛</label>
        <label for="checkbox11" class="options"><input type="checkbox" name="checkbox11" id="checkbox11"class="inline" value="options11">附加课程</label>
        <label for="">有什么意见或建议吗？<textarea name="" id="" rows="10" placeholder="在这里输入您的评论…"></textarea></label>
    
        <input type="submit" id="submit" value="提交">
    
    </form>
</body>
</head>

</html
styles.css

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 18px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

h1,
p {
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

h1 {
    margin: 50px auto 8px;
    font-weight: 400;
}

p {
    font-style: italic;
    font-weight: 100;
}

span {
    font-size: 14px;
    vertical-align: text-top;
}

form {
    width: 720px;
    background-color: rgba(27, 27, 50, 0.8);
    color: #ffffff;
    min-width: 480px;
    margin: 30px auto 0;
    padding: 44px;
    border-radius: 4px;
    box-sizing: border-box;
}

label {
    display: block;
    margin: 20px 0;
    padding: 4px 0;
}

label:first-of-type {
    margin-top: 0;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 8px;
    background: #ffffff;
    font-size: 16px;
    padding-left: 8px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

input,
select {
    height: 38px;
}

select {
    color: #495057;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.inline {
    width: unset;
    margin: 0;
}

.options {
    margin: 0px;
    margin-top: 8px;
    padding: 0;
}

textarea {
    padding-left: 8px;
    padding-top: 10px;
    height: 120px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
}

input[type="submit"] {
    background: #37af65;
    color: #ffffff;
    margin-bottom: 20px;
}

  1. 通过创作罗斯科绘画学习CSS盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="frame">
        <div class="canvas">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>

</html>
styles.css

.canvas {
    width: 500px;
    height: 600px;
    background-color: #4d0f00;
    overflow: hidden;
    filter: blur(2px);
}

.frame {
    border: 50px solid black;
    width: 500px;
    padding: 50px;
    margin: 20px auto;
}

.one {
    width: 425px;
    height: 150px;
    background-color: #efb762;
    margin: 20px auto;
    box-shadow: 0 0 3px 3px #efb762;
    border-radius: 9px;
    transform: rotate(-0.6deg);
}

.two {
    width: 475px;
    height: 200px;
    background-color: #8f0401;
    margin: 0 auto 20px;
    box-shadow: 0 0 3px 3px #8f0401;
    border-radius: 8px 10px;
    transform: rotate(0.4deg);
}

.one,
.two {
    filter: blur(1px);
}

.three {
    width: 91%;
    height: 28%;
    background-color: #b20403;
    margin: auto;
    filter: blur(2px);
    box-shadow: 0 0 5px 5px #b20403;
    border-radius: 30px 25px 60px 12px;
    transform: rotate(-0.2deg)
}

  1. 通过创建照片集来学习CSS弹性盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header class="header">
        <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="cat1">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="cat2">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="cat3">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="cat4">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="cat5">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="cat6">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="cat7">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="cat8">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="cat9">
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

body {
    margin: 0;
    font-family: sans-serif;
    background: #f5f6f7;
}

.header {
    text-align: center;
    text-transform: uppercase;
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
}

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
}

.gallery img {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.gallery::after {
    content: "";
    width: 350px;
}

  1. 通过建立营养标签来学习排版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="label">
        <header>
            <h1 class="bold">Nutrition Facts</h1>
            <div class="divider"></div>
            <p>8 servings per container</p>
            <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
        </header>
        <div class="divider large"></div>
        <div class="calories-info">
            <div class="left-container">
                <h2 class="bold small-text">Amount per serving</h2>
                <p>Calories</p>
            </div>
            <span>230</span>
        </div>
        <div class="divider medium"></div>
        <div class="daily-value small-text">
            <p class="bold right no-divider">% Daily Value *</p>
            <div class="divider"></div>
            <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
            <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
            <div class="divider"></div>
            <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
            <div class="divider"></div>
            <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
            <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
            <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
            <p class="indent no-divider">Dietary Fiber 4g</p>
            <div class="divider"></div>
            <p class="indent no-divider">Total Sugars 12g</p>
            <div class="divider double-indent"></div>
            <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
            <div class="divider"></div>
            <p class="no-divider"><span class="bold">Protein</span> 3g</p>
            <div class="divider large"></div>
            <p>Vitamin D 2mcg <span>10%</span></p>
            <p>Calcium 260mg <span>20%</span></p>
            <p>Iron 8mg <span>45%</span></p>
            <p class="no-divider">Potassium 235mg <span>6%</span></p>
        </div>
        <div class="divider medium"></div>
        <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

html {
    font-size: 16px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.label {
    border: 2px solid black;
    width: 270px;
    margin: 20px auto;
    padding: 0 7px;
}

header h1 {
    text-align: center;
    margin: -4px 0;
    letter-spacing: 0.15px
}

p {
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.divider {
    border-bottom: 1px solid #888989;
    margin: 2px 0;
}

.bold {
    font-weight: 800;
}

.large {
    height: 10px;
}

.large,
.medium {
    background-color: black;
    border: 0;
}

.medium {
    height: 5px;
}

.small-text {
    font-size: 0.85rem;
}


.calories-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.calories-info h2 {
    margin: 0;
}

.left-container p {
    margin: -5px -2px;
    font-size: 2em;
    font-weight: 700;
}

.calories-info span {
    margin: -7px -2px;
    font-size: 2.4em;
    font-weight: 700;
}

.right {
    justify-content: flex-end;
}

.indent {
    margin-left: 1em;
}

.double-indent {
    margin-left: 2em;
}

.daily-value p:not(.no-divider) {
    border-bottom: 1px solid #888989;
}

.note {
    font-size: 0.6rem;
    margin: 5px 0;
    padding: 0 8px;
    text-indent: -8px;
}

  1. 通过编写小测验学习无障碍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <header>
        <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
        <h1>HTML/CSS Quiz</h1>
        <nav>
            <ul>
                <li><a href="#student-info" accesskey="i">INFO</a></li>
                <li><a href="#html-questions" accesskey="h">HTML</a></li>
                <li><a href="#css-questions" accesskey="c">CSS</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
                <h2 id="student-info">Student Info</h2>
                <div class="info">
                    <label for="student-name">Name:</label>
                    <input type="text" name="student-name" id="student-name" />
                </div>
                <div class="info">
                    <label for="student-email">Email:</label>
                    <input type="email" name="student-email" id="student-email" />
                </div>
                <div class="info">
                    <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                    <input type="date" name="birth-date" id="birth-date" />
                </div>
            </section>
            <section role="region" aria-labelledby="html-questions">
                <h2 id="html-questions">HTML</h2>
                <div class="question-block">
                    <p>1</p>
                    <fieldset class="question" name="html-question-one">
                        <legend>
                            The legend element represents a caption for the content of its
                            parent fieldset element
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q1-a1">
                                    <input type="radio" id="q1-a1" name="q1" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q1-a2">
                                    <input type="radio" id="q1-a2" name="q1" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
                <div class="question-block">
                    <p>2</p>
                    <fieldset class="question" name="html-question-two">
                        <legend>
                            A label element nesting an input element is required to have a
                            for attribute with the same value as the input's id
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q2-a1">
                                    <input type="radio" id="q2-a1" name="q2" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q2-a2">
                                    <input type="radio" id="q2-a2" name="q2" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
            </section>
            <section role="region" aria-labelledby="css-questions">
                <h2 id="css-questions">CSS</h2>
                <div class="formrow">
                    <div class="question-block">
                        <label for="customer">Are you a frontend developer?</label>
                    </div>
                    <div class="answer">
                        <select name="customer" id="customer" required>
                            <option value="">Select an option</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="question-block">
                        <label for="css-questions">Do you have any questions:</label>
                    </div>
                    <div class="answer">
                        <textarea id="css-questions" name="css-questions" rows="5" cols="24"
                            placeholder="Who is flexbox..."></textarea>
                    </div>
                </div>
            </section>
            <button type="submit">Send</button>
        </form>
    </main>
    <footer>
        <address>
            <a href="https://freecodecamp.org">freeCodeCamp</a><br />
            San Francisco<br />
            California<br />
            USA
        </address>
    </footer>
</body>

</html>
styles.css

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}

header {
    width: 100%;
    height: 50px;
    background-color: #1b1b32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

#logo {
    width: max(100px, 18vw);
    background-color: #0a0a23;
    aspect-ratio: 35 / 4;
    padding: 0.4rem;
}

h1 {
    color: #f1be32;
    font-size: min(5vw, 1.2em);
    text-align: center;
}

nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
}

nav>ul>li {
    color: #dfdfe2;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
}

nav>ul>li:hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
}

li>a {
    color: inherit;
    text-decoration: none;
}

main {
    padding-top: 50px;
}

section {
    width: 80%;
    margin: 0 auto 10px auto;
    max-width: 600px;
}

h1,
h2 {
    font-family: Verdana, Tahoma;
}

h2 {
    border-bottom: 4px solid #dfdfe2;
    margin-top: 0px;
    padding-top: 60px;
}

.info {
    padding: 10px 0 0 5px;
}

.formrow {
    margin-top: 30px;
    padding: 0px 15px;
}

input {
    font-size: 16px;
}

.info label,
.info input {
    display: inline-block;
}

.info input {
    width: 50%;
    text-align: left;
}

.info label {
    width: 10%;
    min-width: 55px;
    text-align: right;
}

.question-block {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: 20px;
    padding-top: 5px;
}

p {
    margin-top: 5px;
    padding-left: 15px;
    font-size: 20px;
}

p::before {
    content: "Question #";
}

.question {
    border: none;
    padding-bottom: 0;
}

.answers-list {
    list-style: none;
    padding: 0;
}

button {
    display: block;
    margin: 40px auto;
    width: 40%;
    padding: 15px;
    font-size: 23px;
    background: #d0d0d5;
    border: 3px solid #3b3b4f;
}

footer {
    background-color: #2a2a40;
    display: flex;
    justify-content: center;
}

footer,
footer a {
    color: #dfdfe2;
}

address {
    text-align: center;
    padding: 0.3em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

  1. 致敬页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title id="title">致敬 - 袁隆平</title>
</head>

<body>
    <main id="main">
        <h1>袁隆平院士</h1>
        <p>杂交水稻之父</p>
        <div id="img-div">
            <img src="https://mstatic.gzstv.com/media/images/2021/05/24/SpiYfUIacL8b.jpg" alt="袁隆平" id="image">
            <div id="img-caption">
                袁隆平院士（左二），攻克了制种关，使杂交水稻的研究获得全面成功，为水稻增产开辟了新的途径。
            </div>
        </div>
        <div id="tribute-info">
            <h3 id="headline">袁隆平的生平：</h3>
            <ul>
                <li><strong>1930年</strong> - 袁隆平出生于北京协和医院，是中国杂交水稻育种专家，被誉为“杂交水稻之父”。</li>
                <li><strong>1953年</strong> - 袁隆平毕业于西南农学院，分配到湖南安江农业学校，从事植物遗传育种工作。</li>
                <li><strong>1964年</strong> - 袁隆平开始了杂交水稻的研究，历经九年的努力，成功培育出世界上第一个杂交水稻品种“南优2号”。</li>
                <li><strong>1981年</strong> - 袁隆平获得中国首届国家特等发明奖。</li>
                <li><strong>1995年</strong> - 袁隆平率领团队开发出新型杂交水稻理论和技术，创造了更高的产量和品质。</li>
                <li><strong>1996年</strong> - 袁隆平启动了超级杂交水稻交配计划。</li>
                <li><strong>1999年</strong> - 小行星8117被命名为“袁隆平星”。</li>
                <li><strong>2001年</strong> - 袁隆平获得国家最高科学技术奖和马格萨萨奖 。</li>
                <li><strong>2004年</strong> - 袁隆平获得沃尔夫农业奖和世界粮食奖 。</li>
                <li><strong>2006年</strong> - 袁隆平成为中国农业领域首位美国科学院外籍院士。</li>
                <li><strong>2010年</strong> - 袁隆平获得食の新潟国际奖佐藤藤三郎特別賞。</li>
                <li><strong>2012年</strong> - 袁隆平获得孔子和平奖。</li>
                <li><strong>2019年</strong> - 袁隆平获得共和国勋章。</li>
                <li><strong>2021年</strong> - 袁隆平因多重器官衰竭在长沙逝世，享年91岁。</li>
            </ul>
        </div>
        <blockquote>
            <p>
                “袁隆平院士是中国杂交水稻事业的开创者，是当代神农。50多年来，始终在农业科研第一线辛勤耕耘、不懈探索，为人类运用科技手段战胜饥饿带来绿色的希望和金色的收获。不仅为解决中国人民的温饱和保障国家粮食安全做出了贡献，更为世界和平和社会进步树立了丰碑。”
            </p>
            <cite>——新浪网评</cite>
        </blockquote>
        <h3>如果你有时间，你应该在他的<a href="https://baike.baidu.com/link?url=9pGya5d8kloerQXYYXKTsU5btV-VGSxt6wC2mXUuFzUh5wQmp0Ji_zuc8lhDpEnLUpYddLfyCQdwUh_8q21xvRf2i8BMOTZZnnEo43Pa7-yQXJMhWUxP2mWdVkEkfkJw" id="tribute-link" target="_blank">百度百科条目</a>上阅读更多关于这个伟大的人的信息。</h3>
    </main>
</body>

</html>
styles.css

html {
    font-size: 10px;
}

body {
    text-align: center;
    color: #333;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

@media (max-width: 460px) {
    h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 460px) {
    #main {
        margin: 0;
    }
}

#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}

#img-caption {
    margin: 15px 0 5px 0;
}

#headline {
    margin: 50px 0;
    text-align: center;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
}

li {
    margin: 16px 0;
}

blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
}

a {
    color: #477ca7;
}

a:visited {
    color: #74638f;
    ;
}

  1. 通过构建资产负债表了解有关CSS伪类选择器的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <main>
        <section>
            <h1>
                <span class="flex">
                    <span>AcmeWidgetCorp</span>
                    <span>Balance Sheet</span>
                </span>
            </h1>
            <div id="years" aria-hidden="true">
                <span class="year">2019</span>
                <span class="year">2020</span>
                <span class="year">2021</span>
            </div>
            <div class="table-wrap">
                <table>
                    <caption>Assets</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only year">2019</span></th>
                            <th><span class="sr-only year">2020</span></th>
                            <th class="current"><span class="sr-only year">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
                            <td>$25</td>
                            <td>$30</td>
                            <td class="current">$28</td>
                        </tr>
                        <tr class="data">
                            <th>Checking <span class="description">Our primary transactional account.</span></th>
                            <td>$54</td>
                            <td>$56</td>
                            <td class="current">$53</td>
                        </tr>
                        <tr class="data">
                            <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
                            <td>$500</td>
                            <td>$650</td>
                            <td class="current">$728</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Assets</span></th>
                            <td>$579</td>
                            <td>$736</td>
                            <td class="current">$809</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Liabilities</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
                            <td>$500</td>
                            <td>$250</td>
                            <td class="current">$0</td>
                        </tr>
                        <tr class="data">
                            <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
                            </th>
                            <td>$200</td>
                            <td>$300</td>
                            <td class="current">$400</td>
                        </tr>
                        <tr class="data">
                            <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
                            <td>$50</td>
                            <td>$50</td>
                            <td class="current">$75</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Liabilities</span></th>
                            <td>$750</td>
                            <td>$600</td>
                            <td class="current">$475</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Net Worth</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="total">
                            <th>Total <span class="sr-only">Net Worth</span></th>
                            <td>$-171</td>
                            <td>$136</td>
                            <td class="current">$334</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</body>

</html>
styles.css

span[class~="sr-only"] {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
}

html {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #0a0a23;
}

h1 {
    max-width: 37.25rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

h1 .flex {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

h1 .flex span:first-of-type {
    font-size: 0.7em;
}

h1 .flex span:last-of-type {
    font-size: 1.2em;
}

section {
    max-width: 40rem;
    margin: 0 auto;
    border: 2px solid #d0d0d5;
}

#years {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    z-index: 999;
    top: 0;
    background: #0a0a23;
    color: #fff;
    padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
    margin: 0 -2px;
}

#years span[class] {
    font-weight: bold;
    width: 4.5rem;
    text-align: right;
}

.table-wrap {
    padding: 0 0.75rem 1.5rem 0.75rem;
}

table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
    position: relative;
    margin-top: 3rem;
}

table caption {
    color: #356eaf;
    font-size: 1.3em;
    font-weight: normal;
    position: absolute;
    top: -2.25rem;
    left: 0.5rem;
}

tbody td {
    width: 100vw;
    min-width: 4rem;
    max-width: 4rem;
}

tbody th {
    width: calc(100% - 12rem);
}

tr[class="total"] {
    border-bottom: 4px double #0a0a23;
    font-weight: bold;
}

tr[class="total"] th {
    text-align: left;
    padding: 0.5rem 0 0.25rem 0.5rem;
}

tr.total td {
    text-align: right;
    padding: 0 0.25rem;
}

tr.total td:nth-of-type(3) {
    padding-right: 0.5rem;
}

tr.total:hover {
    background-color: #99c9ff;
}

td.current {
    font-style: italic;
}

tr.data {
    background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
    text-align: left;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
}

tr.data th .description {
    display: block;
    font-weight: normal;
    font-style: italic;
    padding: 1rem 0 0.75rem;
    margin-right: -13.5rem;
}

tr.data td {
    vertical-align: top;
    padding: 0.3rem 0.25rem 0;
    text-align: right;
}

tr.data td:last-of-type {
    padding: 0.5rem;
}

  1. 创建一副毕加索绘画来学习中级CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>
    <div id="back-wall"></div>
    <div class="characters">
        <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
        </div>
        <div id="black-character">
            <div id="black-hat"></div>
            <div id="gray-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="white-paper">
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
            </div>
        </div>
        <div class="blue" id="blue-left"></div>
        <div class="blue" id="blue-right"></div>
        <div id="orange-character">
            <div id="black-round-hat"></div>
            <div id="eyes-div">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="triangles">
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
            </div>
            <div id="guitar">
                <div class="guitar" id="guitar-left">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="guitar" id="guitar-right">
                    <i class="fas fa-bars"></i>
                </div>
                <div id="guitar-neck"></div>
            </div>
        </div>
    </div>
</body>

</html>
styles.css

body {
    background-color: rgb(184, 132, 46);
}

#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

#white-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 140px 180px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: GhostWhite;
    border-left-color: transparent;
    position: absolute;
    top: -140px;
    left: 0;
}

#black-mask {
    width: 100%;
    height: 50px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#gray-instrument {
    width: 15%;
    height: 40%;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: 50px;
    left: 125px;
    z-index: 1;
}

.black-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 65%;
}

#tan-table {
    width: 450px;
    height: 140px;
    background-color: #D2691E;
    position: absolute;
    top: 275px;
    left: 15px;
    z-index: 1;
}

#black-character {
    width: 300px;
    height: 500px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 30%;
    left: 59%;
}

#black-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 300px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: rgb(45, 31, 19);
    position: absolute;
    top: -150px;
    left: 0;
}

#gray-mask {
    width: 150px;
    height: 150px;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: -10px;
    left: 70px;
}

#white-paper {
    width: 400px;
    height: 100px;
    background-color: GhostWhite;
    position: absolute;
    top: 250px;
    left: -150px;
    z-index: 1;
}

.fa-music {
    display: inline-block;
    margin-top: 8%;
    margin-left: 13%;
}

.blue {
    background-color: #1E90FF;
}

#blue-left {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 20%;
    left: 20%;
}

#blue-right {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 40%;
}

#orange-character {
    width: 250px;
    height: 550px;
    background-color: rgb(240, 78, 42);
    position: absolute;
    top: 25%;
    left: 40%;
}

#black-round-hat {
    width: 180px;
    height: 150px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: -1;
}

#eyes-div {
    width: 180px;
    height: 50px;
    position: absolute;
    top: -40px;
    left: 20px;
    z-index: 3;
}

#triangles {
    width: 250px;
    height: 550px;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 42px 45px 45px 0;
    border-top-color: transparent;
    border-right-color: Gold;
    /* yellow */
    border-bottom-color: transparent;
    border-left-color: transparent;
    display: inline-block;
}

#guitar {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 120px;
    left: 0px;
    z-index: 3;
}

.guitar {
    width: 150px;
    height: 120px;
    background-color: Goldenrod;
    border-radius: 50%;
}

#guitar-left {
    position: absolute;
    left: 0px;
}

#guitar-right {
    position: absolute;
    left: 100px;
}

.fa-bars {
    display: block;
    margin-top: 30%;
    margin-left: 40%;
}

#guitar-neck {
    width: 200px;
    height: 30px;
    background-color: #D2691E;
    position: absolute;
    top: 45px;
    left: 200px;
    z-index: 3;
}

.eyes {
    width: 35px;
    height: 20px;
    background-color: #8B4513;
    border-radius: 20px 50%;
}

.right {
    position: absolute;
    top: 15px;
    right: 30px;
}

.left {
    position: absolute;
    top: 15px;
    left: 30px;
}

.fas {
    font-size: 30px;
}

  1. 通过创建一架钢琴来学习响应式网页设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div id="piano">
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
            alt="freeCodeCamp Logo" />
        <div class="keys">
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
    
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
        </div>
    </div>
</body>

</html>
styles.css

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

#piano {
    background-color: #00471b;
    width: 992px;
    height: 290px;
    margin: 80px auto;
    padding: 90px 20px 0 20px;
    position: relative;
    border-radius: 10px;
}

.keys {
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

.key {
    background-color: #ffffff;
    position: relative;
    width: 41px;
    height: 175px;
    margin: 2px;
    float: left;
    border-radius: 0 0 3px 3px;
}

.key.black--key::after {
    background-color: #1d1e22;
    content: "";
    position: absolute;
    left: -18px;
    width: 32px;
    height: 100px;
    border-radius: 0 0 3px 3px;
}

.logo {
    width: 200px;
    position: absolute;
    top: 23px;
}

@media (max-width: 768px) {
    #piano {
        width: 358px;
    }

    .keys {
        width: 318px;
    }
    
    .logo {
        width: 150px;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    #piano {
        width: 675px;
    }

    .keys {
        width: 633px;
    }
}

  1. 技术文档页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav id="navbar">
        <header>JS文档</header>
        <ul>
            <li><a class="nav-link" href="#Introduction">项目介绍</a></li>
            <li>
                <a class="nav-link" href="#What_you_should_already_know">你应该已经知道的</a>
            </li>
            <li>
                <a class="nav-link" href="#JavaScript_and_Java">JavaScript和Java</a>
            </li>
            <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
            <li><a class="nav-link" href="#Variables">变量</a></li>
            <li>
                <a class="nav-link" href="#Declaring_variables">声明变量</a>
            </li>
            <li><a class="nav-link" href="#Variable_scope">变量范围</a></li>
            <li>
                <a class="nav-link" href="#Global_variables">全局变量</a>
            </li>
            <li><a class="nav-link" href="#Constants">常数</a></li>
            <li><a class="nav-link" href="#Data_types">数据类型</a></li>
            <li>
                <a class="nav-link" href="#if...else_statement">if...else语句</a>
            </li>
            <li><a class="nav-link" href="#while_statement">while语句</a></li>
            <li>
                <a class="nav-link" href="#Function_declarations">函数声明</a>
            </li>
            <li><a class="nav-link" href="#Reference">参考文献</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>项目介绍</header>
            <article>
                <p>
                    JavaScript是一种跨平台、面向对象的脚本语言。它是一种小型和轻量级的语言。在主机环境（例如，Web浏览器）中，JavaScript可以连接到其环境的对象，以提供对它们的编程控制。
                </p>

                <p>
                    JavaScript包含一个标准的对象库，如Array、Date和Math，以及一组核心语言元素，如运算符、控制结构和语句。核心JavaScript可以通过补充额外的对象来扩展各种用途;例如：
                </p>
                <ul>
                    <li>
                        客户端JavaScript通过提供对象来控制浏览器及其文档对象模型（DOM），从而扩展了核心语言。例如，客户端扩展允许应用程序在HTML表单上放置元素，并响应用户事件，如鼠标单击、表单输入和页面导航。
                    </li>
                    <li>
                        服务器端JavaScript通过提供与在服务器上运行JavaScript相关的对象来扩展核心语言。例如，服务器端扩展允许应用程序与数据库通信，提供从应用程序的一个调用到另一个调用的信息的连续性，或者在服务器上执行文件操作。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="What_you_should_already_know">
            <header>你应该已经知道的</header>
            <article>
                <p>本指南假设您具备以下基本背景：</p>
    
                <ul>
                    <li>
                        对互联网和万维网（WWW）有一般的了解。
                    </li>
                    <li>
                        良好的超文本标记语言（HTML）工作知识。
                    </li>
                    <li>
                        有编程经验。如果您是编程新手，请尝试主页上链接的有关JavaScript的教程之一。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="JavaScript_and_Java">
            <header>JavaScript和Java</header>
            <article>
                <p>
                    JavaScript和Java在某些方面是相似的，但在其他方面有根本的不同。JavaScript语言类似于Java，但没有Java的静态类型和强类型检查。JavaScript遵循大多数Java表达式语法，命名约定和基本控制流结构，这就是它从LiveScript重命名为JavaScript的原因。
                </p>
    
                <p>
                    与Java通过声明构建的类的编译时系统相反，JavaScript支持基于少量表示数值、布尔值和字符串值的数据类型的运行时系统。JavaScript具有基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的模型提供动态继承;也就是说，对于各个对象，继承的内容可能不同。JavaScript还支持没有任何特殊声明性要求的函数。函数可以是对象的属性，作为松散类型的方法执行。
                </p>
                <p>
                    与Java相比，JavaScript是一种非常自由的语言。您不必声明所有的变量、类和方法。您不必关心方法是公共的、私有的还是受保护的，也不必实现接口。变量、参数和函数返回类型不是显式类型化的。
                </p>
            </article>
        </section>
        <section class="main-section" id="Hello_world">
            <header>Hello world</header>
            <article>
                要开始编写JavaScript，请打开Scratchpad并编写第一个“Hello world”JavaScript代码：
                <code>
                    function greetMe(yourName) &#123; alert("Hello " + yourName); &#125;
                    greetMe("World");
                </code>
                选择代码板中的代码，然后按Ctrl+R以观看它在浏览器中展开！
            </article>
        </section>
        <section class="main-section" id="Variables">
            <header>变量</header>
            <p>
                在应用程序中，变量用作值的符号名称。变量的名字，称为标识符，符合一定的规则。
            </p>
            <p>
                JavaScript标识符必须以字母、下划线（_）或美元符号（$）开头;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。
            </p>
            <p>
                您可以在标识符中使用ISO 8859-1或Unicode字母，例如å和ü。您还可以使用Unicode转义序列作为标识符中的字符。法律的名称的一些示例包括Number_hits、temp 99和_name。
            </p>
        </section>
        <section class="main-section" id="Declaring_variables">
            <header>声明变量</header>
            <article>
                你可以用三种方式声明一个变量：
                <p>
                    使用关键字var。例如，
                    <code>var x = 42.</code>
                    此语法可用于声明局部和全局变量。
                </p>
                <p>
                    只要给它赋值。例如，
                    <code>x = 42.</code>
                    This总是声明一个全局变量。它会生成严格的JavaScript警告。你不应该使用这个变量。
                </p>
                <p>
                    使用关键字let。例如，
                    <code> let y = 13.</code>
                    此语法可用于声明块范围局部变量。参见下面的变量范围。
                </p>
            </article>
        </section>
        <section class="main-section" id="Variable_scope">
            <header>变量范围</header>
            <article>
                <p>
                    当在任何函数之外声明变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。当你在一个函数中声明一个变量时，它被称为局部变量，因为它只能在该函数中使用。
                </p>
    
                <p>
                    ECMAScript
                    2015之前的JavaScript没有block语句作用域;相反，在块中声明的变量对于块驻留在其中的函数（或全局范围）是本地的。例如，下面的代码将记录5，因为x的作用域是声明x的函数（或全局上下文），而不是块，在这种情况下是if语句。
                </p>
                <code>if (true) &#123; var x = 5; &#125; console.log(x); // 5</code>
                <p>
                    当使用ECMAScript 2015中引入的let声明时，这种行为会发生变化。
                </p>
    
                <code>if (true) &#123; let y = 5; &#125; console.log(y); // ReferenceError: y isnot defined</code>
            </article>
        </section>
        <section class="main-section" id="Global_variables">
            <header>全局变量</header>
            <article>
                <p>
                    全局变量实际上是全局对象的属性。在web页面中，全局对象是window，因此您可以使用window.variable语法设置和访问全局变量。
                </p>
    
                <p>
                    因此，通过指定窗口或框架名称，可以从另一个窗口或框架访问在一个窗口或框架中声明的全局变量。例如，如果在文档中声明了一个名为phoneNumber的变量，则可以从iframe中引用此变量作为parent.phoneNumber。
                </p>
            </article>
        </section>
        <section class="main-section" id="Constants">
            <header>常量</header>
            <article>
                <p>
                    您可以使用const关键字创建一个只读的命名常量。常量标识符的语法与变量标识符的语法相同：它必须以字母、下划线或美元符号开头，并且可以包含字母、数字或下划线字符。
                </p>
    
                <code>const PI = 3.14;</code>
                <p>
                    常量不能通过赋值来更改值，也不能在脚本运行时重新声明。它必须初始化为一个值。
                </p>
    
                <p>
                    常量的作用域规则与let块作用域变量的作用域规则相同。如果省略const关键字，则假定标识符表示变量。
                </p>
    
                <p>
                    不能声明与同一作用域中的函数或变量同名的常量。例如：
                </p>
    
                <code>
                    // THIS WILL CAUSE AN ERROR function f() &#123;&#125;; const f = 5; 
                    // THISWILL CAUSE AN ERROR ALSO function f() &#123; const g = 5; var g;
                    //statements &#125;
                </code>
                但是，对象属性不受保护，因此执行以下语句没有问题。
                <code>
                    const MY_OBJECT = &#123;"key": "value"&#125;; 
                    MY_OBJECT.key ="otherValue";
                </code>
            </article>
        </section>
        <section class="main-section" id="Data_types">
            <header>数据类型</header>
            <article>
                <p>最新的ECMAScript标准定义了七种数据类型：</p>
                <ul>
                    <li>
                        <p>作为基元的六种数据类型：</p>
                        <ul>
                            <li>Boolean. true与false.</li>
                            <li>
                                null. 表示空值的特殊关键字。因为JavaScript是区分大小写的，所以null与Null、NULL或任何其他变体都不相同。
                            </li>
                            <li>
                                undefined. 其值未定义的顶级属性。
                            </li>
                            <li>Number. 42或3.14159.</li>
                            <li>String. "你好"</li>
                            <li>
                                Symbol（ECMAScript 2015中新增）。一种数据类型，其实例是唯一的且不可变的。
                            </li>
                        </ul>
                    </li>
    
                    <li>对象</li>
                </ul>
                虽然这些数据类型的数量相对较小，但它们使您能够在应用程序中执行有用的功能。对象和函数是语言中的其他基本元素。您可以将对象视为值的命名容器，将函数视为应用程序可以执行的过程。
            </article>
        </section>
        <section class="main-section" id="if...else_statement">
            <header>if...else语句</header>
            <article>
                如果逻辑条件为真，则使用if语句执行语句。如果条件为false，则使用可选的else子句执行语句。if语句如下所示：
    
                <code>if (condition) &#123; statement_1; &#125; else &#123; statement_2; &#125;</code>
                condition可以是任何计算结果为true或false的表达式。有关计算结果为true和false的解释，请参见Boolean。如果condition的计算结果为true，则执行statement_1;否则，执行statement_2。statement_1和statement_2可以是任何语句，包括进一步嵌套的if语句。
                <p>
                    您还可以使用else if复合语句，以便按顺序测试多个条件，如下所示：
                </p>
                <code>
                    if (condition_1) &#123; statement_1; &#125; 
                    else if (condition_2) &#123;statement_2; &#125; 
                    else if (condition_n) &#123; statement_n; &#125; 
                    else &#123;statement_last; &#125;
                </code>
                在多个条件的情况下，仅执行第一个评估为真的逻辑条件。若要执行多个语句，请将它们分组在一个块语句（{... }）。一般来说，最好总是使用块语句，特别是在嵌套if语句时：
    
                <code>
                    if (condition) &#123; statement_1_runs_if_condition_is_true;
                    statement_2_runs_if_condition_is_true; &#125; else &#123;
                    statement_3_runs_if_condition_is_false;
                    statement_4_runs_if_condition_is_false; &#125;
                </code>
                建议不要在条件表达式中使用简单的赋值，因为在浏览代码时，赋值可能会与相等混淆。例如，不要使用以下代码：
                <code>if (x = y) &#123; /* statements here */ &#125;</code>
                如果你需要在条件表达式中使用赋值，一个常见的做法是在赋值周围加上额外的括号。例如：
                <code>if ((x = y)) &#123; /* statements here */ &#125;</code>
            </article>
        </section>
        <section class="main-section" id="while_statement">
            <header>while语句</header>
            <article>
                只要指定的条件计算为true，while语句就会执行其语句。while语句如下所示：
    
                <code>while (condition) statement</code>
                如果条件变为false，则循环内的语句停止执行，控制传递到循环后的语句。
    
                <p>
                    条件测试发生在执行循环中的语句之前。如果条件返回true，则执行语句并再次测试条件。如果条件返回false，则停止执行，并将控制传递给while后面的语句。
                </p>
    
                <p>
                    要执行多个语句，请使用块语句（{... }）对这些语句进行分组。
                </p>
    
                示例：
    
                <p>
                    下面的while循环只要n小于3就会迭代：
                </p>
    
                <code>var n = 0; var x = 0; while (n &lt; 3) &#123; n++; x += n; &#125;</code>
                <p>
                    在每次迭代中，循环递增n并将该值添加到x。因此，x和n取以下值：
                </p>
    
                <ul>
                    <li>第一遍之后：n = 1且x = 1</li>
                    <li>第二遍之后：n = 2和x = 3</li>
                    <li>第三遍之后：n = 3和x = 6</li>
                </ul>
                <p>
                    在完成第三遍之后，条件n < 3不再为真，因此循环终止。 </p>
            </article>
        </section>
        <section class="main-section" id="Function_declarations">
            <header>函数声明</header>
            <article>
                函数定义（也称为函数声明或函数语句）由function关键字组成，后跟：
    
                <ul>
                    <li>函数的名称。</li>
                    <li>
                        函数的参数列表，用圆括号括起来并用逗号分隔。
                    </li>
                    <li>
                        定义函数的JavaScript语句，用大括号{ }括起来。
                    </li>
                </ul>
                <p>
                    例如，下面的代码定义了一个名为square的简单函数：
                </p>
    
                <code>function square(number) &#123; return number * number; &#125;</code>
                <p>
                    函数square有一个参数，叫做number。该函数由一条语句组成，该语句表示返回函数的参数（即number）乘以自身。return语句指定函数返回的值。
                </p>
                <code>return number * number;</code>
                <p>
                    原始参数（如数字）通过值传递给函数;该值被传递给函数，但如果函数更改了参数的值，则该更改不会全局反映或反映在调用函数中。
                </p>
            </article>
        </section>
        <section class="main-section" id="Reference">
            <header>参考文献</header>
            <article>
                <ul>
                    <li>
                        本页中的所有文档均来自
                        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
                    </li>
                </ul>
            </article>
        </section>
    </main>
</body>

</html>
styles.css

html,
body {
    min-width: 290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
}

#navbar {
    position: fixed;
    min-width: 290px;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}

header {
    color: black;
    margin: 10px;
    text-align: center;
    font-size: 1.8em;
    font-weight: thin;
}

#main-doc header {
    text-align: left;
    margin: 0px;
}

#navbar ul {
    height: 88%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#navbar li {
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
}

#navbar a {
    display: block;
    padding: 10px 30px;
    color: #4d4e53;
    text-decoration: none;
    cursor: pointer;
}

#main-doc {
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
}

section article {
    color: #4d4e53;
    margin: 15px;
    font-size: 0.96em;
}

section li {
    margin: 15px 0px 0px 20px;
}

code {
    display: block;
    text-align: left;
    white-space: pre-line;
    position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 815px) {

    /* For mobile phones: */
    #navbar ul {
        border: 1px solid;
        height: 207px;
    }
    
    #navbar {
        background-color: white;
        position: absolute;
        top: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        max-height: 275px;
        border: none;
        z-index: 1;
        border-bottom: 2px solid;
    }
    
    #main-doc {
        position: relative;
        margin-left: 0px;
        margin-top: 270px;
    }
}

@media only screen and (max-width: 400px) {
    #main-doc {
        margin-left: -10px;
    }

    code {
        margin-left: -20px;
        width: 100%;
        padding: 15px;
        padding-left: 10px;
        padding-right: 45px;
        min-width: 233px;
    }
}

  1. 通过建立城市轮廓学习CSS变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="background-buildings sky">
        <div></div>
        <div></div>
        <div class="bb1 building-wrap">
            <div class="bb1a bb1-window"></div>
            <div class="bb1b bb1-window"></div>
            <div class="bb1c bb1-window"></div>
            <div class="bb1d"></div>
        </div>
        <div class="bb2">
            <div class="bb2a"></div>
            <div class="bb2b"></div>
        </div>
        <div class="bb3"></div>
        <div></div>
        <div class="bb4 building-wrap">
            <div class="bb4a"></div>
            <div class="bb4b"></div>
            <div class="bb4c window-wrap">
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
            </div>
        </div>
        <div></div>
        <div></div>
    </div>

    <div class="foreground-buildings">
        <div></div>
        <div></div>
        <div class="fb1 building-wrap">
            <div class="fb1a"></div>
            <div class="fb1b"></div>
            <div class="fb1c"></div>
        </div>
        <div class="fb2">
            <div class="fb2a"></div>
            <div class="fb2b window-wrap">
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
            </div>
        </div>
        <div></div>
        <div class="fb3 building-wrap">
            <div class="fb3a window-wrap">
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
            </div>
            <div class="fb3b"></div>
            <div class="fb3a"></div>
            <div class="fb3b"></div>
        </div>
        <div class="fb4">
            <div class="fb4a"></div>
            <div class="fb4b">
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
            </div>
        </div>
        <div class="fb5"></div>
        <div class="fb6"></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>
styles.css

:root {
    --building-color1: #aa80ff;
    --building-color2: #66cc99;
    --building-color3: #cc6699;
    --building-color4: #538cc6;
    --window-color1: #bb99ff;
    --window-color2: #8cd9b3;
    --window-color3: #d98cb3;
    --window-color4: #8cb3d9;
}

* {
    box-sizing: border-box;
    }

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.background-buildings,
.foreground-buildings {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
}

.building-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.window-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sky {
    background: radial-gradient(closest-corner circle at 15% 15%,
            #ffcf33,
            #ffcf33 20%,
            #ffff66 21%,
            #bbeeff 100%);
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
    width: 10%;
    height: 70%;
}

.bb1a {
    width: 70%;
}

.bb1b {
    width: 80%;
}

.bb1c {
    width: 90%;
}

.bb1d {
    width: 100%;
    height: 70%;
    background: linear-gradient(var(--building-color1) 50%,
            var(--window-color1));
}

.bb1-window {
    height: 10%;
    background: linear-gradient(var(--building-color1),
            var(--window-color1));
}

.bb2 {
    width: 10%;
    height: 50%;
}

.bb2a {
    border-bottom: 5vh solid var(--building-color2);
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
}

.bb2b {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 6%,
            var(--window-color2) 6%,
            var(--window-color2) 9%);
}

.bb3 {
    width: 10%;
    height: 55%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3),
            var(--window-color3) 15%);
}

.bb4 {
    width: 11%;
    height: 58%;
}

.bb4a {
    width: 3%;
    height: 10%;
    background-color: var(--building-color4);
}

.bb4b {
    width: 80%;
    height: 5%;
    background-color: var(--building-color4);
}

.bb4c {
    width: 100%;
    height: 85%;
    background-color: var(--building-color4);
}

.bb4-window {
    width: 18%;
    height: 90%;
    background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
    width: 10%;
    height: 60%;
}

.fb1a {
    border-bottom: 7vh solid var(--building-color4);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
}

.fb1b {
    width: 60%;
    height: 10%;
    background-color: var(--building-color4);
}

.fb1c {
    width: 100%;
    height: 80%;
    background: repeating-linear-gradient(90deg,
            var(--building-color4),
            var(--building-color4) 10%,
            transparent 10%,
            transparent 15%),
        repeating-linear-gradient(var(--building-color4),
            var(--building-color4) 10%,
            var(--window-color4) 10%,
            var(--window-color4) 90%);
}

.fb2 {
    width: 10%;
    height: 40%;
}

.fb2a {
    width: 100%;
    border-bottom: 10vh solid var(--building-color3);
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
}

.fb2b {
    width: 100%;
    height: 75%;
    background-color: var(--building-color3);
}

.fb2-window {
    width: 22%;
    height: 100%;
    background-color: var(--window-color3);
}

.fb3 {
    width: 10%;
    height: 35%;
}

.fb3a {
    width: 80%;
    height: 15%;
    background-color: var(--building-color1);
}

.fb3b {
    width: 100%;
    height: 35%;
    background-color: var(--building-color1);
}

.fb3-window {
    width: 25%;
    height: 80%;
    background-color: var(--window-color1);
}

.fb4 {
    width: 8%;
    height: 45%;
    position: relative;
    left: 10%;
}

.fb4a {
    border-top: 5vh solid transparent;
    border-left: 8vw solid var(--building-color1);
}

.fb4b {
    width: 100%;
    height: 89%;
    background-color: var(--building-color1);
    display: flex;
    flex-wrap: wrap;
}

.fb4-window {
    width: 30%;
    height: 10%;
    border-radius: 50%;
    background-color: var(--window-color1);
    margin: 10%;
}

.fb5 {
    width: 10%;
    height: 33%;
    position: relative;
    right: 10%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 5%,
            transparent 5%,
            transparent 10%),
        repeating-linear-gradient(90deg,
            var(--building-color2),
            var(--building-color2) 12%,
            var(--window-color2) 12%,
            var(--window-color2) 44%);
}

.fb6 {
    width: 9%;
    height: 38%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3) 10%,
            transparent 10%,
            transparent 30%),
        repeating-linear-gradient(var(--building-color3),
            var(--building-color3) 10%,
            var(--window-color3) 10%,
            var(--window-color3) 30%);
}

@media (max-width: 1000px) {
    :root {
        --building-color1: #000;
        --building-color2: #000;
        --building-color3: #000;
        --building-color4: #000;
        --window-color1: #777;
        --window-color2: #777;
        --window-color3: #777;
        --window-color4: #777;
    }

    .sky {
        background: radial-gradient(closest-corner circle at 15% 15%,
                #ccc,
                #ccc 20%,
                #445 21%,
                #223 100%);
    }
}

  1. 通过创建杂志学习CSS网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <main>
        <section class="heading">
            <header class="hero">
                <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
                    alt="freecodecamp logo" loading="lazy" class="hero-img" />
                <h1 class="hero-title">OUR NEW CURRICULUM</h1>
                <p class="hero-subtitle">
                    Our efforts to restructure our curriculum with a more project-based focus
                </p>
            </header>
            <div class="author">
                <p class="author-name">
                    By
                    <a href="https://freecodecamp.org" target="_blank" rel="noreferrer">freeCodeCamp</a>
                </p>
                <p class="publish-date">March 7, 2019</p>
            </div>
            <div class="social-icons">
                <a href="https://www.facebook.com/freecodecamp/">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://twitter.com/freecodecamp/">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://instagram.com/freecodecamp">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/school/free-code-camp/">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://www.youtube.com/freecodecamp">
                    <i class="fab fa-youtube"></i>
                </a>
            </div>
        </section>
        <section class="text">
            <p class="first-paragraph">
                Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding
                challenges, you'll learn through building projects - step by step. Before we get into the details, let
                me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5
                required projects. We are only changing the optional coding challenges.
            </p>
            <p>
                After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on
                the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This
                is what makes time travel possible: the flux capacitor!
            </p>
            <p>
                It wasn't as dramatic as Doc's revelation in Back to the Future. It
                just occurred to me while I was going for a run. The revelation: the entire curriculum should be a
                series of projects. Instead of individual coding challenges, we'll just have projects, each with their
                own seamless series of tests. Each test gives you just enough information to figure out how to get it to
                pass. (And you can view hints if that isn't enough.)
            </p>
            <blockquote>
                <hr />
                <p class="quote">
                    The entire curriculum should be a series of projects
                </p>
                <hr />
            </blockquote>
            <p>
                No more walls of explanatory text. No more walls of tests. Just one
                test at a time, as you build up a working project. Over the course of passing thousands of tests, you
                build up projects and your own understanding of coding fundamentals. There is no transition between
                lessons and projects, because the lessons themselves are baked into projects. And there's plenty of
                repetition to help you retain everything because - hey - building projects in real life has plenty of
                repetition.
            </p>
            <p>
                The main design challenge is taking what is currently paragraphs of explanation and instructions and
                packing them into a single test description text. Each project will involve dozens of tests like this.
                People will be coding the entire time, rather than switching back and forth from "reading mode" to
                "coding mode".
            </p>
            <p>
                Instead of a series of coding challenges, people will be in their code editor passing one test after
                another, quickly building up a project. People will get into a real flow state, similar to what they
                experience when they build the required projects at the end of each certification. They'll get that
                sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
            </p>
        </section>
        <section class="text text-with-images">
            <article class="brief-history">
                <h3 class="list-title">A Brief History</h3>
                <p>Of the Curriculum</p>
                <ul class="lists">
                    <li>
                        <h4 class="list-subtitle">V1 - 2014</h4>
                        <p>
                            We launched freeCodeCamp with a simple list of 15 resources,
                            including Harvard's CS50 and Stanford's Database Class.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V2 - 2015</h4>
                        <p>We added interactive algorithm challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V3 - 2015</h4>
                        <p>
                            We added our own HTML+CSS challenges (before we'd been relying on
                            General Assembly's Dash course for these).
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V4 - 2016</h4>
                        <p>
                            We expanded the curriculum to 3 certifications, including Front
                            End, Back End, and Data Visualization. They each had 10 required
                            projects, but only the Front End section had its own challenges.
                            For the other certs, we were still using external resources like
                            Node School.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V5 - 2017</h4>
                        <p>We added the back end and data visualization challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V6 - 2018</h4>
                        <p>
                            We launched 6 new certifications to replace our old ones. This was
                            the biggest curriculum improvement to date.
                        </p>
                    </li>
                </ul>
            </article>
            <aside class="image-wrapper">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
                    alt="image of the quote machine project" loading="lazy" class="image-1" width="600" height="400" />
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
                    alt="image of a calculator project" loading="lazy" class="image-2" width="400" height="400" />
                <blockquote class="image-quote">
                    <hr />
                    <p class="quote">
                        The millions of people who are learning to code through freeCodeCamp
                        will have an even better resource to help them learn these
                        fundamentals.
                    </p>
                    <hr />
                </blockquote>
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
                    alt="four people working on code" loading="lazy" class="image-3" width="600" height="400" />
            </aside>
        </section>
    </main>
</body>

</html>
styles.css

*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Baskervville', serif;
    color: linen;
    background-color: rgb(20, 30, 40);
}

h1 {
    font-family: 'Anton', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
}

a {
    text-decoration: none;
    color: linen;
}

main {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem;
}

img {
    width: 100%;
    object-fit: cover;
}

hr {
    margin: 1.5rem 0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}

.heading {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
}

.text {
    grid-column: 2 / 3;
    font-size: 1.8rem;
    letter-spacing: 0.6px;
    column-width: 25rem;
    text-align: justify;
}

.hero {
    grid-column: 1 / -1;
    position: relative;
}

.hero-title {
    text-align: center;
    color: orangered;
    font-size: 8rem;
}

.hero-subtitle {
    font-size: 2.4rem;
    color: orangered;
    text-align: center;
}

.author {
    font-size: 2rem;
    font-family: "Raleway", sans-serif;
}

.author-name a:hover {
    background-color: #306203;
}

.publish-date {
    color: rgba(255, 255, 255, 0.5);
}

.social-icons {
    display: grid;
    font-size: 3rem;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

.first-paragraph::first-letter {
    font-size: 6rem;
    color: orangered;
    float: left;
    margin-right: 1rem;
}

.quote {
    color: #00beef;
    font-size: 2.4rem;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

.quote::before {
    content: '" ';
}

.quote::after {
    content: ' "';
}

.text-with-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
    margin-bottom: 3rem;
}

.lists {
    list-style-type: none;
    margin-top: 2rem;
}

.lists li {
    margin-bottom: 1.5rem;
}

.list-title,
.list-subtitle {
    color: #00beef;
}

.image-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, min-content);
    gap: 2rem;
    place-items: center;
}

.image-1,
.image-3 {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
    .image-wrapper {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .text-with-images {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .hero-title {
        font-size: 6rem;
    }

    .hero-subtitle,
    .author,
    .quote,
    .list-title {
        font-size: 1.8rem;
    }
    
    .social-icons {
        font-size: 2rem;
    }
    
    .text {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 420px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

  1. 产品登录页【认证项目】

1
2
index.html
styles.css

  1. 通过构建摩天轮学习CSS动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="wheel">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>

        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
    </div>
</body>

</html>
styles.css

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 50px;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
    transform: rotate(60deg);
}

.line:nth-of-type(3) {
    transform: rotate(120deg);
}

.line:nth-of-type(4) {
    transform: rotate(180deg);
}

.line:nth-of-type(5) {
    transform: rotate(240deg);
}

.line:nth-of-type(6) {
    transform: rotate(300deg);
}

.cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    transform-origin: 50% 0%;
    animation: cabins 10s ease-in-out infinite;
}

.cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
}

.cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
}

.cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
}

.cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cabins {
    0% {
        transform: rotate(0deg);
    }

    25% {
        background-color: yellow;
    }
    
    50% {
        background-color: purple;
    }
    
    75% {
        background-color: yellow;
    }
    
    100% {
        transform: rotate(-360deg);
    }
}

  1. 通过构建企鹅来学习CSS变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="sun"></div>
    <div class="penguin">
        <div class="penguin-head">
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="chin"></div>
            <div class="eye left">
                <div class="eye-lid"></div>
            </div>
            <div class="eye right">
                <div class="eye-lid"></div>
            </div>
            <div class="blush left"></div>
            <div class="blush right"></div>
            <div class="beak top"></div>
            <div class="beak bottom"></div>
        </div>
        <div class="shirt">
            <div>💜</div>
            <p>I CSS</p>
        </div>
        <div class="penguin-body">
            <div class="arm left"></div>
            <div class="arm right"></div>
            <div class="foot left"></div>
            <div class="foot right"></div>
        </div>
    </div>

    <div class="ground"></div>
</body>

</html>
styles.css

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
}

body {
    background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
    position: absolute;
    transform: skew(0deg, 44deg);
    z-index: 2;
    margin-top: 100px;
}

.back-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    left: 110px;
    top: 225px;
}

.sun {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    top: -75px;
    right: -75px;
}

.penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    transition: transform 1s ease-in-out 0ms;
}

.penguin * {
    position: absolute;
}

.penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
}

.penguin-head {
    width: 50%;
    height: 45%;
    background: linear-gradient(45deg,
            var(--penguin-skin),
            rgb(239, 240, 228));
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
}

.face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
}

.face.left {
    left: 5%;
}

.face.right {
    right: 5%;
}

.chin {
    width: 90%;
    height: 70%;
    background-color: var(--penguin-face);
    top: 25%;
    left: 5%;
    border-radius: 70% 70% 100% 100%;
}

.eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 45%;
    border-radius: 50%;
}

.eye.left {
    left: 25%;
}

.eye.right {
    right: 25%;
}

.eye-lid {
    width: 150%;
    height: 100%;
    background-color: var(--penguin-face);
    top: 25%;
    left: -23%;
    border-radius: 50%;
}

.blush {
    width: 15%;
    height: 10%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
}

.blush.left {
    left: 15%;
}

.blush.right {
    right: 15%;
}

.beak {
    height: 10%;
    background-color: var(--penguin-picorna);
    border-radius: 50%;
}

.beak.top {
    width: 20%;
    top: 60%;
    left: 40%;
}

.beak.bottom {
    width: 16%;
    top: 65%;
    left: 42%;
}

.shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 165px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
}

.shirt div {
    font-weight: initial;
    top: 22.5px;
    left: 12px;
}

.penguin-body {
    width: 53%;
    height: 45%;
    background: linear-gradient(45deg,
            rgb(134, 133, 133) 0%,
            rgb(234, 231, 231) 25%,
            white 67%);
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
}

.penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: var(--penguin-skin);
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
}

.arm {
    width: 30%;
    height: 60%;
    background: linear-gradient(90deg,
            var(--penguin-skin),
            rgb(209, 210, 199));
    border-radius: 30% 30% 30% 120%;
    z-index: -1;
}

.arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left;
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
}

.arm.right {
    top: 0%;
    right: -5%;
    transform: rotate(-45deg);
}

@keyframes wave {
    10% {
        transform: rotate(110deg) scaleX(-1);
    }

    20% {
        transform: rotate(130deg) scaleX(-1);
    }
    
    30% {
        transform: rotate(110deg) scaleX(-1);
    }
    
    40% {
        transform: rotate(130deg) scaleX(-1);
    }
}

.foot {
    width: 15%;
    height: 30%;
    background-color: var(--penguin-picorna);
    top: 85%;
    border-radius: 50%;
    z-index: -1;
}

.foot.left {
    left: 25%;
    transform: rotate(80deg);
}

.foot.right {
    right: 25%;
    transform: rotate(-80deg);
}

.ground {
    width: 100vw;
    height: calc(100vh - 300px);
    background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
    z-index: 3;
    position: absolute;
    margin-top: -58px;
}

  1. 个人作品展示页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>

    <!-- 导航栏 -->
    <nav id="navbar" class="nav">
        <ul class="nav-list">
            <li><a href="#welcome-section">关于</a></li>
            <li><a href="#projects">作品</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    
    <!-- 欢迎页 -->
    <section class="welcome-section" id="welcome-section">
        <h1>嗨，我是青橙</h1>
        <p>一个Web前端开发者</p>
    </section>
    
    <!-- 作品集 -->
    <section class="projects-section" id="projects">
        <h2 class="projects-section-header">这是我的一些作品</h2>
        <div class="projects-grid">
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
        </div>
        <a href="" class="btn btn-show-all" target="_blank">展示所有<i class="fas fa-chevron-right"></i></a>
    </section>
    
    <!-- 联系方式 -->
    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2>让我们一起共事…</h2>
            <p>你要怎样联系我？</p>
        </div>
        <div class="contact-links">
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-weixin"></i> 微信
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-qq"></i> QQ
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-github"></i> Github
            </a>
            <a href="mailto:orange****@qq.com" target="_blank" class="btn contact-details">
                <i class="fas fa-at"></i> 邮箱
            </a>
            <a href="tel:191****3043" target="_blank" class="btn contact-details">
                <i class="fas fa-mobile-alt"></i> 电话
            </a>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
        <p>&copy;作者 <a href="https://blog.webrelay.cn" target="_blank">青橙</a></p>
    </footer>

</body>

</html>
styles.css

:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    }

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

/* 
1200px = 75em
980px = 61.25em
460px = 28.75em
 */

@media (max-width: 75em) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 61.25em) {
    html {
        font-size: 58%;
    }
}

@media (max-width: 28.75em) {
    html {
        font-size: 55%;
    }
}

body {
    font-size: 1.8rem; /* 18px */
    color: var(--main-white);
    line-height: 1.4;
    font-weight: 400;
}

h1 {
    font-size: 6rem;
    text-align: center;
}

h2 {
    font-size: 4.2rem;
    text-align: center;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-white);
}

img {
    display: block;
    width: 100%;
}


/* 导航栏 */
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.nav-list {
    display: flex;
    margin-right: 2rem;
}

.nav-list a {
    display: block;
    font-size: 2.2rem;
    padding: 2rem;
}

@media (max-width: 28.75em) {
    .nav {
        justify-content: center;
    }

    .nav-list {
        margin: 0 1rem;
    }
}

.nav-list a:hover {
    background: var(--main-blue);
}

/* 欢迎页 */
.welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

.welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: var(--main-red);
}

/* 作品集 */
.projects-section {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
    .projects-section-header {
        font-size: 4rem;
    }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
    .projects-section {
        padding: 6rem 1rem;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

.project {
    background: var(--main-gray);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.code {
    color: var(--main-gray);
    transition: color 0.3s ease-out;
}

.project:hover .code {
    color: #ff7f50;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px;
}

.btn-show-all {
    font-size: 2rem;
    background: var(--main-gray);
    transition: background 0.3s ease-out;
}

.btn-show-all:hover {
    background: var(--main-red);
}

.btn-show-all:hover > i {
    transform: translateX(2px);
}

.btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/* 联系页 */
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background: var(--main-gray);
}

.contact-section-header > h2 {
    font-size: 6rem;
}

@media (max-width: 28.75em) {
    .contact-section-header > h2 {
        font-size: 4rem;
    }
}

.contact-section-header > p {
    font-style: italic;
}

.contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out;
}

.contact-details:hover {
    transform: translateY(5px);
}

/* 页脚 */
footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--main-gray);
    border-top: 4px solid var(--main-red);
}

footer > p {
    margin: 2rem;
}

@media (max-width: 28.75em) {
    footer {
        flex-direction: column;
        text-align: center;
    }
}
]]> + 本文章汇总了freeCodeCamp网站关于响应式网页设计的所有案例的源码

  1. 通过编写猫咪相册应用学习HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
</head>

<body>
    <main>
        <h1>CatPhotoApp</h1>
        <section>
            <h2>Cat Photos</h2>
            <!-- TODO: Add link to cat photos -->
            <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
            <a href="https://freecatphotoapp.com"><img
                    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
                    alt="A cute orange cat lying on its back."></a>
        </section>
        <section>
            <h2>Cat Lists</h2>
            <h3>Things cats love:</h3>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
                    alt="A slice of lasagna on a plate.">
                <figcaption>Cats <em>love</em> lasagna.</figcaption>
            </figure>
            <h3>Top 3 things cats hate:</h3>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
                    alt="Five cats looking around a field.">
                <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
            </figure>
        </section>
        <section>
            <h2>Cat Form</h2>
            <form action="https://freecatphotoapp.com/submit-cat-photo">
                <fieldset>
                    <legend>Is your cat an indoor or outdoor cat?</legend>
                    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
                    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
                </fieldset>
                <fieldset>
                    <legend>What's your cat's personality?</legend>
                    <input id="loving" type="checkbox" name="personality" value="loving" checked> <label
                        for="loving">Loving</label>
                    <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
                    <input id="energetic" type="checkbox" name="personality" value="energetic"> <label
                        for="energetic">Energetic</label>
                </fieldset>
                <input type="text" name="catphotourl" placeholder="cat photo URL" required>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
        </p>
    </footer>
</body>

</html>

  1. 通过编写咖啡店菜单学习基础CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon" />
                <article class="item">
                    <p class="flavor">French Vanilla</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
                </article>
                <article class="item">
                    <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
                </article>
                <article class="item">
                    <p class="flavor">Hazelnut</p><p class="price">4.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Mocha</p><p class="price">4.50</p>
                </article>
            </section>
            <section>
                <h2>Desserts</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />
                <article class="item">
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
                <article class="item">
                    <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
                </article>
                <article class="item">
                    <p class="dessert">Cheesecake</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
                </article>
            </section>
        </main>
        <hr class="bottom-line">
        <footer>
            <p>
                <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
            </p>
            <p class="address">123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>

</html>
styles.css

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
    font-family: sans-serif;
    padding: 20px;
}

h1 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

h2 {
    font-size: 30px;
}

.established {
    font-style: italic;
}

h1,
h2,
p {
    text-align: center;
}

.menu {
    width: 80%;
    background-color: burlywood;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 500px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -25px;
}

hr {
    height: 2px;
    background-color: brown;
    border-color: brown;
}

.bottom-line {
    margin-top: 25px;
}

h1,
h2 {
    font-family: Impact, serif;
}

.item p {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 18px;
}

.flavor,
.dessert {
    text-align: left;
    width: 75%;
}

.price {
    text-align: right;
    width: 25%;
}

/* FOOTER */

footer {
    font-size: 14px;
}

.address {
    margin-bottom: 5px;
}

a {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: brown;
}

a:active {
    color: brown;
}

  1. 通过构建一组彩色笔来学习CSS颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>CSS Color Markers</h1>
    <div class="container">
        <div class="marker red">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
    </div>
</body>

</html>
styles.css

h1 {
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
    padding: 10px 0;
}

.marker {
    width: 200px;
    height: 25px;
    margin: 10px auto;
}

.cap {
    width: 60px;
    height: 25px;
}

.sleeve {
    width: 110px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap,
.sleeve {
    display: inline-block;
}

.red {
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}

  1. 通过编写注册表单学习HTML表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <fieldset>
            <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text"required /></label>
            <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
            <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
            <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
        </fieldset>
        <fieldset>
            <label for="personal-account"><input id="personal-account" type="radio" name="account-type"class="inline" /> Personal Account</label>
            <label for="business-account"><input id="business-account" type="radio" name="account-type"class="inline" /> Business Account</label>
            <label for="terms-and-conditions">
                <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" />I accept the 
                <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
            </label>
        </fieldset>
        <fieldset>
            <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
            <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13"max="120" /></label>
            <label for="referrer">How did you hear about us?
                <select id="referrer" name="referrer">
                    <option value="">(select one)</option>
                    <option value="1">freeCodeCamp News</option>
                    <option value="2">freeCodeCamp YouTube Channel</option>
                    <option value="3">freeCodeCamp Forum</option>
                    <option value="4">Other</option>
                </select>
            </label>
            <label for="bio">Provide a bio:
                <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
            </label>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>
styles.css

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
}

h1,
p {
    margin: 1em auto;
    text-align: center;
}

form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0;
    border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
    border-bottom: none;
}

label {
    display: block;
    margin: 0.5rem 0;
}

input,
textarea,
select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
}

input,
textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

input[type="file"] {
    padding: 1px 2px;
}

a {
    color: #dfdfe2
}

  1. 调查表单【认证项目】

仿freeCodeCamp Survey Form，技术不精，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
<body>
    <h1 id="title">freeCodeCamp 调查表</h1>
    <p id="description">感谢您花时间帮助我们改进平台</p>
    <form id="survey-form" action="" method="post">

        <label id="name-label">名字<input id="name" name="name" type="text" placeholder="输入您的名字" required></label>
        <label id="email-label">邮箱<input id="email" name="email" type="email" placeholder="输入您的邮箱" required></label>
        <label id="number-label">年龄<span>（可选）</span><input id="number" name="number" type="number" min="0" max="120" placeholder="年龄"></label>
    
        <label for="dropdown">哪个选项最能描述您当前的角色？
            <select id="dropdown" name="dropdown">
                <option value="" disabled selected>选择当前角色</option>
                <option value="1">学生</option>
                <option value="2">全职工作者</option>
                <option value="3">全日制学习者</option>
                <option value="4">宁愿不说</option>
                <option value="5">其他</option>
            </select>
        </label>
    
        你会向朋友推荐 freeCodeCamp 吗？
        <label for="definitely" class="options">
            <input type="radio" id="definitely" class="inline" name="radio" value="definitely">肯定
        </label>
        <label for="maybe" class="options">
            <input type="radio" id="maybe" class="inline" name="radio" value="maybe">也许
        </label>
        <label for="notsure" class="options">
            <input type="radio" name="radio" id="notsure" class="inline" value="notsure">不确定
        </label>
    
        <label for="dropdown2">您最喜欢 freeCodeCamp 的什么功能？
            <select id="dropdown2" name="dropdown2">
                <option value="" disabled selected>选择一个选项</option>
                <option value="1">挑战</option>
                <option value="2">项目</option>
                <option value="3">社区</option>
                <option value="4">开源</option>
            </select>
        </label>
    
        您希望看到哪些改进？<span>（检查所有适用）</span>
        <label for="checkbox1" class="options"><input type="checkbox" name="checkbox1" id="checkbox1"class="inline" value="options1">前端项目</label>
        <label for="checkbox2" class="options"><input type="checkbox" name="checkbox2" id="checkbox2"class="inline" value="options2">后端项目</label>
        <label for="checkbox3" class="options"><input type="checkbox" name="checkbox3" id="checkbox3"class="inline" value="options3">数据可视化</label>
        <label for="checkbox4" class="options"><input type="checkbox" name="checkbox4" id="checkbox4"class="inline" value="options4">挑战</label>
        <label for="checkbox5" class="options"><input type="checkbox" name="checkbox5" id="checkbox5"class="inline" value="options5">开源社区</label>
        <label for="checkbox6" class="options"><input type="checkbox" name="checkbox6" id="checkbox6"class="inline" value="options6">Gitter 帮助室</label>
        <label for="checkbox7" class="options"><input type="checkbox" name="checkbox7" id="checkbox7"class="inline" value="options7">影片</label>
        <label for="checkbox8" class="options"><input type="checkbox" name="checkbox8" id="checkbox8"class="inline" value="options8">城市聚会</label>
        <label for="checkbox9" class="options"><input type="checkbox" name="checkbox9" id="checkbox9"class="inline" value="options8">维基百科</label>
        <label for="checkbox10" class="options"><input type="checkbox" name="checkbox10" id="checkbox10"class="inline" value="options10">论坛</label>
        <label for="checkbox11" class="options"><input type="checkbox" name="checkbox11" id="checkbox11"class="inline" value="options11">附加课程</label>
        <label for="">有什么意见或建议吗？<textarea name="" id="" rows="10" placeholder="在这里输入您的评论…"></textarea></label>
    
        <input type="submit" id="submit" value="提交">
    
    </form>
</body>
</head>

</html
styles.css

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 18px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

h1,
p {
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

h1 {
    margin: 50px auto 8px;
    font-weight: 400;
}

p {
    font-style: italic;
    font-weight: 100;
}

span {
    font-size: 14px;
    vertical-align: text-top;
}

form {
    width: 720px;
    background-color: rgba(27, 27, 50, 0.8);
    color: #ffffff;
    min-width: 480px;
    margin: 30px auto 0;
    padding: 44px;
    border-radius: 4px;
    box-sizing: border-box;
}

label {
    display: block;
    margin: 20px 0;
    padding: 4px 0;
}

label:first-of-type {
    margin-top: 0;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 8px;
    background: #ffffff;
    font-size: 16px;
    padding-left: 8px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

input,
select {
    height: 38px;
}

select {
    color: #495057;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.inline {
    width: unset;
    margin: 0;
}

.options {
    margin: 0px;
    margin-top: 8px;
    padding: 0;
}

textarea {
    padding-left: 8px;
    padding-top: 10px;
    height: 120px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
}

input[type="submit"] {
    background: #37af65;
    color: #ffffff;
    margin-bottom: 20px;
}

  1. 通过创作罗斯科绘画学习CSS盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="frame">
        <div class="canvas">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>

</html>
styles.css

.canvas {
    width: 500px;
    height: 600px;
    background-color: #4d0f00;
    overflow: hidden;
    filter: blur(2px);
}

.frame {
    border: 50px solid black;
    width: 500px;
    padding: 50px;
    margin: 20px auto;
}

.one {
    width: 425px;
    height: 150px;
    background-color: #efb762;
    margin: 20px auto;
    box-shadow: 0 0 3px 3px #efb762;
    border-radius: 9px;
    transform: rotate(-0.6deg);
}

.two {
    width: 475px;
    height: 200px;
    background-color: #8f0401;
    margin: 0 auto 20px;
    box-shadow: 0 0 3px 3px #8f0401;
    border-radius: 8px 10px;
    transform: rotate(0.4deg);
}

.one,
.two {
    filter: blur(1px);
}

.three {
    width: 91%;
    height: 28%;
    background-color: #b20403;
    margin: auto;
    filter: blur(2px);
    box-shadow: 0 0 5px 5px #b20403;
    border-radius: 30px 25px 60px 12px;
    transform: rotate(-0.2deg)
}

  1. 通过创建照片集来学习CSS弹性盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header class="header">
        <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="cat1">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="cat2">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="cat3">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="cat4">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="cat5">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="cat6">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="cat7">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="cat8">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="cat9">
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

body {
    margin: 0;
    font-family: sans-serif;
    background: #f5f6f7;
}

.header {
    text-align: center;
    text-transform: uppercase;
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
}

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
}

.gallery img {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.gallery::after {
    content: "";
    width: 350px;
}

  1. 通过建立营养标签来学习排版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="label">
        <header>
            <h1 class="bold">Nutrition Facts</h1>
            <div class="divider"></div>
            <p>8 servings per container</p>
            <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
        </header>
        <div class="divider large"></div>
        <div class="calories-info">
            <div class="left-container">
                <h2 class="bold small-text">Amount per serving</h2>
                <p>Calories</p>
            </div>
            <span>230</span>
        </div>
        <div class="divider medium"></div>
        <div class="daily-value small-text">
            <p class="bold right no-divider">% Daily Value *</p>
            <div class="divider"></div>
            <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
            <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
            <div class="divider"></div>
            <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
            <div class="divider"></div>
            <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
            <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
            <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
            <p class="indent no-divider">Dietary Fiber 4g</p>
            <div class="divider"></div>
            <p class="indent no-divider">Total Sugars 12g</p>
            <div class="divider double-indent"></div>
            <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
            <div class="divider"></div>
            <p class="no-divider"><span class="bold">Protein</span> 3g</p>
            <div class="divider large"></div>
            <p>Vitamin D 2mcg <span>10%</span></p>
            <p>Calcium 260mg <span>20%</span></p>
            <p>Iron 8mg <span>45%</span></p>
            <p class="no-divider">Potassium 235mg <span>6%</span></p>
        </div>
        <div class="divider medium"></div>
        <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

html {
    font-size: 16px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.label {
    border: 2px solid black;
    width: 270px;
    margin: 20px auto;
    padding: 0 7px;
}

header h1 {
    text-align: center;
    margin: -4px 0;
    letter-spacing: 0.15px
}

p {
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.divider {
    border-bottom: 1px solid #888989;
    margin: 2px 0;
}

.bold {
    font-weight: 800;
}

.large {
    height: 10px;
}

.large,
.medium {
    background-color: black;
    border: 0;
}

.medium {
    height: 5px;
}

.small-text {
    font-size: 0.85rem;
}


.calories-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.calories-info h2 {
    margin: 0;
}

.left-container p {
    margin: -5px -2px;
    font-size: 2em;
    font-weight: 700;
}

.calories-info span {
    margin: -7px -2px;
    font-size: 2.4em;
    font-weight: 700;
}

.right {
    justify-content: flex-end;
}

.indent {
    margin-left: 1em;
}

.double-indent {
    margin-left: 2em;
}

.daily-value p:not(.no-divider) {
    border-bottom: 1px solid #888989;
}

.note {
    font-size: 0.6rem;
    margin: 5px 0;
    padding: 0 8px;
    text-indent: -8px;
}

  1. 通过编写小测验学习无障碍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <header>
        <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
        <h1>HTML/CSS Quiz</h1>
        <nav>
            <ul>
                <li><a href="#student-info" accesskey="i">INFO</a></li>
                <li><a href="#html-questions" accesskey="h">HTML</a></li>
                <li><a href="#css-questions" accesskey="c">CSS</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
                <h2 id="student-info">Student Info</h2>
                <div class="info">
                    <label for="student-name">Name:</label>
                    <input type="text" name="student-name" id="student-name" />
                </div>
                <div class="info">
                    <label for="student-email">Email:</label>
                    <input type="email" name="student-email" id="student-email" />
                </div>
                <div class="info">
                    <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                    <input type="date" name="birth-date" id="birth-date" />
                </div>
            </section>
            <section role="region" aria-labelledby="html-questions">
                <h2 id="html-questions">HTML</h2>
                <div class="question-block">
                    <p>1</p>
                    <fieldset class="question" name="html-question-one">
                        <legend>
                            The legend element represents a caption for the content of its
                            parent fieldset element
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q1-a1">
                                    <input type="radio" id="q1-a1" name="q1" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q1-a2">
                                    <input type="radio" id="q1-a2" name="q1" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
                <div class="question-block">
                    <p>2</p>
                    <fieldset class="question" name="html-question-two">
                        <legend>
                            A label element nesting an input element is required to have a
                            for attribute with the same value as the input's id
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q2-a1">
                                    <input type="radio" id="q2-a1" name="q2" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q2-a2">
                                    <input type="radio" id="q2-a2" name="q2" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
            </section>
            <section role="region" aria-labelledby="css-questions">
                <h2 id="css-questions">CSS</h2>
                <div class="formrow">
                    <div class="question-block">
                        <label for="customer">Are you a frontend developer?</label>
                    </div>
                    <div class="answer">
                        <select name="customer" id="customer" required>
                            <option value="">Select an option</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="question-block">
                        <label for="css-questions">Do you have any questions:</label>
                    </div>
                    <div class="answer">
                        <textarea id="css-questions" name="css-questions" rows="5" cols="24"
                            placeholder="Who is flexbox..."></textarea>
                    </div>
                </div>
            </section>
            <button type="submit">Send</button>
        </form>
    </main>
    <footer>
        <address>
            <a href="https://freecodecamp.org">freeCodeCamp</a><br />
            San Francisco<br />
            California<br />
            USA
        </address>
    </footer>
</body>

</html>
styles.css

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}

header {
    width: 100%;
    height: 50px;
    background-color: #1b1b32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

#logo {
    width: max(100px, 18vw);
    background-color: #0a0a23;
    aspect-ratio: 35 / 4;
    padding: 0.4rem;
}

h1 {
    color: #f1be32;
    font-size: min(5vw, 1.2em);
    text-align: center;
}

nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
}

nav>ul>li {
    color: #dfdfe2;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
}

nav>ul>li:hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
}

li>a {
    color: inherit;
    text-decoration: none;
}

main {
    padding-top: 50px;
}

section {
    width: 80%;
    margin: 0 auto 10px auto;
    max-width: 600px;
}

h1,
h2 {
    font-family: Verdana, Tahoma;
}

h2 {
    border-bottom: 4px solid #dfdfe2;
    margin-top: 0px;
    padding-top: 60px;
}

.info {
    padding: 10px 0 0 5px;
}

.formrow {
    margin-top: 30px;
    padding: 0px 15px;
}

input {
    font-size: 16px;
}

.info label,
.info input {
    display: inline-block;
}

.info input {
    width: 50%;
    text-align: left;
}

.info label {
    width: 10%;
    min-width: 55px;
    text-align: right;
}

.question-block {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: 20px;
    padding-top: 5px;
}

p {
    margin-top: 5px;
    padding-left: 15px;
    font-size: 20px;
}

p::before {
    content: "Question #";
}

.question {
    border: none;
    padding-bottom: 0;
}

.answers-list {
    list-style: none;
    padding: 0;
}

button {
    display: block;
    margin: 40px auto;
    width: 40%;
    padding: 15px;
    font-size: 23px;
    background: #d0d0d5;
    border: 3px solid #3b3b4f;
}

footer {
    background-color: #2a2a40;
    display: flex;
    justify-content: center;
}

footer,
footer a {
    color: #dfdfe2;
}

address {
    text-align: center;
    padding: 0.3em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

  1. 致敬页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title id="title">致敬 - 袁隆平</title>
</head>

<body>
    <main id="main">
        <h1>袁隆平院士</h1>
        <p>杂交水稻之父</p>
        <div id="img-div">
            <img src="https://mstatic.gzstv.com/media/images/2021/05/24/SpiYfUIacL8b.jpg" alt="袁隆平" id="image">
            <div id="img-caption">
                袁隆平院士（左二），攻克了制种关，使杂交水稻的研究获得全面成功，为水稻增产开辟了新的途径。
            </div>
        </div>
        <div id="tribute-info">
            <h3 id="headline">袁隆平的生平：</h3>
            <ul>
                <li><strong>1930年</strong> - 袁隆平出生于北京协和医院，是中国杂交水稻育种专家，被誉为“杂交水稻之父”。</li>
                <li><strong>1953年</strong> - 袁隆平毕业于西南农学院，分配到湖南安江农业学校，从事植物遗传育种工作。</li>
                <li><strong>1964年</strong> - 袁隆平开始了杂交水稻的研究，历经九年的努力，成功培育出世界上第一个杂交水稻品种“南优2号”。</li>
                <li><strong>1981年</strong> - 袁隆平获得中国首届国家特等发明奖。</li>
                <li><strong>1995年</strong> - 袁隆平率领团队开发出新型杂交水稻理论和技术，创造了更高的产量和品质。</li>
                <li><strong>1996年</strong> - 袁隆平启动了超级杂交水稻交配计划。</li>
                <li><strong>1999年</strong> - 小行星8117被命名为“袁隆平星”。</li>
                <li><strong>2001年</strong> - 袁隆平获得国家最高科学技术奖和马格萨萨奖 。</li>
                <li><strong>2004年</strong> - 袁隆平获得沃尔夫农业奖和世界粮食奖 。</li>
                <li><strong>2006年</strong> - 袁隆平成为中国农业领域首位美国科学院外籍院士。</li>
                <li><strong>2010年</strong> - 袁隆平获得食の新潟国际奖佐藤藤三郎特別賞。</li>
                <li><strong>2012年</strong> - 袁隆平获得孔子和平奖。</li>
                <li><strong>2019年</strong> - 袁隆平获得共和国勋章。</li>
                <li><strong>2021年</strong> - 袁隆平因多重器官衰竭在长沙逝世，享年91岁。</li>
            </ul>
        </div>
        <blockquote>
            <p>
                “袁隆平院士是中国杂交水稻事业的开创者，是当代神农。50多年来，始终在农业科研第一线辛勤耕耘、不懈探索，为人类运用科技手段战胜饥饿带来绿色的希望和金色的收获。不仅为解决中国人民的温饱和保障国家粮食安全做出了贡献，更为世界和平和社会进步树立了丰碑。”
            </p>
            <cite>——新浪网评</cite>
        </blockquote>
        <h3>如果你有时间，你应该在他的<a href="https://baike.baidu.com/link?url=9pGya5d8kloerQXYYXKTsU5btV-VGSxt6wC2mXUuFzUh5wQmp0Ji_zuc8lhDpEnLUpYddLfyCQdwUh_8q21xvRf2i8BMOTZZnnEo43Pa7-yQXJMhWUxP2mWdVkEkfkJw" id="tribute-link" target="_blank">百度百科条目</a>上阅读更多关于这个伟大的人的信息。</h3>
    </main>
</body>

</html>
styles.css

html {
    font-size: 10px;
}

body {
    text-align: center;
    color: #333;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

@media (max-width: 460px) {
    h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 460px) {
    #main {
        margin: 0;
    }
}

#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}

#img-caption {
    margin: 15px 0 5px 0;
}

#headline {
    margin: 50px 0;
    text-align: center;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
}

li {
    margin: 16px 0;
}

blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
}

a {
    color: #477ca7;
}

a:visited {
    color: #74638f;
    ;
}

  1. 通过构建资产负债表了解有关CSS伪类选择器的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <main>
        <section>
            <h1>
                <span class="flex">
                    <span>AcmeWidgetCorp</span>
                    <span>Balance Sheet</span>
                </span>
            </h1>
            <div id="years" aria-hidden="true">
                <span class="year">2019</span>
                <span class="year">2020</span>
                <span class="year">2021</span>
            </div>
            <div class="table-wrap">
                <table>
                    <caption>Assets</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only year">2019</span></th>
                            <th><span class="sr-only year">2020</span></th>
                            <th class="current"><span class="sr-only year">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
                            <td>$25</td>
                            <td>$30</td>
                            <td class="current">$28</td>
                        </tr>
                        <tr class="data">
                            <th>Checking <span class="description">Our primary transactional account.</span></th>
                            <td>$54</td>
                            <td>$56</td>
                            <td class="current">$53</td>
                        </tr>
                        <tr class="data">
                            <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
                            <td>$500</td>
                            <td>$650</td>
                            <td class="current">$728</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Assets</span></th>
                            <td>$579</td>
                            <td>$736</td>
                            <td class="current">$809</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Liabilities</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
                            <td>$500</td>
                            <td>$250</td>
                            <td class="current">$0</td>
                        </tr>
                        <tr class="data">
                            <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
                            </th>
                            <td>$200</td>
                            <td>$300</td>
                            <td class="current">$400</td>
                        </tr>
                        <tr class="data">
                            <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
                            <td>$50</td>
                            <td>$50</td>
                            <td class="current">$75</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Liabilities</span></th>
                            <td>$750</td>
                            <td>$600</td>
                            <td class="current">$475</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Net Worth</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="total">
                            <th>Total <span class="sr-only">Net Worth</span></th>
                            <td>$-171</td>
                            <td>$136</td>
                            <td class="current">$334</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</body>

</html>
styles.css

span[class~="sr-only"] {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
}

html {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #0a0a23;
}

h1 {
    max-width: 37.25rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

h1 .flex {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

h1 .flex span:first-of-type {
    font-size: 0.7em;
}

h1 .flex span:last-of-type {
    font-size: 1.2em;
}

section {
    max-width: 40rem;
    margin: 0 auto;
    border: 2px solid #d0d0d5;
}

#years {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    z-index: 999;
    top: 0;
    background: #0a0a23;
    color: #fff;
    padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
    margin: 0 -2px;
}

#years span[class] {
    font-weight: bold;
    width: 4.5rem;
    text-align: right;
}

.table-wrap {
    padding: 0 0.75rem 1.5rem 0.75rem;
}

table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
    position: relative;
    margin-top: 3rem;
}

table caption {
    color: #356eaf;
    font-size: 1.3em;
    font-weight: normal;
    position: absolute;
    top: -2.25rem;
    left: 0.5rem;
}

tbody td {
    width: 100vw;
    min-width: 4rem;
    max-width: 4rem;
}

tbody th {
    width: calc(100% - 12rem);
}

tr[class="total"] {
    border-bottom: 4px double #0a0a23;
    font-weight: bold;
}

tr[class="total"] th {
    text-align: left;
    padding: 0.5rem 0 0.25rem 0.5rem;
}

tr.total td {
    text-align: right;
    padding: 0 0.25rem;
}

tr.total td:nth-of-type(3) {
    padding-right: 0.5rem;
}

tr.total:hover {
    background-color: #99c9ff;
}

td.current {
    font-style: italic;
}

tr.data {
    background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
    text-align: left;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
}

tr.data th .description {
    display: block;
    font-weight: normal;
    font-style: italic;
    padding: 1rem 0 0.75rem;
    margin-right: -13.5rem;
}

tr.data td {
    vertical-align: top;
    padding: 0.3rem 0.25rem 0;
    text-align: right;
}

tr.data td:last-of-type {
    padding: 0.5rem;
}

  1. 创建一副毕加索绘画来学习中级CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>
    <div id="back-wall"></div>
    <div class="characters">
        <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
        </div>
        <div id="black-character">
            <div id="black-hat"></div>
            <div id="gray-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="white-paper">
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
            </div>
        </div>
        <div class="blue" id="blue-left"></div>
        <div class="blue" id="blue-right"></div>
        <div id="orange-character">
            <div id="black-round-hat"></div>
            <div id="eyes-div">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="triangles">
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
            </div>
            <div id="guitar">
                <div class="guitar" id="guitar-left">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="guitar" id="guitar-right">
                    <i class="fas fa-bars"></i>
                </div>
                <div id="guitar-neck"></div>
            </div>
        </div>
    </div>
</body>

</html>
styles.css

body {
    background-color: rgb(184, 132, 46);
}

#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

#white-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 140px 180px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: GhostWhite;
    border-left-color: transparent;
    position: absolute;
    top: -140px;
    left: 0;
}

#black-mask {
    width: 100%;
    height: 50px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#gray-instrument {
    width: 15%;
    height: 40%;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: 50px;
    left: 125px;
    z-index: 1;
}

.black-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 65%;
}

#tan-table {
    width: 450px;
    height: 140px;
    background-color: #D2691E;
    position: absolute;
    top: 275px;
    left: 15px;
    z-index: 1;
}

#black-character {
    width: 300px;
    height: 500px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 30%;
    left: 59%;
}

#black-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 300px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: rgb(45, 31, 19);
    position: absolute;
    top: -150px;
    left: 0;
}

#gray-mask {
    width: 150px;
    height: 150px;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: -10px;
    left: 70px;
}

#white-paper {
    width: 400px;
    height: 100px;
    background-color: GhostWhite;
    position: absolute;
    top: 250px;
    left: -150px;
    z-index: 1;
}

.fa-music {
    display: inline-block;
    margin-top: 8%;
    margin-left: 13%;
}

.blue {
    background-color: #1E90FF;
}

#blue-left {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 20%;
    left: 20%;
}

#blue-right {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 40%;
}

#orange-character {
    width: 250px;
    height: 550px;
    background-color: rgb(240, 78, 42);
    position: absolute;
    top: 25%;
    left: 40%;
}

#black-round-hat {
    width: 180px;
    height: 150px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: -1;
}

#eyes-div {
    width: 180px;
    height: 50px;
    position: absolute;
    top: -40px;
    left: 20px;
    z-index: 3;
}

#triangles {
    width: 250px;
    height: 550px;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 42px 45px 45px 0;
    border-top-color: transparent;
    border-right-color: Gold;
    /* yellow */
    border-bottom-color: transparent;
    border-left-color: transparent;
    display: inline-block;
}

#guitar {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 120px;
    left: 0px;
    z-index: 3;
}

.guitar {
    width: 150px;
    height: 120px;
    background-color: Goldenrod;
    border-radius: 50%;
}

#guitar-left {
    position: absolute;
    left: 0px;
}

#guitar-right {
    position: absolute;
    left: 100px;
}

.fa-bars {
    display: block;
    margin-top: 30%;
    margin-left: 40%;
}

#guitar-neck {
    width: 200px;
    height: 30px;
    background-color: #D2691E;
    position: absolute;
    top: 45px;
    left: 200px;
    z-index: 3;
}

.eyes {
    width: 35px;
    height: 20px;
    background-color: #8B4513;
    border-radius: 20px 50%;
}

.right {
    position: absolute;
    top: 15px;
    right: 30px;
}

.left {
    position: absolute;
    top: 15px;
    left: 30px;
}

.fas {
    font-size: 30px;
}

  1. 通过创建一架钢琴来学习响应式网页设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div id="piano">
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
            alt="freeCodeCamp Logo" />
        <div class="keys">
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
    
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
        </div>
    </div>
</body>

</html>
styles.css

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

#piano {
    background-color: #00471b;
    width: 992px;
    height: 290px;
    margin: 80px auto;
    padding: 90px 20px 0 20px;
    position: relative;
    border-radius: 10px;
}

.keys {
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

.key {
    background-color: #ffffff;
    position: relative;
    width: 41px;
    height: 175px;
    margin: 2px;
    float: left;
    border-radius: 0 0 3px 3px;
}

.key.black--key::after {
    background-color: #1d1e22;
    content: "";
    position: absolute;
    left: -18px;
    width: 32px;
    height: 100px;
    border-radius: 0 0 3px 3px;
}

.logo {
    width: 200px;
    position: absolute;
    top: 23px;
}

@media (max-width: 768px) {
    #piano {
        width: 358px;
    }

    .keys {
        width: 318px;
    }
    
    .logo {
        width: 150px;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    #piano {
        width: 675px;
    }

    .keys {
        width: 633px;
    }
}

  1. 技术文档页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav id="navbar">
        <header>JS文档</header>
        <ul>
            <li><a class="nav-link" href="#Introduction">项目介绍</a></li>
            <li>
                <a class="nav-link" href="#What_you_should_already_know">你应该已经知道的</a>
            </li>
            <li>
                <a class="nav-link" href="#JavaScript_and_Java">JavaScript和Java</a>
            </li>
            <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
            <li><a class="nav-link" href="#Variables">变量</a></li>
            <li>
                <a class="nav-link" href="#Declaring_variables">声明变量</a>
            </li>
            <li><a class="nav-link" href="#Variable_scope">变量范围</a></li>
            <li>
                <a class="nav-link" href="#Global_variables">全局变量</a>
            </li>
            <li><a class="nav-link" href="#Constants">常数</a></li>
            <li><a class="nav-link" href="#Data_types">数据类型</a></li>
            <li>
                <a class="nav-link" href="#if...else_statement">if...else语句</a>
            </li>
            <li><a class="nav-link" href="#while_statement">while语句</a></li>
            <li>
                <a class="nav-link" href="#Function_declarations">函数声明</a>
            </li>
            <li><a class="nav-link" href="#Reference">参考文献</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>项目介绍</header>
            <article>
                <p>
                    JavaScript是一种跨平台、面向对象的脚本语言。它是一种小型和轻量级的语言。在主机环境（例如，Web浏览器）中，JavaScript可以连接到其环境的对象，以提供对它们的编程控制。
                </p>

                <p>
                    JavaScript包含一个标准的对象库，如Array、Date和Math，以及一组核心语言元素，如运算符、控制结构和语句。核心JavaScript可以通过补充额外的对象来扩展各种用途;例如：
                </p>
                <ul>
                    <li>
                        客户端JavaScript通过提供对象来控制浏览器及其文档对象模型（DOM），从而扩展了核心语言。例如，客户端扩展允许应用程序在HTML表单上放置元素，并响应用户事件，如鼠标单击、表单输入和页面导航。
                    </li>
                    <li>
                        服务器端JavaScript通过提供与在服务器上运行JavaScript相关的对象来扩展核心语言。例如，服务器端扩展允许应用程序与数据库通信，提供从应用程序的一个调用到另一个调用的信息的连续性，或者在服务器上执行文件操作。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="What_you_should_already_know">
            <header>你应该已经知道的</header>
            <article>
                <p>本指南假设您具备以下基本背景：</p>
    
                <ul>
                    <li>
                        对互联网和万维网（WWW）有一般的了解。
                    </li>
                    <li>
                        良好的超文本标记语言（HTML）工作知识。
                    </li>
                    <li>
                        有编程经验。如果您是编程新手，请尝试主页上链接的有关JavaScript的教程之一。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="JavaScript_and_Java">
            <header>JavaScript和Java</header>
            <article>
                <p>
                    JavaScript和Java在某些方面是相似的，但在其他方面有根本的不同。JavaScript语言类似于Java，但没有Java的静态类型和强类型检查。JavaScript遵循大多数Java表达式语法，命名约定和基本控制流结构，这就是它从LiveScript重命名为JavaScript的原因。
                </p>
    
                <p>
                    与Java通过声明构建的类的编译时系统相反，JavaScript支持基于少量表示数值、布尔值和字符串值的数据类型的运行时系统。JavaScript具有基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的模型提供动态继承;也就是说，对于各个对象，继承的内容可能不同。JavaScript还支持没有任何特殊声明性要求的函数。函数可以是对象的属性，作为松散类型的方法执行。
                </p>
                <p>
                    与Java相比，JavaScript是一种非常自由的语言。您不必声明所有的变量、类和方法。您不必关心方法是公共的、私有的还是受保护的，也不必实现接口。变量、参数和函数返回类型不是显式类型化的。
                </p>
            </article>
        </section>
        <section class="main-section" id="Hello_world">
            <header>Hello world</header>
            <article>
                要开始编写JavaScript，请打开Scratchpad并编写第一个“Hello world”JavaScript代码：
                <code>
                    function greetMe(yourName) &#123; alert("Hello " + yourName); &#125;
                    greetMe("World");
                </code>
                选择代码板中的代码，然后按Ctrl+R以观看它在浏览器中展开！
            </article>
        </section>
        <section class="main-section" id="Variables">
            <header>变量</header>
            <p>
                在应用程序中，变量用作值的符号名称。变量的名字，称为标识符，符合一定的规则。
            </p>
            <p>
                JavaScript标识符必须以字母、下划线（_）或美元符号（$）开头;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。
            </p>
            <p>
                您可以在标识符中使用ISO 8859-1或Unicode字母，例如å和ü。您还可以使用Unicode转义序列作为标识符中的字符。法律的名称的一些示例包括Number_hits、temp 99和_name。
            </p>
        </section>
        <section class="main-section" id="Declaring_variables">
            <header>声明变量</header>
            <article>
                你可以用三种方式声明一个变量：
                <p>
                    使用关键字var。例如，
                    <code>var x = 42.</code>
                    此语法可用于声明局部和全局变量。
                </p>
                <p>
                    只要给它赋值。例如，
                    <code>x = 42.</code>
                    This总是声明一个全局变量。它会生成严格的JavaScript警告。你不应该使用这个变量。
                </p>
                <p>
                    使用关键字let。例如，
                    <code> let y = 13.</code>
                    此语法可用于声明块范围局部变量。参见下面的变量范围。
                </p>
            </article>
        </section>
        <section class="main-section" id="Variable_scope">
            <header>变量范围</header>
            <article>
                <p>
                    当在任何函数之外声明变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。当你在一个函数中声明一个变量时，它被称为局部变量，因为它只能在该函数中使用。
                </p>
    
                <p>
                    ECMAScript
                    2015之前的JavaScript没有block语句作用域;相反，在块中声明的变量对于块驻留在其中的函数（或全局范围）是本地的。例如，下面的代码将记录5，因为x的作用域是声明x的函数（或全局上下文），而不是块，在这种情况下是if语句。
                </p>
                <code>if (true) &#123; var x = 5; &#125; console.log(x); // 5</code>
                <p>
                    当使用ECMAScript 2015中引入的let声明时，这种行为会发生变化。
                </p>
    
                <code>if (true) &#123; let y = 5; &#125; console.log(y); // ReferenceError: y isnot defined</code>
            </article>
        </section>
        <section class="main-section" id="Global_variables">
            <header>全局变量</header>
            <article>
                <p>
                    全局变量实际上是全局对象的属性。在web页面中，全局对象是window，因此您可以使用window.variable语法设置和访问全局变量。
                </p>
    
                <p>
                    因此，通过指定窗口或框架名称，可以从另一个窗口或框架访问在一个窗口或框架中声明的全局变量。例如，如果在文档中声明了一个名为phoneNumber的变量，则可以从iframe中引用此变量作为parent.phoneNumber。
                </p>
            </article>
        </section>
        <section class="main-section" id="Constants">
            <header>常量</header>
            <article>
                <p>
                    您可以使用const关键字创建一个只读的命名常量。常量标识符的语法与变量标识符的语法相同：它必须以字母、下划线或美元符号开头，并且可以包含字母、数字或下划线字符。
                </p>
    
                <code>const PI = 3.14;</code>
                <p>
                    常量不能通过赋值来更改值，也不能在脚本运行时重新声明。它必须初始化为一个值。
                </p>
    
                <p>
                    常量的作用域规则与let块作用域变量的作用域规则相同。如果省略const关键字，则假定标识符表示变量。
                </p>
    
                <p>
                    不能声明与同一作用域中的函数或变量同名的常量。例如：
                </p>
    
                <code>
                    // THIS WILL CAUSE AN ERROR function f() &#123;&#125;; const f = 5; 
                    // THISWILL CAUSE AN ERROR ALSO function f() &#123; const g = 5; var g;
                    //statements &#125;
                </code>
                但是，对象属性不受保护，因此执行以下语句没有问题。
                <code>
                    const MY_OBJECT = &#123;"key": "value"&#125;; 
                    MY_OBJECT.key ="otherValue";
                </code>
            </article>
        </section>
        <section class="main-section" id="Data_types">
            <header>数据类型</header>
            <article>
                <p>最新的ECMAScript标准定义了七种数据类型：</p>
                <ul>
                    <li>
                        <p>作为基元的六种数据类型：</p>
                        <ul>
                            <li>Boolean. true与false.</li>
                            <li>
                                null. 表示空值的特殊关键字。因为JavaScript是区分大小写的，所以null与Null、NULL或任何其他变体都不相同。
                            </li>
                            <li>
                                undefined. 其值未定义的顶级属性。
                            </li>
                            <li>Number. 42或3.14159.</li>
                            <li>String. "你好"</li>
                            <li>
                                Symbol（ECMAScript 2015中新增）。一种数据类型，其实例是唯一的且不可变的。
                            </li>
                        </ul>
                    </li>
    
                    <li>对象</li>
                </ul>
                虽然这些数据类型的数量相对较小，但它们使您能够在应用程序中执行有用的功能。对象和函数是语言中的其他基本元素。您可以将对象视为值的命名容器，将函数视为应用程序可以执行的过程。
            </article>
        </section>
        <section class="main-section" id="if...else_statement">
            <header>if...else语句</header>
            <article>
                如果逻辑条件为真，则使用if语句执行语句。如果条件为false，则使用可选的else子句执行语句。if语句如下所示：
    
                <code>if (condition) &#123; statement_1; &#125; else &#123; statement_2; &#125;</code>
                condition可以是任何计算结果为true或false的表达式。有关计算结果为true和false的解释，请参见Boolean。如果condition的计算结果为true，则执行statement_1;否则，执行statement_2。statement_1和statement_2可以是任何语句，包括进一步嵌套的if语句。
                <p>
                    您还可以使用else if复合语句，以便按顺序测试多个条件，如下所示：
                </p>
                <code>
                    if (condition_1) &#123; statement_1; &#125; 
                    else if (condition_2) &#123;statement_2; &#125; 
                    else if (condition_n) &#123; statement_n; &#125; 
                    else &#123;statement_last; &#125;
                </code>
                在多个条件的情况下，仅执行第一个评估为真的逻辑条件。若要执行多个语句，请将它们分组在一个块语句（{... }）。一般来说，最好总是使用块语句，特别是在嵌套if语句时：
    
                <code>
                    if (condition) &#123; statement_1_runs_if_condition_is_true;
                    statement_2_runs_if_condition_is_true; &#125; else &#123;
                    statement_3_runs_if_condition_is_false;
                    statement_4_runs_if_condition_is_false; &#125;
                </code>
                建议不要在条件表达式中使用简单的赋值，因为在浏览代码时，赋值可能会与相等混淆。例如，不要使用以下代码：
                <code>if (x = y) &#123; /* statements here */ &#125;</code>
                如果你需要在条件表达式中使用赋值，一个常见的做法是在赋值周围加上额外的括号。例如：
                <code>if ((x = y)) &#123; /* statements here */ &#125;</code>
            </article>
        </section>
        <section class="main-section" id="while_statement">
            <header>while语句</header>
            <article>
                只要指定的条件计算为true，while语句就会执行其语句。while语句如下所示：
    
                <code>while (condition) statement</code>
                如果条件变为false，则循环内的语句停止执行，控制传递到循环后的语句。
    
                <p>
                    条件测试发生在执行循环中的语句之前。如果条件返回true，则执行语句并再次测试条件。如果条件返回false，则停止执行，并将控制传递给while后面的语句。
                </p>
    
                <p>
                    要执行多个语句，请使用块语句（{... }）对这些语句进行分组。
                </p>
    
                示例：
    
                <p>
                    下面的while循环只要n小于3就会迭代：
                </p>
    
                <code>var n = 0; var x = 0; while (n &lt; 3) &#123; n++; x += n; &#125;</code>
                <p>
                    在每次迭代中，循环递增n并将该值添加到x。因此，x和n取以下值：
                </p>
    
                <ul>
                    <li>第一遍之后：n = 1且x = 1</li>
                    <li>第二遍之后：n = 2和x = 3</li>
                    <li>第三遍之后：n = 3和x = 6</li>
                </ul>
                <p>
                    在完成第三遍之后，条件n < 3不再为真，因此循环终止。 </p>
            </article>
        </section>
        <section class="main-section" id="Function_declarations">
            <header>函数声明</header>
            <article>
                函数定义（也称为函数声明或函数语句）由function关键字组成，后跟：
    
                <ul>
                    <li>函数的名称。</li>
                    <li>
                        函数的参数列表，用圆括号括起来并用逗号分隔。
                    </li>
                    <li>
                        定义函数的JavaScript语句，用大括号{ }括起来。
                    </li>
                </ul>
                <p>
                    例如，下面的代码定义了一个名为square的简单函数：
                </p>
    
                <code>function square(number) &#123; return number * number; &#125;</code>
                <p>
                    函数square有一个参数，叫做number。该函数由一条语句组成，该语句表示返回函数的参数（即number）乘以自身。return语句指定函数返回的值。
                </p>
                <code>return number * number;</code>
                <p>
                    原始参数（如数字）通过值传递给函数;该值被传递给函数，但如果函数更改了参数的值，则该更改不会全局反映或反映在调用函数中。
                </p>
            </article>
        </section>
        <section class="main-section" id="Reference">
            <header>参考文献</header>
            <article>
                <ul>
                    <li>
                        本页中的所有文档均来自
                        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
                    </li>
                </ul>
            </article>
        </section>
    </main>
</body>

</html>
styles.css

html,
body {
    min-width: 290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
}

#navbar {
    position: fixed;
    min-width: 290px;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}

header {
    color: black;
    margin: 10px;
    text-align: center;
    font-size: 1.8em;
    font-weight: thin;
}

#main-doc header {
    text-align: left;
    margin: 0px;
}

#navbar ul {
    height: 88%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#navbar li {
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
}

#navbar a {
    display: block;
    padding: 10px 30px;
    color: #4d4e53;
    text-decoration: none;
    cursor: pointer;
}

#main-doc {
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
}

section article {
    color: #4d4e53;
    margin: 15px;
    font-size: 0.96em;
}

section li {
    margin: 15px 0px 0px 20px;
}

code {
    display: block;
    text-align: left;
    white-space: pre-line;
    position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 815px) {

    /* For mobile phones: */
    #navbar ul {
        border: 1px solid;
        height: 207px;
    }
    
    #navbar {
        background-color: white;
        position: absolute;
        top: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        max-height: 275px;
        border: none;
        z-index: 1;
        border-bottom: 2px solid;
    }
    
    #main-doc {
        position: relative;
        margin-left: 0px;
        margin-top: 270px;
    }
}

@media only screen and (max-width: 400px) {
    #main-doc {
        margin-left: -10px;
    }

    code {
        margin-left: -20px;
        width: 100%;
        padding: 15px;
        padding-left: 10px;
        padding-right: 45px;
        min-width: 233px;
    }
}

  1. 通过建立城市轮廓学习CSS变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="background-buildings sky">
        <div></div>
        <div></div>
        <div class="bb1 building-wrap">
            <div class="bb1a bb1-window"></div>
            <div class="bb1b bb1-window"></div>
            <div class="bb1c bb1-window"></div>
            <div class="bb1d"></div>
        </div>
        <div class="bb2">
            <div class="bb2a"></div>
            <div class="bb2b"></div>
        </div>
        <div class="bb3"></div>
        <div></div>
        <div class="bb4 building-wrap">
            <div class="bb4a"></div>
            <div class="bb4b"></div>
            <div class="bb4c window-wrap">
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
            </div>
        </div>
        <div></div>
        <div></div>
    </div>

    <div class="foreground-buildings">
        <div></div>
        <div></div>
        <div class="fb1 building-wrap">
            <div class="fb1a"></div>
            <div class="fb1b"></div>
            <div class="fb1c"></div>
        </div>
        <div class="fb2">
            <div class="fb2a"></div>
            <div class="fb2b window-wrap">
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
            </div>
        </div>
        <div></div>
        <div class="fb3 building-wrap">
            <div class="fb3a window-wrap">
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
            </div>
            <div class="fb3b"></div>
            <div class="fb3a"></div>
            <div class="fb3b"></div>
        </div>
        <div class="fb4">
            <div class="fb4a"></div>
            <div class="fb4b">
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
            </div>
        </div>
        <div class="fb5"></div>
        <div class="fb6"></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>
styles.css

:root {
    --building-color1: #aa80ff;
    --building-color2: #66cc99;
    --building-color3: #cc6699;
    --building-color4: #538cc6;
    --window-color1: #bb99ff;
    --window-color2: #8cd9b3;
    --window-color3: #d98cb3;
    --window-color4: #8cb3d9;
}

* {
    box-sizing: border-box;
    }

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.background-buildings,
.foreground-buildings {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
}

.building-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.window-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sky {
    background: radial-gradient(closest-corner circle at 15% 15%,
            #ffcf33,
            #ffcf33 20%,
            #ffff66 21%,
            #bbeeff 100%);
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
    width: 10%;
    height: 70%;
}

.bb1a {
    width: 70%;
}

.bb1b {
    width: 80%;
}

.bb1c {
    width: 90%;
}

.bb1d {
    width: 100%;
    height: 70%;
    background: linear-gradient(var(--building-color1) 50%,
            var(--window-color1));
}

.bb1-window {
    height: 10%;
    background: linear-gradient(var(--building-color1),
            var(--window-color1));
}

.bb2 {
    width: 10%;
    height: 50%;
}

.bb2a {
    border-bottom: 5vh solid var(--building-color2);
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
}

.bb2b {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 6%,
            var(--window-color2) 6%,
            var(--window-color2) 9%);
}

.bb3 {
    width: 10%;
    height: 55%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3),
            var(--window-color3) 15%);
}

.bb4 {
    width: 11%;
    height: 58%;
}

.bb4a {
    width: 3%;
    height: 10%;
    background-color: var(--building-color4);
}

.bb4b {
    width: 80%;
    height: 5%;
    background-color: var(--building-color4);
}

.bb4c {
    width: 100%;
    height: 85%;
    background-color: var(--building-color4);
}

.bb4-window {
    width: 18%;
    height: 90%;
    background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
    width: 10%;
    height: 60%;
}

.fb1a {
    border-bottom: 7vh solid var(--building-color4);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
}

.fb1b {
    width: 60%;
    height: 10%;
    background-color: var(--building-color4);
}

.fb1c {
    width: 100%;
    height: 80%;
    background: repeating-linear-gradient(90deg,
            var(--building-color4),
            var(--building-color4) 10%,
            transparent 10%,
            transparent 15%),
        repeating-linear-gradient(var(--building-color4),
            var(--building-color4) 10%,
            var(--window-color4) 10%,
            var(--window-color4) 90%);
}

.fb2 {
    width: 10%;
    height: 40%;
}

.fb2a {
    width: 100%;
    border-bottom: 10vh solid var(--building-color3);
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
}

.fb2b {
    width: 100%;
    height: 75%;
    background-color: var(--building-color3);
}

.fb2-window {
    width: 22%;
    height: 100%;
    background-color: var(--window-color3);
}

.fb3 {
    width: 10%;
    height: 35%;
}

.fb3a {
    width: 80%;
    height: 15%;
    background-color: var(--building-color1);
}

.fb3b {
    width: 100%;
    height: 35%;
    background-color: var(--building-color1);
}

.fb3-window {
    width: 25%;
    height: 80%;
    background-color: var(--window-color1);
}

.fb4 {
    width: 8%;
    height: 45%;
    position: relative;
    left: 10%;
}

.fb4a {
    border-top: 5vh solid transparent;
    border-left: 8vw solid var(--building-color1);
}

.fb4b {
    width: 100%;
    height: 89%;
    background-color: var(--building-color1);
    display: flex;
    flex-wrap: wrap;
}

.fb4-window {
    width: 30%;
    height: 10%;
    border-radius: 50%;
    background-color: var(--window-color1);
    margin: 10%;
}

.fb5 {
    width: 10%;
    height: 33%;
    position: relative;
    right: 10%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 5%,
            transparent 5%,
            transparent 10%),
        repeating-linear-gradient(90deg,
            var(--building-color2),
            var(--building-color2) 12%,
            var(--window-color2) 12%,
            var(--window-color2) 44%);
}

.fb6 {
    width: 9%;
    height: 38%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3) 10%,
            transparent 10%,
            transparent 30%),
        repeating-linear-gradient(var(--building-color3),
            var(--building-color3) 10%,
            var(--window-color3) 10%,
            var(--window-color3) 30%);
}

@media (max-width: 1000px) {
    :root {
        --building-color1: #000;
        --building-color2: #000;
        --building-color3: #000;
        --building-color4: #000;
        --window-color1: #777;
        --window-color2: #777;
        --window-color3: #777;
        --window-color4: #777;
    }

    .sky {
        background: radial-gradient(closest-corner circle at 15% 15%,
                #ccc,
                #ccc 20%,
                #445 21%,
                #223 100%);
    }
}

  1. 通过创建杂志学习CSS网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <main>
        <section class="heading">
            <header class="hero">
                <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
                    alt="freecodecamp logo" loading="lazy" class="hero-img" />
                <h1 class="hero-title">OUR NEW CURRICULUM</h1>
                <p class="hero-subtitle">
                    Our efforts to restructure our curriculum with a more project-based focus
                </p>
            </header>
            <div class="author">
                <p class="author-name">
                    By
                    <a href="https://freecodecamp.org" target="_blank" rel="noreferrer">freeCodeCamp</a>
                </p>
                <p class="publish-date">March 7, 2019</p>
            </div>
            <div class="social-icons">
                <a href="https://www.facebook.com/freecodecamp/">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://twitter.com/freecodecamp/">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://instagram.com/freecodecamp">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/school/free-code-camp/">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://www.youtube.com/freecodecamp">
                    <i class="fab fa-youtube"></i>
                </a>
            </div>
        </section>
        <section class="text">
            <p class="first-paragraph">
                Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding
                challenges, you'll learn through building projects - step by step. Before we get into the details, let
                me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5
                required projects. We are only changing the optional coding challenges.
            </p>
            <p>
                After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on
                the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This
                is what makes time travel possible: the flux capacitor!
            </p>
            <p>
                It wasn't as dramatic as Doc's revelation in Back to the Future. It
                just occurred to me while I was going for a run. The revelation: the entire curriculum should be a
                series of projects. Instead of individual coding challenges, we'll just have projects, each with their
                own seamless series of tests. Each test gives you just enough information to figure out how to get it to
                pass. (And you can view hints if that isn't enough.)
            </p>
            <blockquote>
                <hr />
                <p class="quote">
                    The entire curriculum should be a series of projects
                </p>
                <hr />
            </blockquote>
            <p>
                No more walls of explanatory text. No more walls of tests. Just one
                test at a time, as you build up a working project. Over the course of passing thousands of tests, you
                build up projects and your own understanding of coding fundamentals. There is no transition between
                lessons and projects, because the lessons themselves are baked into projects. And there's plenty of
                repetition to help you retain everything because - hey - building projects in real life has plenty of
                repetition.
            </p>
            <p>
                The main design challenge is taking what is currently paragraphs of explanation and instructions and
                packing them into a single test description text. Each project will involve dozens of tests like this.
                People will be coding the entire time, rather than switching back and forth from "reading mode" to
                "coding mode".
            </p>
            <p>
                Instead of a series of coding challenges, people will be in their code editor passing one test after
                another, quickly building up a project. People will get into a real flow state, similar to what they
                experience when they build the required projects at the end of each certification. They'll get that
                sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
            </p>
        </section>
        <section class="text text-with-images">
            <article class="brief-history">
                <h3 class="list-title">A Brief History</h3>
                <p>Of the Curriculum</p>
                <ul class="lists">
                    <li>
                        <h4 class="list-subtitle">V1 - 2014</h4>
                        <p>
                            We launched freeCodeCamp with a simple list of 15 resources,
                            including Harvard's CS50 and Stanford's Database Class.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V2 - 2015</h4>
                        <p>We added interactive algorithm challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V3 - 2015</h4>
                        <p>
                            We added our own HTML+CSS challenges (before we'd been relying on
                            General Assembly's Dash course for these).
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V4 - 2016</h4>
                        <p>
                            We expanded the curriculum to 3 certifications, including Front
                            End, Back End, and Data Visualization. They each had 10 required
                            projects, but only the Front End section had its own challenges.
                            For the other certs, we were still using external resources like
                            Node School.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V5 - 2017</h4>
                        <p>We added the back end and data visualization challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V6 - 2018</h4>
                        <p>
                            We launched 6 new certifications to replace our old ones. This was
                            the biggest curriculum improvement to date.
                        </p>
                    </li>
                </ul>
            </article>
            <aside class="image-wrapper">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
                    alt="image of the quote machine project" loading="lazy" class="image-1" width="600" height="400" />
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
                    alt="image of a calculator project" loading="lazy" class="image-2" width="400" height="400" />
                <blockquote class="image-quote">
                    <hr />
                    <p class="quote">
                        The millions of people who are learning to code through freeCodeCamp
                        will have an even better resource to help them learn these
                        fundamentals.
                    </p>
                    <hr />
                </blockquote>
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
                    alt="four people working on code" loading="lazy" class="image-3" width="600" height="400" />
            </aside>
        </section>
    </main>
</body>

</html>
styles.css

*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Baskervville', serif;
    color: linen;
    background-color: rgb(20, 30, 40);
}

h1 {
    font-family: 'Anton', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
}

a {
    text-decoration: none;
    color: linen;
}

main {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem;
}

img {
    width: 100%;
    object-fit: cover;
}

hr {
    margin: 1.5rem 0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}

.heading {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
}

.text {
    grid-column: 2 / 3;
    font-size: 1.8rem;
    letter-spacing: 0.6px;
    column-width: 25rem;
    text-align: justify;
}

.hero {
    grid-column: 1 / -1;
    position: relative;
}

.hero-title {
    text-align: center;
    color: orangered;
    font-size: 8rem;
}

.hero-subtitle {
    font-size: 2.4rem;
    color: orangered;
    text-align: center;
}

.author {
    font-size: 2rem;
    font-family: "Raleway", sans-serif;
}

.author-name a:hover {
    background-color: #306203;
}

.publish-date {
    color: rgba(255, 255, 255, 0.5);
}

.social-icons {
    display: grid;
    font-size: 3rem;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

.first-paragraph::first-letter {
    font-size: 6rem;
    color: orangered;
    float: left;
    margin-right: 1rem;
}

.quote {
    color: #00beef;
    font-size: 2.4rem;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

.quote::before {
    content: '" ';
}

.quote::after {
    content: ' "';
}

.text-with-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
    margin-bottom: 3rem;
}

.lists {
    list-style-type: none;
    margin-top: 2rem;
}

.lists li {
    margin-bottom: 1.5rem;
}

.list-title,
.list-subtitle {
    color: #00beef;
}

.image-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, min-content);
    gap: 2rem;
    place-items: center;
}

.image-1,
.image-3 {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
    .image-wrapper {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .text-with-images {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .hero-title {
        font-size: 6rem;
    }

    .hero-subtitle,
    .author,
    .quote,
    .list-title {
        font-size: 1.8rem;
    }
    
    .social-icons {
        font-size: 2rem;
    }
    
    .text {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 420px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

  1. 产品登录页【认证项目】

1
2
index.html
styles.css

  1. 通过构建摩天轮学习CSS动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="wheel">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>

        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
    </div>
</body>

</html>
styles.css

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 50px;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
    transform: rotate(60deg);
}

.line:nth-of-type(3) {
    transform: rotate(120deg);
}

.line:nth-of-type(4) {
    transform: rotate(180deg);
}

.line:nth-of-type(5) {
    transform: rotate(240deg);
}

.line:nth-of-type(6) {
    transform: rotate(300deg);
}

.cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    transform-origin: 50% 0%;
    animation: cabins 10s ease-in-out infinite;
}

.cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
}

.cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
}

.cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
}

.cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cabins {
    0% {
        transform: rotate(0deg);
    }

    25% {
        background-color: yellow;
    }
    
    50% {
        background-color: purple;
    }
    
    75% {
        background-color: yellow;
    }
    
    100% {
        transform: rotate(-360deg);
    }
}

  1. 通过构建企鹅来学习CSS变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="sun"></div>
    <div class="penguin">
        <div class="penguin-head">
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="chin"></div>
            <div class="eye left">
                <div class="eye-lid"></div>
            </div>
            <div class="eye right">
                <div class="eye-lid"></div>
            </div>
            <div class="blush left"></div>
            <div class="blush right"></div>
            <div class="beak top"></div>
            <div class="beak bottom"></div>
        </div>
        <div class="shirt">
            <div>💜</div>
            <p>I CSS</p>
        </div>
        <div class="penguin-body">
            <div class="arm left"></div>
            <div class="arm right"></div>
            <div class="foot left"></div>
            <div class="foot right"></div>
        </div>
    </div>

    <div class="ground"></div>
</body>

</html>
styles.css

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
}

body {
    background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
    position: absolute;
    transform: skew(0deg, 44deg);
    z-index: 2;
    margin-top: 100px;
}

.back-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    left: 110px;
    top: 225px;
}

.sun {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    top: -75px;
    right: -75px;
}

.penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    transition: transform 1s ease-in-out 0ms;
}

.penguin * {
    position: absolute;
}

.penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
}

.penguin-head {
    width: 50%;
    height: 45%;
    background: linear-gradient(45deg,
            var(--penguin-skin),
            rgb(239, 240, 228));
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
}

.face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
}

.face.left {
    left: 5%;
}

.face.right {
    right: 5%;
}

.chin {
    width: 90%;
    height: 70%;
    background-color: var(--penguin-face);
    top: 25%;
    left: 5%;
    border-radius: 70% 70% 100% 100%;
}

.eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 45%;
    border-radius: 50%;
}

.eye.left {
    left: 25%;
}

.eye.right {
    right: 25%;
}

.eye-lid {
    width: 150%;
    height: 100%;
    background-color: var(--penguin-face);
    top: 25%;
    left: -23%;
    border-radius: 50%;
}

.blush {
    width: 15%;
    height: 10%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
}

.blush.left {
    left: 15%;
}

.blush.right {
    right: 15%;
}

.beak {
    height: 10%;
    background-color: var(--penguin-picorna);
    border-radius: 50%;
}

.beak.top {
    width: 20%;
    top: 60%;
    left: 40%;
}

.beak.bottom {
    width: 16%;
    top: 65%;
    left: 42%;
}

.shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 165px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
}

.shirt div {
    font-weight: initial;
    top: 22.5px;
    left: 12px;
}

.penguin-body {
    width: 53%;
    height: 45%;
    background: linear-gradient(45deg,
            rgb(134, 133, 133) 0%,
            rgb(234, 231, 231) 25%,
            white 67%);
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
}

.penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: var(--penguin-skin);
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
}

.arm {
    width: 30%;
    height: 60%;
    background: linear-gradient(90deg,
            var(--penguin-skin),
            rgb(209, 210, 199));
    border-radius: 30% 30% 30% 120%;
    z-index: -1;
}

.arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left;
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
}

.arm.right {
    top: 0%;
    right: -5%;
    transform: rotate(-45deg);
}

@keyframes wave {
    10% {
        transform: rotate(110deg) scaleX(-1);
    }

    20% {
        transform: rotate(130deg) scaleX(-1);
    }
    
    30% {
        transform: rotate(110deg) scaleX(-1);
    }
    
    40% {
        transform: rotate(130deg) scaleX(-1);
    }
}

.foot {
    width: 15%;
    height: 30%;
    background-color: var(--penguin-picorna);
    top: 85%;
    border-radius: 50%;
    z-index: -1;
}

.foot.left {
    left: 25%;
    transform: rotate(80deg);
}

.foot.right {
    right: 25%;
    transform: rotate(-80deg);
}

.ground {
    width: 100vw;
    height: calc(100vh - 300px);
    background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
    z-index: 3;
    position: absolute;
    margin-top: -58px;
}

  1. 个人作品展示页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>

    <!-- 导航栏 -->
    <nav id="navbar" class="nav">
        <ul class="nav-list">
            <li><a href="#welcome-section">关于</a></li>
            <li><a href="#projects">作品</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    
    <!-- 欢迎页 -->
    <section class="welcome-section" id="welcome-section">
        <h1>嗨，我是青橙</h1>
        <p>一个Web前端开发者</p>
    </section>
    
    <!-- 作品集 -->
    <section class="projects-section" id="projects">
        <h2 class="projects-section-header">这是我的一些作品</h2>
        <div class="projects-grid">
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
        </div>
        <a href="" class="btn btn-show-all" target="_blank">展示所有<i class="fas fa-chevron-right"></i></a>
    </section>
    
    <!-- 联系方式 -->
    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2>让我们一起共事…</h2>
            <p>你要怎样联系我？</p>
        </div>
        <div class="contact-links">
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-weixin"></i> 微信
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-qq"></i> QQ
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-github"></i> Github
            </a>
            <a href="mailto:orange****@qq.com" target="_blank" class="btn contact-details">
                <i class="fas fa-at"></i> 邮箱
            </a>
            <a href="tel:191****3043" target="_blank" class="btn contact-details">
                <i class="fas fa-mobile-alt"></i> 电话
            </a>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
        <p>&copy;作者 <a href="https://blog.webrelay.cn" target="_blank">青橙</a></p>
    </footer>

</body>

</html>
styles.css

:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    }

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

/* 
1200px = 75em
980px = 61.25em
460px = 28.75em
 */

@media (max-width: 75em) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 61.25em) {
    html {
        font-size: 58%;
    }
}

@media (max-width: 28.75em) {
    html {
        font-size: 55%;
    }
}

body {
    font-size: 1.8rem; /* 18px */
    color: var(--main-white);
    line-height: 1.4;
    font-weight: 400;
}

h1 {
    font-size: 6rem;
    text-align: center;
}

h2 {
    font-size: 4.2rem;
    text-align: center;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-white);
}

img {
    display: block;
    width: 100%;
}


/* 导航栏 */
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.nav-list {
    display: flex;
    margin-right: 2rem;
}

.nav-list a {
    display: block;
    font-size: 2.2rem;
    padding: 2rem;
}

@media (max-width: 28.75em) {
    .nav {
        justify-content: center;
    }

    .nav-list {
        margin: 0 1rem;
    }
}

.nav-list a:hover {
    background: var(--main-blue);
}

/* 欢迎页 */
.welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

.welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: var(--main-red);
}

/* 作品集 */
.projects-section {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
    .projects-section-header {
        font-size: 4rem;
    }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
    .projects-section {
        padding: 6rem 1rem;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

.project {
    background: var(--main-gray);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.code {
    color: var(--main-gray);
    transition: color 0.3s ease-out;
}

.project:hover .code {
    color: #ff7f50;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px;
}

.btn-show-all {
    font-size: 2rem;
    background: var(--main-gray);
    transition: background 0.3s ease-out;
}

.btn-show-all:hover {
    background: var(--main-red);
}

.btn-show-all:hover > i {
    transform: translateX(2px);
}

.btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/* 联系页 */
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background: var(--main-gray);
}

.contact-section-header > h2 {
    font-size: 6rem;
}

@media (max-width: 28.75em) {
    .contact-section-header > h2 {
        font-size: 4rem;
    }
}

.contact-section-header > p {
    font-style: italic;
}

.contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out;
}

.contact-details:hover {
    transform: translateY(5px);
}

/* 页脚 */
footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--main-gray);
    border-top: 4px solid var(--main-red);
}

footer > p {
    margin: 2rem;
}

@media (max-width: 28.75em) {
    footer {
        flex-direction: column;
        text-align: center;
    }
}
]]> @@ -126,13 +126,13 @@ - Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） http://blog.webrelay.cn/minecraft-server/ 2023-04-21T11:55:00.000Z - 2023-11-21T16:48:58.862Z + 2023-11-27T09:39:48.287Z - 你是否在玩Minecraft国际版时想和小伙伴联机一块玩耍却不知道该怎么办，亦或自己手上有台吃灰了很久的云服务器不知道拿来干什么，今天这期教程就教大家如何搭建一个MC服务器。本教程尽可能精简，会省略一些详细步骤，有疑问欢迎在评论区提问。

本文章操作环境

img img img img img img

本服务器到期前会一直开着（到期时间 2023-08-12 12:46:14），欢迎小伙伴来玩

1.19.4原版生存：43.142.236.44:25565

💰 购买服务器

首先得拥有一台Linux服务器，可以在腾讯云、阿里云购买云服务器，一般新用户都会有活动，而且有时还会有免费试用活动等。具体购买步骤略。

img

由于CentOS已停止维护，Java版本最新只能安装Java 11，而 Minecraft 1.16 版本以上需要 Java 11 以上版本支持，所以我原本的CentOS云服务器重装成了Ubuntu系统，具体在控制台 - 重装系统选择系统及版本即可一键重装。

具体对应版本推荐：

Minecraft服务端版本号JDK/Java推荐版本
1.7-8
1.8+8/11
1.12+ ~ 1.15+8/11
1.16+11/16
1.17+ ~ 1.18+16/17

🚀 登录服务器

推荐下载 MobaXterm 或 XShell 远程登录我们的服务器，我以MobaXterm为例，打开软件，点击左上角的Session按钮建立一个连接，选择最左边的SSH

Remote host 填写我们的服务器公网IP，例如43.142.236.44

Specify username Ubuntu默认用户名一般为 ubuntu，CentOS默认用户名一般为root

img

Port 端口号22保持不变，如果服务器未开启22端口，可在服务器控制台 - 防火墙/安全组 - 添加规则 端口填写22确认即可。

创建完Session后打开，会提示让我们输入密码，输入过程中不会显示，输完了以后直接回车即可。如果忘记了密码可在服务器控制台重置密码。出现以下界面表示登录成功：

img

🔧 服务器配置

我们先来到我们的云服务器控制台，找到防火墙/安全组，点击添加规则，依次添加23333，24444，25565三个端口，来源默认为0.0.0.0，如需手动填写请手动填写。

img

回到MobaXterm，依次输入以下指令：

  • Ubuntu系统

切换到管理员权限（$为普通用户权限，#为管理员权限）

1
sudo bash

更新软件包

1
apt update

安装Java环境

1
apt install openjdk-17-jre

查看Java版本（确认安装成功）

1
java -version

安装Node

1
apt install nodejs

安装npm

1
apt install npm

🧩 安装MCSManager

一行命令快速安装

1
wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh

开启MCSManager中文管理面板

1
2
systemctl start mcsm
systemctl status mcsm

img

记住默认管理用户为#master，密码123456

🔑 登录MCSManager

在我们自己电脑的浏览器地址栏中输入云服务器公网IP:23333即可打开登录界面，例如43.142.236.44:23333

img

输入默认的账号和密码即可登录，登录完成后请尽快修改密码

img

💡 配置Minecraft服务端

  • 下载Minecraft Java版服务端（server.jar)

Minecraft官网下载（只能下载最新版本）

img

MCVersion.net （可下载各个版本的服务端及客户端）

img

  • 创建实例

回到MCSManager管理面板，点击 服务端管理 - 创建新实例应用 - 引导创建（推荐）

img

填写实例名称（只能用字母/数字/下划线！），项目位置不用填（默认自动），点击下一步，上传刚刚下载的服务端程序server.jar

img

点击下一步，填写相关参数，全部默认，选择确认无误，立刻创建

img

  • 开启游戏服务器

点击刚刚创建的实例，点击左边的 服务端操作 - 开启服务器 即可运行游戏服务端。启动设置 - 服务器自启推荐打开

img

  • 配置游戏服务器

点击 配置文件 - Server.Properties 即可配置我们的游戏服务器参数，例如游戏模式、地图种子、正版验证、极限模式、玩家互伤等等

img

再打开服务端命令控制台，输入 op 玩家id，给玩家管理员权限，例如op cyan___orange

更多服务端指令请参考：Minecraft：服务器命令大全 - EDER笑笑的文章 - 知乎

img

🕹️ 登录Minecraft服务器

使用对应的游戏版本启动，我用的服务端是最新版本1.19.4版本，那么我的游戏版本也必须是1.19.4，如果使用离线账号登录，那么必须要在服务器配置文件Server.Properties中关闭正版验证

img

进入游戏后，在Minecraft中点击 多人游戏 - 添加服务器

服务器名称：随意

服务器地址：服务器公网IP:25565，例如43.142.236.44:25565

img

点击完成后即可添加我们的服务器，回到服务器列表就可以看到我们的服务器，后面显示绿色即可连接，让我们加入游戏吧！

img

🎉 成功进入游戏 🥳

img

相关链接：

MCSManager | Minecraft 中文管理面板

MobaXterm free Xserver and tabbed SSH client for Windows

XSHELL - NetSarang Website

Download server for Minecraft | Minecraft

参考资料：

【MC】从零开始使用云服务器搭建Minecraft服务器

]]> + 你是否在玩Minecraft国际版时想和小伙伴联机一块玩耍却不知道该怎么办，亦或自己手上有台吃灰了很久的云服务器不知道拿来干什么，今天这期教程就教大家如何搭建一个MC服务器。本教程尽可能精简，会省略一些详细步骤，有疑问欢迎在评论区提问。

本文章操作环境

img img img img img img

本服务器到期前会一直开着（到期时间 2023-08-12 12:46:14），欢迎小伙伴来玩

1.19.4原版生存：43.142.236.44:25565

💰 购买服务器

首先得拥有一台Linux服务器，可以在腾讯云、阿里云购买云服务器，一般新用户都会有活动，而且有时还会有免费试用活动等。具体购买步骤略。

img

由于CentOS已停止维护，Java版本最新只能安装Java 11，而 Minecraft 1.16 版本以上需要 Java 11 以上版本支持，所以我原本的CentOS云服务器重装成了Ubuntu系统，具体在控制台 - 重装系统选择系统及版本即可一键重装。

具体对应版本推荐：

Minecraft服务端版本号JDK/Java推荐版本
1.7-8
1.8+8/11
1.12+ ~ 1.15+8/11
1.16+11/16
1.17+ ~ 1.18+16/17

🚀 登录服务器

推荐下载 MobaXterm 或 XShell 远程登录我们的服务器，我以MobaXterm为例，打开软件，点击左上角的Session按钮建立一个连接，选择最左边的SSH

Remote host 填写我们的服务器公网IP，例如43.142.236.44

Specify username Ubuntu默认用户名一般为 ubuntu，CentOS默认用户名一般为root

img

Port 端口号22保持不变，如果服务器未开启22端口，可在服务器控制台 - 防火墙/安全组 - 添加规则 端口填写22确认即可。

创建完Session后打开，会提示让我们输入密码，输入过程中不会显示，输完了以后直接回车即可。如果忘记了密码可在服务器控制台重置密码。出现以下界面表示登录成功：

img

🔧 服务器配置

我们先来到我们的云服务器控制台，找到防火墙/安全组，点击添加规则，依次添加23333，24444，25565三个端口，来源默认为0.0.0.0，如需手动填写请手动填写。

img

回到MobaXterm，依次输入以下指令：

  • Ubuntu系统

切换到管理员权限（$为普通用户权限，#为管理员权限）

1
sudo bash

更新软件包

1
apt update

安装Java环境

1
apt install openjdk-17-jre

查看Java版本（确认安装成功）

1
java -version

安装Node

1
apt install nodejs

安装npm

1
apt install npm

🧩 安装MCSManager

一行命令快速安装

1
wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh

开启MCSManager中文管理面板

1
2
systemctl start mcsm
systemctl status mcsm

img

记住默认管理用户为#master，密码123456

🔑 登录MCSManager

在我们自己电脑的浏览器地址栏中输入云服务器公网IP:23333即可打开登录界面，例如43.142.236.44:23333

img

输入默认的账号和密码即可登录，登录完成后请尽快修改密码

img

💡 配置Minecraft服务端

  • 下载Minecraft Java版服务端（server.jar)

Minecraft官网下载（只能下载最新版本）

img

MCVersion.net （可下载各个版本的服务端及客户端）

img

  • 创建实例

回到MCSManager管理面板，点击 服务端管理 - 创建新实例应用 - 引导创建（推荐）

img

填写实例名称（只能用字母/数字/下划线！），项目位置不用填（默认自动），点击下一步，上传刚刚下载的服务端程序server.jar

img

点击下一步，填写相关参数，全部默认，选择确认无误，立刻创建

img

  • 开启游戏服务器

点击刚刚创建的实例，点击左边的 服务端操作 - 开启服务器 即可运行游戏服务端。启动设置 - 服务器自启推荐打开

img

  • 配置游戏服务器

点击 配置文件 - Server.Properties 即可配置我们的游戏服务器参数，例如游戏模式、地图种子、正版验证、极限模式、玩家互伤等等

img

再打开服务端命令控制台，输入 op 玩家id，给玩家管理员权限，例如op cyan___orange

更多服务端指令请参考：Minecraft：服务器命令大全 - EDER笑笑的文章 - 知乎

img

🕹️ 登录Minecraft服务器

使用对应的游戏版本启动，我用的服务端是最新版本1.19.4版本，那么我的游戏版本也必须是1.19.4，如果使用离线账号登录，那么必须要在服务器配置文件Server.Properties中关闭正版验证

img

进入游戏后，在Minecraft中点击 多人游戏 - 添加服务器

服务器名称：随意

服务器地址：服务器公网IP:25565，例如43.142.236.44:25565

img

点击完成后即可添加我们的服务器，回到服务器列表就可以看到我们的服务器，后面显示绿色即可连接，让我们加入游戏吧！

img

🎉 成功进入游戏 🥳

img

相关链接：

MCSManager | Minecraft 中文管理面板

MobaXterm free Xserver and tabbed SSH client for Windows

XSHELL - NetSarang Website

Download server for Minecraft | Minecraft

]]> diff --git a/freecodecamp-responsive-web-design/index.html b/freecodecamp-responsive-web-design/index.html index da102fb9..06e0d77f 100644 --- a/freecodecamp-responsive-web-design/index.html +++ b/freecodecamp-responsive-web-design/index.html @@ -14,7 +14,7 @@ - + @@ -131,7 +131,7 @@
-
  1. 1. 通过编写猫咪相册应用学习HTML
  2. 2. 通过编写咖啡店菜单学习基础CSS
  3. 3. 通过构建一组彩色笔来学习CSS颜色
  4. 4. 通过编写注册表单学习HTML表单
  5. 5. 调查表单【认证项目】
  6. 6. 通过创作罗斯科绘画学习CSS盒子模型
  7. 7. 通过创建照片集来学习CSS弹性盒子
  8. 8. 通过建立营养标签来学习排版
  9. 9. 通过编写小测验学习无障碍
  10. 10. 致敬页【认证项目】
  11. 11. 通过构建资产负债表了解有关CSS伪类选择器的更多信息
  12. 12. 创建一副毕加索绘画来学习中级CSS
  13. 13. 通过创建一架钢琴来学习响应式网页设计
  14. 14. 技术文档页【认证项目】
  15. 15. 通过建立城市轮廓学习CSS变量
  16. 16. 通过创建杂志学习CSS网格布局
  17. 17. 产品登录页【认证项目】
  18. 18. 通过构建摩天轮学习CSS动画
  19. 19. 通过构建企鹅来学习CSS变换
  20. 20. 个人作品展示页【认证项目】
+
  1. 1. 通过编写猫咪相册应用学习HTML
  2. 2. 通过编写咖啡店菜单学习基础CSS
  3. 3. 通过构建一组彩色笔来学习CSS颜色
  4. 4. 通过编写注册表单学习HTML表单
  5. 5. 调查表单【认证项目】
  6. 6. 通过创作罗斯科绘画学习CSS盒子模型
  7. 7. 通过创建照片集来学习CSS弹性盒子
  8. 8. 通过建立营养标签来学习排版
  9. 9. 通过编写小测验学习无障碍
  10. 10. 致敬页【认证项目】
  11. 11. 通过构建资产负债表了解有关CSS伪类选择器的更多信息
  12. 12. 创建一副毕加索绘画来学习中级CSS
  13. 13. 通过创建一架钢琴来学习响应式网页设计
  14. 14. 技术文档页【认证项目】
  15. 15. 通过建立城市轮廓学习CSS变量
  16. 16. 通过创建杂志学习CSS网格布局
  17. 17. 产品登录页【认证项目】
  18. 18. 通过构建摩天轮学习CSS动画
  19. 19. 通过构建企鹅来学习CSS变换
  20. 20. 个人作品展示页【认证项目】
 @@ -158,7 +158,7 @@

- (Updated: ) + (Updated: ) @@ -181,103 +181,103 @@

本文章汇总了freeCodeCamp网站关于响应式网页设计的所有案例的源码

    -

  1. 通过编写猫咪相册应用学习HTML

    2. +

  2. 通过编写猫咪相册应用学习HTML

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
</head>

<body>
    <main>
        <h1>CatPhotoApp</h1>
        <section>
            <h2>Cat Photos</h2>
            <!-- TODO: Add link to cat photos -->
            <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
            <a href="https://freecatphotoapp.com"><img
                    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
                    alt="A cute orange cat lying on its back."></a>
        </section>
        <section>
            <h2>Cat Lists</h2>
            <h3>Things cats love:</h3>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
                    alt="A slice of lasagna on a plate.">
                <figcaption>Cats <em>love</em> lasagna.</figcaption>
            </figure>
            <h3>Top 3 things cats hate:</h3>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
                    alt="Five cats looking around a field.">
                <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
            </figure>
        </section>
        <section>
            <h2>Cat Form</h2>
            <form action="https://freecatphotoapp.com/submit-cat-photo">
                <fieldset>
                    <legend>Is your cat an indoor or outdoor cat?</legend>
                    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
                    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
                </fieldset>
                <fieldset>
                    <legend>What's your cat's personality?</legend>
                    <input id="loving" type="checkbox" name="personality" value="loving" checked> <label
                        for="loving">Loving</label>
                    <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
                    <input id="energetic" type="checkbox" name="personality" value="energetic"> <label
                        for="energetic">Energetic</label>
                </fieldset>
                <input type="text" name="catphotourl" placeholder="cat photo URL" required>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
        </p>
    </footer>
</body>

</html>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
</head>

<body>
    <main>
        <h1>CatPhotoApp</h1>
        <section>
            <h2>Cat Photos</h2>
            <!-- TODO: Add link to cat photos -->
            <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
            <a href="https://freecatphotoapp.com"><img
                    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
                    alt="A cute orange cat lying on its back."></a>
        </section>
        <section>
            <h2>Cat Lists</h2>
            <h3>Things cats love:</h3>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
                    alt="A slice of lasagna on a plate.">
                <figcaption>Cats <em>love</em> lasagna.</figcaption>
            </figure>
            <h3>Top 3 things cats hate:</h3>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
                    alt="Five cats looking around a field.">
                <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
            </figure>
        </section>
        <section>
            <h2>Cat Form</h2>
            <form action="https://freecatphotoapp.com/submit-cat-photo">
                <fieldset>
                    <legend>Is your cat an indoor or outdoor cat?</legend>
                    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
                    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
                </fieldset>
                <fieldset>
                    <legend>What's your cat's personality?</legend>
                    <input id="loving" type="checkbox" name="personality" value="loving" checked> <label
                        for="loving">Loving</label>
                    <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
                    <input id="energetic" type="checkbox" name="personality" value="energetic"> <label
                        for="energetic">Energetic</label>
                </fieldset>
                <input type="text" name="catphotourl" placeholder="cat photo URL" required>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
        </p>
    </footer>
</body>

</html>
    -

  1. 通过编写咖啡店菜单学习基础CSS

    2. +

  2. 通过编写咖啡店菜单学习基础CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon" />
                <article class="item">
                    <p class="flavor">French Vanilla</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
                </article>
                <article class="item">
                    <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
                </article>
                <article class="item">
                    <p class="flavor">Hazelnut</p><p class="price">4.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Mocha</p><p class="price">4.50</p>
                </article>
            </section>
            <section>
                <h2>Desserts</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />
                <article class="item">
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
                <article class="item">
                    <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
                </article>
                <article class="item">
                    <p class="dessert">Cheesecake</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
                </article>
            </section>
        </main>
        <hr class="bottom-line">
        <footer>
            <p>
                <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
            </p>
            <p class="address">123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>

</html>
styles.css

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
    font-family: sans-serif;
    padding: 20px;
}

h1 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

h2 {
    font-size: 30px;
}

.established {
    font-style: italic;
}

h1,
h2,
p {
    text-align: center;
}

.menu {
    width: 80%;
    background-color: burlywood;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 500px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -25px;
}

hr {
    height: 2px;
    background-color: brown;
    border-color: brown;
}

.bottom-line {
    margin-top: 25px;
}

h1,
h2 {
    font-family: Impact, serif;
}

.item p {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 18px;
}

.flavor,
.dessert {
    text-align: left;
    width: 75%;
}

.price {
    text-align: right;
    width: 25%;
}

/* FOOTER */

footer {
    font-size: 14px;
}

.address {
    margin-bottom: 5px;
}

a {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: brown;
}

a:active {
    color: brown;
}
    -

  1. 通过构建一组彩色笔来学习CSS颜色

    2. +

  2. 通过构建一组彩色笔来学习CSS颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>CSS Color Markers</h1>
    <div class="container">
        <div class="marker red">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
    </div>
</body>

</html>
styles.css

h1 {
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
    padding: 10px 0;
}

.marker {
    width: 200px;
    height: 25px;
    margin: 10px auto;
}

.cap {
    width: 60px;
    height: 25px;
}

.sleeve {
    width: 110px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap,
.sleeve {
    display: inline-block;
}

.red {
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}
    -

  1. 通过编写注册表单学习HTML表单

    2. +

  2. 通过编写注册表单学习HTML表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <fieldset>
            <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text"required /></label>
            <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
            <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
            <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
        </fieldset>
        <fieldset>
            <label for="personal-account"><input id="personal-account" type="radio" name="account-type"class="inline" /> Personal Account</label>
            <label for="business-account"><input id="business-account" type="radio" name="account-type"class="inline" /> Business Account</label>
            <label for="terms-and-conditions">
                <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" />I accept the 
                <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
            </label>
        </fieldset>
        <fieldset>
            <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
            <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13"max="120" /></label>
            <label for="referrer">How did you hear about us?
                <select id="referrer" name="referrer">
                    <option value="">(select one)</option>
                    <option value="1">freeCodeCamp News</option>
                    <option value="2">freeCodeCamp YouTube Channel</option>
                    <option value="3">freeCodeCamp Forum</option>
                    <option value="4">Other</option>
                </select>
            </label>
            <label for="bio">Provide a bio:
                <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
            </label>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>
styles.css

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
}

h1,
p {
    margin: 1em auto;
    text-align: center;
}

form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0;
    border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
    border-bottom: none;
}

label {
    display: block;
    margin: 0.5rem 0;
}

input,
textarea,
select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
}

input,
textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

input[type="file"] {
    padding: 1px 2px;
}

a {
    color: #dfdfe2
}
    -

  1. 调查表单【认证项目】

    2. +

  2. 调查表单【认证项目】

仿freeCodeCamp Survey Form，技术不精，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
<body>
    <h1 id="title">freeCodeCamp 调查表</h1>
    <p id="description">感谢您花时间帮助我们改进平台</p>
    <form id="survey-form" action="" method="post">

        <label id="name-label">名字<input id="name" name="name" type="text" placeholder="输入您的名字" required></label>
        <label id="email-label">邮箱<input id="email" name="email" type="email" placeholder="输入您的邮箱" required></label>
        <label id="number-label">年龄<span>（可选）</span><input id="number" name="number" type="number" min="0" max="120" placeholder="年龄"></label>
    
        <label for="dropdown">哪个选项最能描述您当前的角色？
            <select id="dropdown" name="dropdown">
                <option value="" disabled selected>选择当前角色</option>
                <option value="1">学生</option>
                <option value="2">全职工作者</option>
                <option value="3">全日制学习者</option>
                <option value="4">宁愿不说</option>
                <option value="5">其他</option>
            </select>
        </label>
    
        你会向朋友推荐 freeCodeCamp 吗？
        <label for="definitely" class="options">
            <input type="radio" id="definitely" class="inline" name="radio" value="definitely">肯定
        </label>
        <label for="maybe" class="options">
            <input type="radio" id="maybe" class="inline" name="radio" value="maybe">也许
        </label>
        <label for="notsure" class="options">
            <input type="radio" name="radio" id="notsure" class="inline" value="notsure">不确定
        </label>
    
        <label for="dropdown2">您最喜欢 freeCodeCamp 的什么功能？
            <select id="dropdown2" name="dropdown2">
                <option value="" disabled selected>选择一个选项</option>
                <option value="1">挑战</option>
                <option value="2">项目</option>
                <option value="3">社区</option>
                <option value="4">开源</option>
            </select>
        </label>
    
        您希望看到哪些改进？<span>（检查所有适用）</span>
        <label for="checkbox1" class="options"><input type="checkbox" name="checkbox1" id="checkbox1"class="inline" value="options1">前端项目</label>
        <label for="checkbox2" class="options"><input type="checkbox" name="checkbox2" id="checkbox2"class="inline" value="options2">后端项目</label>
        <label for="checkbox3" class="options"><input type="checkbox" name="checkbox3" id="checkbox3"class="inline" value="options3">数据可视化</label>
        <label for="checkbox4" class="options"><input type="checkbox" name="checkbox4" id="checkbox4"class="inline" value="options4">挑战</label>
        <label for="checkbox5" class="options"><input type="checkbox" name="checkbox5" id="checkbox5"class="inline" value="options5">开源社区</label>
        <label for="checkbox6" class="options"><input type="checkbox" name="checkbox6" id="checkbox6"class="inline" value="options6">Gitter 帮助室</label>
        <label for="checkbox7" class="options"><input type="checkbox" name="checkbox7" id="checkbox7"class="inline" value="options7">影片</label>
        <label for="checkbox8" class="options"><input type="checkbox" name="checkbox8" id="checkbox8"class="inline" value="options8">城市聚会</label>
        <label for="checkbox9" class="options"><input type="checkbox" name="checkbox9" id="checkbox9"class="inline" value="options8">维基百科</label>
        <label for="checkbox10" class="options"><input type="checkbox" name="checkbox10" id="checkbox10"class="inline" value="options10">论坛</label>
        <label for="checkbox11" class="options"><input type="checkbox" name="checkbox11" id="checkbox11"class="inline" value="options11">附加课程</label>
        <label for="">有什么意见或建议吗？<textarea name="" id="" rows="10" placeholder="在这里输入您的评论…"></textarea></label>
    
        <input type="submit" id="submit" value="提交">
    
    </form>
</body>
</head>

</html
styles.css

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 18px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

h1,
p {
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

h1 {
    margin: 50px auto 8px;
    font-weight: 400;
}

p {
    font-style: italic;
    font-weight: 100;
}

span {
    font-size: 14px;
    vertical-align: text-top;
}

form {
    width: 720px;
    background-color: rgba(27, 27, 50, 0.8);
    color: #ffffff;
    min-width: 480px;
    margin: 30px auto 0;
    padding: 44px;
    border-radius: 4px;
    box-sizing: border-box;
}

label {
    display: block;
    margin: 20px 0;
    padding: 4px 0;
}

label:first-of-type {
    margin-top: 0;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 8px;
    background: #ffffff;
    font-size: 16px;
    padding-left: 8px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

input,
select {
    height: 38px;
}

select {
    color: #495057;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.inline {
    width: unset;
    margin: 0;
}

.options {
    margin: 0px;
    margin-top: 8px;
    padding: 0;
}

textarea {
    padding-left: 8px;
    padding-top: 10px;
    height: 120px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
}

input[type="submit"] {
    background: #37af65;
    color: #ffffff;
    margin-bottom: 20px;
}
    -

  1. 通过创作罗斯科绘画学习CSS盒子模型

    2. +

  2. 通过创作罗斯科绘画学习CSS盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="frame">
        <div class="canvas">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>

</html>
styles.css

.canvas {
    width: 500px;
    height: 600px;
    background-color: #4d0f00;
    overflow: hidden;
    filter: blur(2px);
}

.frame {
    border: 50px solid black;
    width: 500px;
    padding: 50px;
    margin: 20px auto;
}

.one {
    width: 425px;
    height: 150px;
    background-color: #efb762;
    margin: 20px auto;
    box-shadow: 0 0 3px 3px #efb762;
    border-radius: 9px;
    transform: rotate(-0.6deg);
}

.two {
    width: 475px;
    height: 200px;
    background-color: #8f0401;
    margin: 0 auto 20px;
    box-shadow: 0 0 3px 3px #8f0401;
    border-radius: 8px 10px;
    transform: rotate(0.4deg);
}

.one,
.two {
    filter: blur(1px);
}

.three {
    width: 91%;
    height: 28%;
    background-color: #b20403;
    margin: auto;
    filter: blur(2px);
    box-shadow: 0 0 5px 5px #b20403;
    border-radius: 30px 25px 60px 12px;
    transform: rotate(-0.2deg)
}
    -

  1. 通过创建照片集来学习CSS弹性盒子

    2. +

  2. 通过创建照片集来学习CSS弹性盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header class="header">
        <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="cat1">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="cat2">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="cat3">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="cat4">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="cat5">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="cat6">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="cat7">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="cat8">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="cat9">
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

body {
    margin: 0;
    font-family: sans-serif;
    background: #f5f6f7;
}

.header {
    text-align: center;
    text-transform: uppercase;
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
}

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
}

.gallery img {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.gallery::after {
    content: "";
    width: 350px;
}
    -

  1. 通过建立营养标签来学习排版

    2. +

  2. 通过建立营养标签来学习排版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="label">
        <header>
            <h1 class="bold">Nutrition Facts</h1>
            <div class="divider"></div>
            <p>8 servings per container</p>
            <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
        </header>
        <div class="divider large"></div>
        <div class="calories-info">
            <div class="left-container">
                <h2 class="bold small-text">Amount per serving</h2>
                <p>Calories</p>
            </div>
            <span>230</span>
        </div>
        <div class="divider medium"></div>
        <div class="daily-value small-text">
            <p class="bold right no-divider">% Daily Value *</p>
            <div class="divider"></div>
            <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
            <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
            <div class="divider"></div>
            <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
            <div class="divider"></div>
            <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
            <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
            <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
            <p class="indent no-divider">Dietary Fiber 4g</p>
            <div class="divider"></div>
            <p class="indent no-divider">Total Sugars 12g</p>
            <div class="divider double-indent"></div>
            <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
            <div class="divider"></div>
            <p class="no-divider"><span class="bold">Protein</span> 3g</p>
            <div class="divider large"></div>
            <p>Vitamin D 2mcg <span>10%</span></p>
            <p>Calcium 260mg <span>20%</span></p>
            <p>Iron 8mg <span>45%</span></p>
            <p class="no-divider">Potassium 235mg <span>6%</span></p>
        </div>
        <div class="divider medium"></div>
        <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

html {
    font-size: 16px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.label {
    border: 2px solid black;
    width: 270px;
    margin: 20px auto;
    padding: 0 7px;
}

header h1 {
    text-align: center;
    margin: -4px 0;
    letter-spacing: 0.15px
}

p {
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.divider {
    border-bottom: 1px solid #888989;
    margin: 2px 0;
}

.bold {
    font-weight: 800;
}

.large {
    height: 10px;
}

.large,
.medium {
    background-color: black;
    border: 0;
}

.medium {
    height: 5px;
}

.small-text {
    font-size: 0.85rem;
}


.calories-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.calories-info h2 {
    margin: 0;
}

.left-container p {
    margin: -5px -2px;
    font-size: 2em;
    font-weight: 700;
}

.calories-info span {
    margin: -7px -2px;
    font-size: 2.4em;
    font-weight: 700;
}

.right {
    justify-content: flex-end;
}

.indent {
    margin-left: 1em;
}

.double-indent {
    margin-left: 2em;
}

.daily-value p:not(.no-divider) {
    border-bottom: 1px solid #888989;
}

.note {
    font-size: 0.6rem;
    margin: 5px 0;
    padding: 0 8px;
    text-indent: -8px;
}
    -

  1. 通过编写小测验学习无障碍

    2. +

  2. 通过编写小测验学习无障碍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <header>
        <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
        <h1>HTML/CSS Quiz</h1>
        <nav>
            <ul>
                <li><a href="#student-info" accesskey="i">INFO</a></li>
                <li><a href="#html-questions" accesskey="h">HTML</a></li>
                <li><a href="#css-questions" accesskey="c">CSS</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
                <h2 id="student-info">Student Info</h2>
                <div class="info">
                    <label for="student-name">Name:</label>
                    <input type="text" name="student-name" id="student-name" />
                </div>
                <div class="info">
                    <label for="student-email">Email:</label>
                    <input type="email" name="student-email" id="student-email" />
                </div>
                <div class="info">
                    <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                    <input type="date" name="birth-date" id="birth-date" />
                </div>
            </section>
            <section role="region" aria-labelledby="html-questions">
                <h2 id="html-questions">HTML</h2>
                <div class="question-block">
                    <p>1</p>
                    <fieldset class="question" name="html-question-one">
                        <legend>
                            The legend element represents a caption for the content of its
                            parent fieldset element
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q1-a1">
                                    <input type="radio" id="q1-a1" name="q1" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q1-a2">
                                    <input type="radio" id="q1-a2" name="q1" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
                <div class="question-block">
                    <p>2</p>
                    <fieldset class="question" name="html-question-two">
                        <legend>
                            A label element nesting an input element is required to have a
                            for attribute with the same value as the input's id
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q2-a1">
                                    <input type="radio" id="q2-a1" name="q2" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q2-a2">
                                    <input type="radio" id="q2-a2" name="q2" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
            </section>
            <section role="region" aria-labelledby="css-questions">
                <h2 id="css-questions">CSS</h2>
                <div class="formrow">
                    <div class="question-block">
                        <label for="customer">Are you a frontend developer?</label>
                    </div>
                    <div class="answer">
                        <select name="customer" id="customer" required>
                            <option value="">Select an option</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="question-block">
                        <label for="css-questions">Do you have any questions:</label>
                    </div>
                    <div class="answer">
                        <textarea id="css-questions" name="css-questions" rows="5" cols="24"
                            placeholder="Who is flexbox..."></textarea>
                    </div>
                </div>
            </section>
            <button type="submit">Send</button>
        </form>
    </main>
    <footer>
        <address>
            <a href="https://freecodecamp.org">freeCodeCamp</a><br />
            San Francisco<br />
            California<br />
            USA
        </address>
    </footer>
</body>

</html>
styles.css

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}

header {
    width: 100%;
    height: 50px;
    background-color: #1b1b32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

#logo {
    width: max(100px, 18vw);
    background-color: #0a0a23;
    aspect-ratio: 35 / 4;
    padding: 0.4rem;
}

h1 {
    color: #f1be32;
    font-size: min(5vw, 1.2em);
    text-align: center;
}

nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
}

nav>ul>li {
    color: #dfdfe2;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
}

nav>ul>li:hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
}

li>a {
    color: inherit;
    text-decoration: none;
}

main {
    padding-top: 50px;
}

section {
    width: 80%;
    margin: 0 auto 10px auto;
    max-width: 600px;
}

h1,
h2 {
    font-family: Verdana, Tahoma;
}

h2 {
    border-bottom: 4px solid #dfdfe2;
    margin-top: 0px;
    padding-top: 60px;
}

.info {
    padding: 10px 0 0 5px;
}

.formrow {
    margin-top: 30px;
    padding: 0px 15px;
}

input {
    font-size: 16px;
}

.info label,
.info input {
    display: inline-block;
}

.info input {
    width: 50%;
    text-align: left;
}

.info label {
    width: 10%;
    min-width: 55px;
    text-align: right;
}

.question-block {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: 20px;
    padding-top: 5px;
}

p {
    margin-top: 5px;
    padding-left: 15px;
    font-size: 20px;
}

p::before {
    content: "Question #";
}

.question {
    border: none;
    padding-bottom: 0;
}

.answers-list {
    list-style: none;
    padding: 0;
}

button {
    display: block;
    margin: 40px auto;
    width: 40%;
    padding: 15px;
    font-size: 23px;
    background: #d0d0d5;
    border: 3px solid #3b3b4f;
}

footer {
    background-color: #2a2a40;
    display: flex;
    justify-content: center;
}

footer,
footer a {
    color: #dfdfe2;
}

address {
    text-align: center;
    padding: 0.3em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
    -

  1. 致敬页【认证项目】

    2. +

  2. 致敬页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title id="title">致敬 - 袁隆平</title>
</head>

<body>
    <main id="main">
        <h1>袁隆平院士</h1>
        <p>杂交水稻之父</p>
        <div id="img-div">
            <img src="https://mstatic.gzstv.com/media/images/2021/05/24/SpiYfUIacL8b.jpg" alt="袁隆平" id="image">
            <div id="img-caption">
                袁隆平院士（左二），攻克了制种关，使杂交水稻的研究获得全面成功，为水稻增产开辟了新的途径。
            </div>
        </div>
        <div id="tribute-info">
            <h3 id="headline">袁隆平的生平：</h3>
            <ul>
                <li><strong>1930年</strong> - 袁隆平出生于北京协和医院，是中国杂交水稻育种专家，被誉为“杂交水稻之父”。</li>
                <li><strong>1953年</strong> - 袁隆平毕业于西南农学院，分配到湖南安江农业学校，从事植物遗传育种工作。</li>
                <li><strong>1964年</strong> - 袁隆平开始了杂交水稻的研究，历经九年的努力，成功培育出世界上第一个杂交水稻品种“南优2号”。</li>
                <li><strong>1981年</strong> - 袁隆平获得中国首届国家特等发明奖。</li>
                <li><strong>1995年</strong> - 袁隆平率领团队开发出新型杂交水稻理论和技术，创造了更高的产量和品质。</li>
                <li><strong>1996年</strong> - 袁隆平启动了超级杂交水稻交配计划。</li>
                <li><strong>1999年</strong> - 小行星8117被命名为“袁隆平星”。</li>
                <li><strong>2001年</strong> - 袁隆平获得国家最高科学技术奖和马格萨萨奖 。</li>
                <li><strong>2004年</strong> - 袁隆平获得沃尔夫农业奖和世界粮食奖 。</li>
                <li><strong>2006年</strong> - 袁隆平成为中国农业领域首位美国科学院外籍院士。</li>
                <li><strong>2010年</strong> - 袁隆平获得食の新潟国际奖佐藤藤三郎特別賞。</li>
                <li><strong>2012年</strong> - 袁隆平获得孔子和平奖。</li>
                <li><strong>2019年</strong> - 袁隆平获得共和国勋章。</li>
                <li><strong>2021年</strong> - 袁隆平因多重器官衰竭在长沙逝世，享年91岁。</li>
            </ul>
        </div>
        <blockquote>
            <p>
                “袁隆平院士是中国杂交水稻事业的开创者，是当代神农。50多年来，始终在农业科研第一线辛勤耕耘、不懈探索，为人类运用科技手段战胜饥饿带来绿色的希望和金色的收获。不仅为解决中国人民的温饱和保障国家粮食安全做出了贡献，更为世界和平和社会进步树立了丰碑。”
            </p>
            <cite>——新浪网评</cite>
        </blockquote>
        <h3>如果你有时间，你应该在他的<a href="https://baike.baidu.com/link?url=9pGya5d8kloerQXYYXKTsU5btV-VGSxt6wC2mXUuFzUh5wQmp0Ji_zuc8lhDpEnLUpYddLfyCQdwUh_8q21xvRf2i8BMOTZZnnEo43Pa7-yQXJMhWUxP2mWdVkEkfkJw" id="tribute-link" target="_blank">百度百科条目</a>上阅读更多关于这个伟大的人的信息。</h3>
    </main>
</body>

</html>
styles.css

html {
    font-size: 10px;
}

body {
    text-align: center;
    color: #333;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

@media (max-width: 460px) {
    h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 460px) {
    #main {
        margin: 0;
    }
}

#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}

#img-caption {
    margin: 15px 0 5px 0;
}

#headline {
    margin: 50px 0;
    text-align: center;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
}

li {
    margin: 16px 0;
}

blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
}

a {
    color: #477ca7;
}

a:visited {
    color: #74638f;
    ;
}
    -

  1. 通过构建资产负债表了解有关CSS伪类选择器的更多信息

    2. +

  2. 通过构建资产负债表了解有关CSS伪类选择器的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <main>
        <section>
            <h1>
                <span class="flex">
                    <span>AcmeWidgetCorp</span>
                    <span>Balance Sheet</span>
                </span>
            </h1>
            <div id="years" aria-hidden="true">
                <span class="year">2019</span>
                <span class="year">2020</span>
                <span class="year">2021</span>
            </div>
            <div class="table-wrap">
                <table>
                    <caption>Assets</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only year">2019</span></th>
                            <th><span class="sr-only year">2020</span></th>
                            <th class="current"><span class="sr-only year">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
                            <td>$25</td>
                            <td>$30</td>
                            <td class="current">$28</td>
                        </tr>
                        <tr class="data">
                            <th>Checking <span class="description">Our primary transactional account.</span></th>
                            <td>$54</td>
                            <td>$56</td>
                            <td class="current">$53</td>
                        </tr>
                        <tr class="data">
                            <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
                            <td>$500</td>
                            <td>$650</td>
                            <td class="current">$728</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Assets</span></th>
                            <td>$579</td>
                            <td>$736</td>
                            <td class="current">$809</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Liabilities</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
                            <td>$500</td>
                            <td>$250</td>
                            <td class="current">$0</td>
                        </tr>
                        <tr class="data">
                            <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
                            </th>
                            <td>$200</td>
                            <td>$300</td>
                            <td class="current">$400</td>
                        </tr>
                        <tr class="data">
                            <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
                            <td>$50</td>
                            <td>$50</td>
                            <td class="current">$75</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Liabilities</span></th>
                            <td>$750</td>
                            <td>$600</td>
                            <td class="current">$475</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Net Worth</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="total">
                            <th>Total <span class="sr-only">Net Worth</span></th>
                            <td>$-171</td>
                            <td>$136</td>
                            <td class="current">$334</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</body>

</html>
styles.css

span[class~="sr-only"] {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
}

html {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #0a0a23;
}

h1 {
    max-width: 37.25rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

h1 .flex {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

h1 .flex span:first-of-type {
    font-size: 0.7em;
}

h1 .flex span:last-of-type {
    font-size: 1.2em;
}

section {
    max-width: 40rem;
    margin: 0 auto;
    border: 2px solid #d0d0d5;
}

#years {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    z-index: 999;
    top: 0;
    background: #0a0a23;
    color: #fff;
    padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
    margin: 0 -2px;
}

#years span[class] {
    font-weight: bold;
    width: 4.5rem;
    text-align: right;
}

.table-wrap {
    padding: 0 0.75rem 1.5rem 0.75rem;
}

table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
    position: relative;
    margin-top: 3rem;
}

table caption {
    color: #356eaf;
    font-size: 1.3em;
    font-weight: normal;
    position: absolute;
    top: -2.25rem;
    left: 0.5rem;
}

tbody td {
    width: 100vw;
    min-width: 4rem;
    max-width: 4rem;
}

tbody th {
    width: calc(100% - 12rem);
}

tr[class="total"] {
    border-bottom: 4px double #0a0a23;
    font-weight: bold;
}

tr[class="total"] th {
    text-align: left;
    padding: 0.5rem 0 0.25rem 0.5rem;
}

tr.total td {
    text-align: right;
    padding: 0 0.25rem;
}

tr.total td:nth-of-type(3) {
    padding-right: 0.5rem;
}

tr.total:hover {
    background-color: #99c9ff;
}

td.current {
    font-style: italic;
}

tr.data {
    background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
    text-align: left;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
}

tr.data th .description {
    display: block;
    font-weight: normal;
    font-style: italic;
    padding: 1rem 0 0.75rem;
    margin-right: -13.5rem;
}

tr.data td {
    vertical-align: top;
    padding: 0.3rem 0.25rem 0;
    text-align: right;
}

tr.data td:last-of-type {
    padding: 0.5rem;
}
    -

  1. 创建一副毕加索绘画来学习中级CSS

    2. +

  2. 创建一副毕加索绘画来学习中级CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>
    <div id="back-wall"></div>
    <div class="characters">
        <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
        </div>
        <div id="black-character">
            <div id="black-hat"></div>
            <div id="gray-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="white-paper">
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
            </div>
        </div>
        <div class="blue" id="blue-left"></div>
        <div class="blue" id="blue-right"></div>
        <div id="orange-character">
            <div id="black-round-hat"></div>
            <div id="eyes-div">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="triangles">
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
            </div>
            <div id="guitar">
                <div class="guitar" id="guitar-left">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="guitar" id="guitar-right">
                    <i class="fas fa-bars"></i>
                </div>
                <div id="guitar-neck"></div>
            </div>
        </div>
    </div>
</body>

</html>
styles.css

body {
    background-color: rgb(184, 132, 46);
}

#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

#white-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 140px 180px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: GhostWhite;
    border-left-color: transparent;
    position: absolute;
    top: -140px;
    left: 0;
}

#black-mask {
    width: 100%;
    height: 50px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#gray-instrument {
    width: 15%;
    height: 40%;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: 50px;
    left: 125px;
    z-index: 1;
}

.black-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 65%;
}

#tan-table {
    width: 450px;
    height: 140px;
    background-color: #D2691E;
    position: absolute;
    top: 275px;
    left: 15px;
    z-index: 1;
}

#black-character {
    width: 300px;
    height: 500px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 30%;
    left: 59%;
}

#black-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 300px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: rgb(45, 31, 19);
    position: absolute;
    top: -150px;
    left: 0;
}

#gray-mask {
    width: 150px;
    height: 150px;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: -10px;
    left: 70px;
}

#white-paper {
    width: 400px;
    height: 100px;
    background-color: GhostWhite;
    position: absolute;
    top: 250px;
    left: -150px;
    z-index: 1;
}

.fa-music {
    display: inline-block;
    margin-top: 8%;
    margin-left: 13%;
}

.blue {
    background-color: #1E90FF;
}

#blue-left {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 20%;
    left: 20%;
}

#blue-right {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 40%;
}

#orange-character {
    width: 250px;
    height: 550px;
    background-color: rgb(240, 78, 42);
    position: absolute;
    top: 25%;
    left: 40%;
}

#black-round-hat {
    width: 180px;
    height: 150px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: -1;
}

#eyes-div {
    width: 180px;
    height: 50px;
    position: absolute;
    top: -40px;
    left: 20px;
    z-index: 3;
}

#triangles {
    width: 250px;
    height: 550px;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 42px 45px 45px 0;
    border-top-color: transparent;
    border-right-color: Gold;
    /* yellow */
    border-bottom-color: transparent;
    border-left-color: transparent;
    display: inline-block;
}

#guitar {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 120px;
    left: 0px;
    z-index: 3;
}

.guitar {
    width: 150px;
    height: 120px;
    background-color: Goldenrod;
    border-radius: 50%;
}

#guitar-left {
    position: absolute;
    left: 0px;
}

#guitar-right {
    position: absolute;
    left: 100px;
}

.fa-bars {
    display: block;
    margin-top: 30%;
    margin-left: 40%;
}

#guitar-neck {
    width: 200px;
    height: 30px;
    background-color: #D2691E;
    position: absolute;
    top: 45px;
    left: 200px;
    z-index: 3;
}

.eyes {
    width: 35px;
    height: 20px;
    background-color: #8B4513;
    border-radius: 20px 50%;
}

.right {
    position: absolute;
    top: 15px;
    right: 30px;
}

.left {
    position: absolute;
    top: 15px;
    left: 30px;
}

.fas {
    font-size: 30px;
}
    -

  1. 通过创建一架钢琴来学习响应式网页设计

    2. +

  2. 通过创建一架钢琴来学习响应式网页设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div id="piano">
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
            alt="freeCodeCamp Logo" />
        <div class="keys">
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
    
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
        </div>
    </div>
</body>

</html>
styles.css

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

#piano {
    background-color: #00471b;
    width: 992px;
    height: 290px;
    margin: 80px auto;
    padding: 90px 20px 0 20px;
    position: relative;
    border-radius: 10px;
}

.keys {
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

.key {
    background-color: #ffffff;
    position: relative;
    width: 41px;
    height: 175px;
    margin: 2px;
    float: left;
    border-radius: 0 0 3px 3px;
}

.key.black--key::after {
    background-color: #1d1e22;
    content: "";
    position: absolute;
    left: -18px;
    width: 32px;
    height: 100px;
    border-radius: 0 0 3px 3px;
}

.logo {
    width: 200px;
    position: absolute;
    top: 23px;
}

@media (max-width: 768px) {
    #piano {
        width: 358px;
    }

    .keys {
        width: 318px;
    }
    
    .logo {
        width: 150px;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    #piano {
        width: 675px;
    }

    .keys {
        width: 633px;
    }
}
    -

  1. 技术文档页【认证项目】

    2. +

  2. 技术文档页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav id="navbar">
        <header>JS文档</header>
        <ul>
            <li><a class="nav-link" href="#Introduction">项目介绍</a></li>
            <li>
                <a class="nav-link" href="#What_you_should_already_know">你应该已经知道的</a>
            </li>
            <li>
                <a class="nav-link" href="#JavaScript_and_Java">JavaScript和Java</a>
            </li>
            <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
            <li><a class="nav-link" href="#Variables">变量</a></li>
            <li>
                <a class="nav-link" href="#Declaring_variables">声明变量</a>
            </li>
            <li><a class="nav-link" href="#Variable_scope">变量范围</a></li>
            <li>
                <a class="nav-link" href="#Global_variables">全局变量</a>
            </li>
            <li><a class="nav-link" href="#Constants">常数</a></li>
            <li><a class="nav-link" href="#Data_types">数据类型</a></li>
            <li>
                <a class="nav-link" href="#if...else_statement">if...else语句</a>
            </li>
            <li><a class="nav-link" href="#while_statement">while语句</a></li>
            <li>
                <a class="nav-link" href="#Function_declarations">函数声明</a>
            </li>
            <li><a class="nav-link" href="#Reference">参考文献</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>项目介绍</header>
            <article>
                <p>
                    JavaScript是一种跨平台、面向对象的脚本语言。它是一种小型和轻量级的语言。在主机环境（例如，Web浏览器）中，JavaScript可以连接到其环境的对象，以提供对它们的编程控制。
                </p>

                <p>
                    JavaScript包含一个标准的对象库，如Array、Date和Math，以及一组核心语言元素，如运算符、控制结构和语句。核心JavaScript可以通过补充额外的对象来扩展各种用途;例如：
                </p>
                <ul>
                    <li>
                        客户端JavaScript通过提供对象来控制浏览器及其文档对象模型（DOM），从而扩展了核心语言。例如，客户端扩展允许应用程序在HTML表单上放置元素，并响应用户事件，如鼠标单击、表单输入和页面导航。
                    </li>
                    <li>
                        服务器端JavaScript通过提供与在服务器上运行JavaScript相关的对象来扩展核心语言。例如，服务器端扩展允许应用程序与数据库通信，提供从应用程序的一个调用到另一个调用的信息的连续性，或者在服务器上执行文件操作。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="What_you_should_already_know">
            <header>你应该已经知道的</header>
            <article>
                <p>本指南假设您具备以下基本背景：</p>
    
                <ul>
                    <li>
                        对互联网和万维网（WWW）有一般的了解。
                    </li>
                    <li>
                        良好的超文本标记语言（HTML）工作知识。
                    </li>
                    <li>
                        有编程经验。如果您是编程新手，请尝试主页上链接的有关JavaScript的教程之一。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="JavaScript_and_Java">
            <header>JavaScript和Java</header>
            <article>
                <p>
                    JavaScript和Java在某些方面是相似的，但在其他方面有根本的不同。JavaScript语言类似于Java，但没有Java的静态类型和强类型检查。JavaScript遵循大多数Java表达式语法，命名约定和基本控制流结构，这就是它从LiveScript重命名为JavaScript的原因。
                </p>
    
                <p>
                    与Java通过声明构建的类的编译时系统相反，JavaScript支持基于少量表示数值、布尔值和字符串值的数据类型的运行时系统。JavaScript具有基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的模型提供动态继承;也就是说，对于各个对象，继承的内容可能不同。JavaScript还支持没有任何特殊声明性要求的函数。函数可以是对象的属性，作为松散类型的方法执行。
                </p>
                <p>
                    与Java相比，JavaScript是一种非常自由的语言。您不必声明所有的变量、类和方法。您不必关心方法是公共的、私有的还是受保护的，也不必实现接口。变量、参数和函数返回类型不是显式类型化的。
                </p>
            </article>
        </section>
        <section class="main-section" id="Hello_world">
            <header>Hello world</header>
            <article>
                要开始编写JavaScript，请打开Scratchpad并编写第一个“Hello world”JavaScript代码：
                <code>
                    function greetMe(yourName) &#123; alert("Hello " + yourName); &#125;
                    greetMe("World");
                </code>
                选择代码板中的代码，然后按Ctrl+R以观看它在浏览器中展开！
            </article>
        </section>
        <section class="main-section" id="Variables">
            <header>变量</header>
            <p>
                在应用程序中，变量用作值的符号名称。变量的名字，称为标识符，符合一定的规则。
            </p>
            <p>
                JavaScript标识符必须以字母、下划线（_）或美元符号（$）开头;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。
            </p>
            <p>
                您可以在标识符中使用ISO 8859-1或Unicode字母，例如å和ü。您还可以使用Unicode转义序列作为标识符中的字符。法律的名称的一些示例包括Number_hits、temp 99和_name。
            </p>
        </section>
        <section class="main-section" id="Declaring_variables">
            <header>声明变量</header>
            <article>
                你可以用三种方式声明一个变量：
                <p>
                    使用关键字var。例如，
                    <code>var x = 42.</code>
                    此语法可用于声明局部和全局变量。
                </p>
                <p>
                    只要给它赋值。例如，
                    <code>x = 42.</code>
                    This总是声明一个全局变量。它会生成严格的JavaScript警告。你不应该使用这个变量。
                </p>
                <p>
                    使用关键字let。例如，
                    <code> let y = 13.</code>
                    此语法可用于声明块范围局部变量。参见下面的变量范围。
                </p>
            </article>
        </section>
        <section class="main-section" id="Variable_scope">
            <header>变量范围</header>
            <article>
                <p>
                    当在任何函数之外声明变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。当你在一个函数中声明一个变量时，它被称为局部变量，因为它只能在该函数中使用。
                </p>
    
                <p>
                    ECMAScript
                    2015之前的JavaScript没有block语句作用域;相反，在块中声明的变量对于块驻留在其中的函数（或全局范围）是本地的。例如，下面的代码将记录5，因为x的作用域是声明x的函数（或全局上下文），而不是块，在这种情况下是if语句。
                </p>
                <code>if (true) &#123; var x = 5; &#125; console.log(x); // 5</code>
                <p>
                    当使用ECMAScript 2015中引入的let声明时，这种行为会发生变化。
                </p>
    
                <code>if (true) &#123; let y = 5; &#125; console.log(y); // ReferenceError: y isnot defined</code>
            </article>
        </section>
        <section class="main-section" id="Global_variables">
            <header>全局变量</header>
            <article>
                <p>
                    全局变量实际上是全局对象的属性。在web页面中，全局对象是window，因此您可以使用window.variable语法设置和访问全局变量。
                </p>
    
                <p>
                    因此，通过指定窗口或框架名称，可以从另一个窗口或框架访问在一个窗口或框架中声明的全局变量。例如，如果在文档中声明了一个名为phoneNumber的变量，则可以从iframe中引用此变量作为parent.phoneNumber。
                </p>
            </article>
        </section>
        <section class="main-section" id="Constants">
            <header>常量</header>
            <article>
                <p>
                    您可以使用const关键字创建一个只读的命名常量。常量标识符的语法与变量标识符的语法相同：它必须以字母、下划线或美元符号开头，并且可以包含字母、数字或下划线字符。
                </p>
    
                <code>const PI = 3.14;</code>
                <p>
                    常量不能通过赋值来更改值，也不能在脚本运行时重新声明。它必须初始化为一个值。
                </p>
    
                <p>
                    常量的作用域规则与let块作用域变量的作用域规则相同。如果省略const关键字，则假定标识符表示变量。
                </p>
    
                <p>
                    不能声明与同一作用域中的函数或变量同名的常量。例如：
                </p>
    
                <code>
                    // THIS WILL CAUSE AN ERROR function f() &#123;&#125;; const f = 5; 
                    // THISWILL CAUSE AN ERROR ALSO function f() &#123; const g = 5; var g;
                    //statements &#125;
                </code>
                但是，对象属性不受保护，因此执行以下语句没有问题。
                <code>
                    const MY_OBJECT = &#123;"key": "value"&#125;; 
                    MY_OBJECT.key ="otherValue";
                </code>
            </article>
        </section>
        <section class="main-section" id="Data_types">
            <header>数据类型</header>
            <article>
                <p>最新的ECMAScript标准定义了七种数据类型：</p>
                <ul>
                    <li>
                        <p>作为基元的六种数据类型：</p>
                        <ul>
                            <li>Boolean. true与false.</li>
                            <li>
                                null. 表示空值的特殊关键字。因为JavaScript是区分大小写的，所以null与Null、NULL或任何其他变体都不相同。
                            </li>
                            <li>
                                undefined. 其值未定义的顶级属性。
                            </li>
                            <li>Number. 42或3.14159.</li>
                            <li>String. "你好"</li>
                            <li>
                                Symbol（ECMAScript 2015中新增）。一种数据类型，其实例是唯一的且不可变的。
                            </li>
                        </ul>
                    </li>
    
                    <li>对象</li>
                </ul>
                虽然这些数据类型的数量相对较小，但它们使您能够在应用程序中执行有用的功能。对象和函数是语言中的其他基本元素。您可以将对象视为值的命名容器，将函数视为应用程序可以执行的过程。
            </article>
        </section>
        <section class="main-section" id="if...else_statement">
            <header>if...else语句</header>
            <article>
                如果逻辑条件为真，则使用if语句执行语句。如果条件为false，则使用可选的else子句执行语句。if语句如下所示：
    
                <code>if (condition) &#123; statement_1; &#125; else &#123; statement_2; &#125;</code>
                condition可以是任何计算结果为true或false的表达式。有关计算结果为true和false的解释，请参见Boolean。如果condition的计算结果为true，则执行statement_1;否则，执行statement_2。statement_1和statement_2可以是任何语句，包括进一步嵌套的if语句。
                <p>
                    您还可以使用else if复合语句，以便按顺序测试多个条件，如下所示：
                </p>
                <code>
                    if (condition_1) &#123; statement_1; &#125; 
                    else if (condition_2) &#123;statement_2; &#125; 
                    else if (condition_n) &#123; statement_n; &#125; 
                    else &#123;statement_last; &#125;
                </code>
                在多个条件的情况下，仅执行第一个评估为真的逻辑条件。若要执行多个语句，请将它们分组在一个块语句（{... }）。一般来说，最好总是使用块语句，特别是在嵌套if语句时：
    
                <code>
                    if (condition) &#123; statement_1_runs_if_condition_is_true;
                    statement_2_runs_if_condition_is_true; &#125; else &#123;
                    statement_3_runs_if_condition_is_false;
                    statement_4_runs_if_condition_is_false; &#125;
                </code>
                建议不要在条件表达式中使用简单的赋值，因为在浏览代码时，赋值可能会与相等混淆。例如，不要使用以下代码：
                <code>if (x = y) &#123; /* statements here */ &#125;</code>
                如果你需要在条件表达式中使用赋值，一个常见的做法是在赋值周围加上额外的括号。例如：
                <code>if ((x = y)) &#123; /* statements here */ &#125;</code>
            </article>
        </section>
        <section class="main-section" id="while_statement">
            <header>while语句</header>
            <article>
                只要指定的条件计算为true，while语句就会执行其语句。while语句如下所示：
    
                <code>while (condition) statement</code>
                如果条件变为false，则循环内的语句停止执行，控制传递到循环后的语句。
    
                <p>
                    条件测试发生在执行循环中的语句之前。如果条件返回true，则执行语句并再次测试条件。如果条件返回false，则停止执行，并将控制传递给while后面的语句。
                </p>
    
                <p>
                    要执行多个语句，请使用块语句（{... }）对这些语句进行分组。
                </p>
    
                示例：
    
                <p>
                    下面的while循环只要n小于3就会迭代：
                </p>
    
                <code>var n = 0; var x = 0; while (n &lt; 3) &#123; n++; x += n; &#125;</code>
                <p>
                    在每次迭代中，循环递增n并将该值添加到x。因此，x和n取以下值：
                </p>
    
                <ul>
                    <li>第一遍之后：n = 1且x = 1</li>
                    <li>第二遍之后：n = 2和x = 3</li>
                    <li>第三遍之后：n = 3和x = 6</li>
                </ul>
                <p>
                    在完成第三遍之后，条件n < 3不再为真，因此循环终止。 </p>
            </article>
        </section>
        <section class="main-section" id="Function_declarations">
            <header>函数声明</header>
            <article>
                函数定义（也称为函数声明或函数语句）由function关键字组成，后跟：
    
                <ul>
                    <li>函数的名称。</li>
                    <li>
                        函数的参数列表，用圆括号括起来并用逗号分隔。
                    </li>
                    <li>
                        定义函数的JavaScript语句，用大括号{ }括起来。
                    </li>
                </ul>
                <p>
                    例如，下面的代码定义了一个名为square的简单函数：
                </p>
    
                <code>function square(number) &#123; return number * number; &#125;</code>
                <p>
                    函数square有一个参数，叫做number。该函数由一条语句组成，该语句表示返回函数的参数（即number）乘以自身。return语句指定函数返回的值。
                </p>
                <code>return number * number;</code>
                <p>
                    原始参数（如数字）通过值传递给函数;该值被传递给函数，但如果函数更改了参数的值，则该更改不会全局反映或反映在调用函数中。
                </p>
            </article>
        </section>
        <section class="main-section" id="Reference">
            <header>参考文献</header>
            <article>
                <ul>
                    <li>
                        本页中的所有文档均来自
                        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
                    </li>
                </ul>
            </article>
        </section>
    </main>
</body>

</html>
styles.css

html,
body {
    min-width: 290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
}

#navbar {
    position: fixed;
    min-width: 290px;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}

header {
    color: black;
    margin: 10px;
    text-align: center;
    font-size: 1.8em;
    font-weight: thin;
}

#main-doc header {
    text-align: left;
    margin: 0px;
}

#navbar ul {
    height: 88%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#navbar li {
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
}

#navbar a {
    display: block;
    padding: 10px 30px;
    color: #4d4e53;
    text-decoration: none;
    cursor: pointer;
}

#main-doc {
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
}

section article {
    color: #4d4e53;
    margin: 15px;
    font-size: 0.96em;
}

section li {
    margin: 15px 0px 0px 20px;
}

code {
    display: block;
    text-align: left;
    white-space: pre-line;
    position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 815px) {

    /* For mobile phones: */
    #navbar ul {
        border: 1px solid;
        height: 207px;
    }
    
    #navbar {
        background-color: white;
        position: absolute;
        top: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        max-height: 275px;
        border: none;
        z-index: 1;
        border-bottom: 2px solid;
    }
    
    #main-doc {
        position: relative;
        margin-left: 0px;
        margin-top: 270px;
    }
}

@media only screen and (max-width: 400px) {
    #main-doc {
        margin-left: -10px;
    }

    code {
        margin-left: -20px;
        width: 100%;
        padding: 15px;
        padding-left: 10px;
        padding-right: 45px;
        min-width: 233px;
    }
}
    -

  1. 通过建立城市轮廓学习CSS变量

    2. +

  2. 通过建立城市轮廓学习CSS变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="background-buildings sky">
        <div></div>
        <div></div>
        <div class="bb1 building-wrap">
            <div class="bb1a bb1-window"></div>
            <div class="bb1b bb1-window"></div>
            <div class="bb1c bb1-window"></div>
            <div class="bb1d"></div>
        </div>
        <div class="bb2">
            <div class="bb2a"></div>
            <div class="bb2b"></div>
        </div>
        <div class="bb3"></div>
        <div></div>
        <div class="bb4 building-wrap">
            <div class="bb4a"></div>
            <div class="bb4b"></div>
            <div class="bb4c window-wrap">
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
            </div>
        </div>
        <div></div>
        <div></div>
    </div>

    <div class="foreground-buildings">
        <div></div>
        <div></div>
        <div class="fb1 building-wrap">
            <div class="fb1a"></div>
            <div class="fb1b"></div>
            <div class="fb1c"></div>
        </div>
        <div class="fb2">
            <div class="fb2a"></div>
            <div class="fb2b window-wrap">
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
            </div>
        </div>
        <div></div>
        <div class="fb3 building-wrap">
            <div class="fb3a window-wrap">
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
            </div>
            <div class="fb3b"></div>
            <div class="fb3a"></div>
            <div class="fb3b"></div>
        </div>
        <div class="fb4">
            <div class="fb4a"></div>
            <div class="fb4b">
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
            </div>
        </div>
        <div class="fb5"></div>
        <div class="fb6"></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>
styles.css

:root {
    --building-color1: #aa80ff;
    --building-color2: #66cc99;
    --building-color3: #cc6699;
    --building-color4: #538cc6;
    --window-color1: #bb99ff;
    --window-color2: #8cd9b3;
    --window-color3: #d98cb3;
    --window-color4: #8cb3d9;
}

* {
    box-sizing: border-box;
    }

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.background-buildings,
.foreground-buildings {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
}

.building-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.window-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sky {
    background: radial-gradient(closest-corner circle at 15% 15%,
            #ffcf33,
            #ffcf33 20%,
            #ffff66 21%,
            #bbeeff 100%);
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
    width: 10%;
    height: 70%;
}

.bb1a {
    width: 70%;
}

.bb1b {
    width: 80%;
}

.bb1c {
    width: 90%;
}

.bb1d {
    width: 100%;
    height: 70%;
    background: linear-gradient(var(--building-color1) 50%,
            var(--window-color1));
}

.bb1-window {
    height: 10%;
    background: linear-gradient(var(--building-color1),
            var(--window-color1));
}

.bb2 {
    width: 10%;
    height: 50%;
}

.bb2a {
    border-bottom: 5vh solid var(--building-color2);
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
}

.bb2b {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 6%,
            var(--window-color2) 6%,
            var(--window-color2) 9%);
}

.bb3 {
    width: 10%;
    height: 55%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3),
            var(--window-color3) 15%);
}

.bb4 {
    width: 11%;
    height: 58%;
}

.bb4a {
    width: 3%;
    height: 10%;
    background-color: var(--building-color4);
}

.bb4b {
    width: 80%;
    height: 5%;
    background-color: var(--building-color4);
}

.bb4c {
    width: 100%;
    height: 85%;
    background-color: var(--building-color4);
}

.bb4-window {
    width: 18%;
    height: 90%;
    background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
    width: 10%;
    height: 60%;
}

.fb1a {
    border-bottom: 7vh solid var(--building-color4);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
}

.fb1b {
    width: 60%;
    height: 10%;
    background-color: var(--building-color4);
}

.fb1c {
    width: 100%;
    height: 80%;
    background: repeating-linear-gradient(90deg,
            var(--building-color4),
            var(--building-color4) 10%,
            transparent 10%,
            transparent 15%),
        repeating-linear-gradient(var(--building-color4),
            var(--building-color4) 10%,
            var(--window-color4) 10%,
            var(--window-color4) 90%);
}

.fb2 {
    width: 10%;
    height: 40%;
}

.fb2a {
    width: 100%;
    border-bottom: 10vh solid var(--building-color3);
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
}

.fb2b {
    width: 100%;
    height: 75%;
    background-color: var(--building-color3);
}

.fb2-window {
    width: 22%;
    height: 100%;
    background-color: var(--window-color3);
}

.fb3 {
    width: 10%;
    height: 35%;
}

.fb3a {
    width: 80%;
    height: 15%;
    background-color: var(--building-color1);
}

.fb3b {
    width: 100%;
    height: 35%;
    background-color: var(--building-color1);
}

.fb3-window {
    width: 25%;
    height: 80%;
    background-color: var(--window-color1);
}

.fb4 {
    width: 8%;
    height: 45%;
    position: relative;
    left: 10%;
}

.fb4a {
    border-top: 5vh solid transparent;
    border-left: 8vw solid var(--building-color1);
}

.fb4b {
    width: 100%;
    height: 89%;
    background-color: var(--building-color1);
    display: flex;
    flex-wrap: wrap;
}

.fb4-window {
    width: 30%;
    height: 10%;
    border-radius: 50%;
    background-color: var(--window-color1);
    margin: 10%;
}

.fb5 {
    width: 10%;
    height: 33%;
    position: relative;
    right: 10%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 5%,
            transparent 5%,
            transparent 10%),
        repeating-linear-gradient(90deg,
            var(--building-color2),
            var(--building-color2) 12%,
            var(--window-color2) 12%,
            var(--window-color2) 44%);
}

.fb6 {
    width: 9%;
    height: 38%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3) 10%,
            transparent 10%,
            transparent 30%),
        repeating-linear-gradient(var(--building-color3),
            var(--building-color3) 10%,
            var(--window-color3) 10%,
            var(--window-color3) 30%);
}

@media (max-width: 1000px) {
    :root {
        --building-color1: #000;
        --building-color2: #000;
        --building-color3: #000;
        --building-color4: #000;
        --window-color1: #777;
        --window-color2: #777;
        --window-color3: #777;
        --window-color4: #777;
    }

    .sky {
        background: radial-gradient(closest-corner circle at 15% 15%,
                #ccc,
                #ccc 20%,
                #445 21%,
                #223 100%);
    }
}
    -

  1. 通过创建杂志学习CSS网格布局

    2. +

  2. 通过创建杂志学习CSS网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <main>
        <section class="heading">
            <header class="hero">
                <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
                    alt="freecodecamp logo" loading="lazy" class="hero-img" />
                <h1 class="hero-title">OUR NEW CURRICULUM</h1>
                <p class="hero-subtitle">
                    Our efforts to restructure our curriculum with a more project-based focus
                </p>
            </header>
            <div class="author">
                <p class="author-name">
                    By
                    <a href="https://freecodecamp.org" target="_blank" rel="noreferrer">freeCodeCamp</a>
                </p>
                <p class="publish-date">March 7, 2019</p>
            </div>
            <div class="social-icons">
                <a href="https://www.facebook.com/freecodecamp/">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://twitter.com/freecodecamp/">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://instagram.com/freecodecamp">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/school/free-code-camp/">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://www.youtube.com/freecodecamp">
                    <i class="fab fa-youtube"></i>
                </a>
            </div>
        </section>
        <section class="text">
            <p class="first-paragraph">
                Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding
                challenges, you'll learn through building projects - step by step. Before we get into the details, let
                me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5
                required projects. We are only changing the optional coding challenges.
            </p>
            <p>
                After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on
                the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This
                is what makes time travel possible: the flux capacitor!
            </p>
            <p>
                It wasn't as dramatic as Doc's revelation in Back to the Future. It
                just occurred to me while I was going for a run. The revelation: the entire curriculum should be a
                series of projects. Instead of individual coding challenges, we'll just have projects, each with their
                own seamless series of tests. Each test gives you just enough information to figure out how to get it to
                pass. (And you can view hints if that isn't enough.)
            </p>
            <blockquote>
                <hr />
                <p class="quote">
                    The entire curriculum should be a series of projects
                </p>
                <hr />
            </blockquote>
            <p>
                No more walls of explanatory text. No more walls of tests. Just one
                test at a time, as you build up a working project. Over the course of passing thousands of tests, you
                build up projects and your own understanding of coding fundamentals. There is no transition between
                lessons and projects, because the lessons themselves are baked into projects. And there's plenty of
                repetition to help you retain everything because - hey - building projects in real life has plenty of
                repetition.
            </p>
            <p>
                The main design challenge is taking what is currently paragraphs of explanation and instructions and
                packing them into a single test description text. Each project will involve dozens of tests like this.
                People will be coding the entire time, rather than switching back and forth from "reading mode" to
                "coding mode".
            </p>
            <p>
                Instead of a series of coding challenges, people will be in their code editor passing one test after
                another, quickly building up a project. People will get into a real flow state, similar to what they
                experience when they build the required projects at the end of each certification. They'll get that
                sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
            </p>
        </section>
        <section class="text text-with-images">
            <article class="brief-history">
                <h3 class="list-title">A Brief History</h3>
                <p>Of the Curriculum</p>
                <ul class="lists">
                    <li>
                        <h4 class="list-subtitle">V1 - 2014</h4>
                        <p>
                            We launched freeCodeCamp with a simple list of 15 resources,
                            including Harvard's CS50 and Stanford's Database Class.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V2 - 2015</h4>
                        <p>We added interactive algorithm challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V3 - 2015</h4>
                        <p>
                            We added our own HTML+CSS challenges (before we'd been relying on
                            General Assembly's Dash course for these).
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V4 - 2016</h4>
                        <p>
                            We expanded the curriculum to 3 certifications, including Front
                            End, Back End, and Data Visualization. They each had 10 required
                            projects, but only the Front End section had its own challenges.
                            For the other certs, we were still using external resources like
                            Node School.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V5 - 2017</h4>
                        <p>We added the back end and data visualization challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V6 - 2018</h4>
                        <p>
                            We launched 6 new certifications to replace our old ones. This was
                            the biggest curriculum improvement to date.
                        </p>
                    </li>
                </ul>
            </article>
            <aside class="image-wrapper">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
                    alt="image of the quote machine project" loading="lazy" class="image-1" width="600" height="400" />
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
                    alt="image of a calculator project" loading="lazy" class="image-2" width="400" height="400" />
                <blockquote class="image-quote">
                    <hr />
                    <p class="quote">
                        The millions of people who are learning to code through freeCodeCamp
                        will have an even better resource to help them learn these
                        fundamentals.
                    </p>
                    <hr />
                </blockquote>
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
                    alt="four people working on code" loading="lazy" class="image-3" width="600" height="400" />
            </aside>
        </section>
    </main>
</body>

</html>
styles.css

*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Baskervville', serif;
    color: linen;
    background-color: rgb(20, 30, 40);
}

h1 {
    font-family: 'Anton', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
}

a {
    text-decoration: none;
    color: linen;
}

main {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem;
}

img {
    width: 100%;
    object-fit: cover;
}

hr {
    margin: 1.5rem 0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}

.heading {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
}

.text {
    grid-column: 2 / 3;
    font-size: 1.8rem;
    letter-spacing: 0.6px;
    column-width: 25rem;
    text-align: justify;
}

.hero {
    grid-column: 1 / -1;
    position: relative;
}

.hero-title {
    text-align: center;
    color: orangered;
    font-size: 8rem;
}

.hero-subtitle {
    font-size: 2.4rem;
    color: orangered;
    text-align: center;
}

.author {
    font-size: 2rem;
    font-family: "Raleway", sans-serif;
}

.author-name a:hover {
    background-color: #306203;
}

.publish-date {
    color: rgba(255, 255, 255, 0.5);
}

.social-icons {
    display: grid;
    font-size: 3rem;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

.first-paragraph::first-letter {
    font-size: 6rem;
    color: orangered;
    float: left;
    margin-right: 1rem;
}

.quote {
    color: #00beef;
    font-size: 2.4rem;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

.quote::before {
    content: '" ';
}

.quote::after {
    content: ' "';
}

.text-with-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
    margin-bottom: 3rem;
}

.lists {
    list-style-type: none;
    margin-top: 2rem;
}

.lists li {
    margin-bottom: 1.5rem;
}

.list-title,
.list-subtitle {
    color: #00beef;
}

.image-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, min-content);
    gap: 2rem;
    place-items: center;
}

.image-1,
.image-3 {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
    .image-wrapper {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .text-with-images {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .hero-title {
        font-size: 6rem;
    }

    .hero-subtitle,
    .author,
    .quote,
    .list-title {
        font-size: 1.8rem;
    }
    
    .social-icons {
        font-size: 2rem;
    }
    
    .text {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 420px) {
    .hero-title {
        font-size: 4.5rem;
    }
}
    -

  1. 产品登录页【认证项目】

    2. +

  2. 产品登录页【认证项目】

1
2
index.html
styles.css
    -

  1. 通过构建摩天轮学习CSS动画

    2. +

  2. 通过构建摩天轮学习CSS动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="wheel">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>

        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
    </div>
</body>

</html>
styles.css

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 50px;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
    transform: rotate(60deg);
}

.line:nth-of-type(3) {
    transform: rotate(120deg);
}

.line:nth-of-type(4) {
    transform: rotate(180deg);
}

.line:nth-of-type(5) {
    transform: rotate(240deg);
}

.line:nth-of-type(6) {
    transform: rotate(300deg);
}

.cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    transform-origin: 50% 0%;
    animation: cabins 10s ease-in-out infinite;
}

.cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
}

.cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
}

.cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
}

.cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cabins {
    0% {
        transform: rotate(0deg);
    }

    25% {
        background-color: yellow;
    }
    
    50% {
        background-color: purple;
    }
    
    75% {
        background-color: yellow;
    }
    
    100% {
        transform: rotate(-360deg);
    }
}
    -

  1. 通过构建企鹅来学习CSS变换

    2. +

  2. 通过构建企鹅来学习CSS变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="sun"></div>
    <div class="penguin">
        <div class="penguin-head">
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="chin"></div>
            <div class="eye left">
                <div class="eye-lid"></div>
            </div>
            <div class="eye right">
                <div class="eye-lid"></div>
            </div>
            <div class="blush left"></div>
            <div class="blush right"></div>
            <div class="beak top"></div>
            <div class="beak bottom"></div>
        </div>
        <div class="shirt">
            <div>💜</div>
            <p>I CSS</p>
        </div>
        <div class="penguin-body">
            <div class="arm left"></div>
            <div class="arm right"></div>
            <div class="foot left"></div>
            <div class="foot right"></div>
        </div>
    </div>

    <div class="ground"></div>
</body>

</html>
styles.css

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
}

body {
    background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
    position: absolute;
    transform: skew(0deg, 44deg);
    z-index: 2;
    margin-top: 100px;
}

.back-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    left: 110px;
    top: 225px;
}

.sun {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    top: -75px;
    right: -75px;
}

.penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    transition: transform 1s ease-in-out 0ms;
}

.penguin * {
    position: absolute;
}

.penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
}

.penguin-head {
    width: 50%;
    height: 45%;
    background: linear-gradient(45deg,
            var(--penguin-skin),
            rgb(239, 240, 228));
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
}

.face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
}

.face.left {
    left: 5%;
}

.face.right {
    right: 5%;
}

.chin {
    width: 90%;
    height: 70%;
    background-color: var(--penguin-face);
    top: 25%;
    left: 5%;
    border-radius: 70% 70% 100% 100%;
}

.eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 45%;
    border-radius: 50%;
}

.eye.left {
    left: 25%;
}

.eye.right {
    right: 25%;
}

.eye-lid {
    width: 150%;
    height: 100%;
    background-color: var(--penguin-face);
    top: 25%;
    left: -23%;
    border-radius: 50%;
}

.blush {
    width: 15%;
    height: 10%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
}

.blush.left {
    left: 15%;
}

.blush.right {
    right: 15%;
}

.beak {
    height: 10%;
    background-color: var(--penguin-picorna);
    border-radius: 50%;
}

.beak.top {
    width: 20%;
    top: 60%;
    left: 40%;
}

.beak.bottom {
    width: 16%;
    top: 65%;
    left: 42%;
}

.shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 165px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
}

.shirt div {
    font-weight: initial;
    top: 22.5px;
    left: 12px;
}

.penguin-body {
    width: 53%;
    height: 45%;
    background: linear-gradient(45deg,
            rgb(134, 133, 133) 0%,
            rgb(234, 231, 231) 25%,
            white 67%);
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
}

.penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: var(--penguin-skin);
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
}

.arm {
    width: 30%;
    height: 60%;
    background: linear-gradient(90deg,
            var(--penguin-skin),
            rgb(209, 210, 199));
    border-radius: 30% 30% 30% 120%;
    z-index: -1;
}

.arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left;
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
}

.arm.right {
    top: 0%;
    right: -5%;
    transform: rotate(-45deg);
}

@keyframes wave {
    10% {
        transform: rotate(110deg) scaleX(-1);
    }

    20% {
        transform: rotate(130deg) scaleX(-1);
    }
    
    30% {
        transform: rotate(110deg) scaleX(-1);
    }
    
    40% {
        transform: rotate(130deg) scaleX(-1);
    }
}

.foot {
    width: 15%;
    height: 30%;
    background-color: var(--penguin-picorna);
    top: 85%;
    border-radius: 50%;
    z-index: -1;
}

.foot.left {
    left: 25%;
    transform: rotate(80deg);
}

.foot.right {
    right: 25%;
    transform: rotate(-80deg);
}

.ground {
    width: 100vw;
    height: calc(100vh - 300px);
    background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
    z-index: 3;
    position: absolute;
    margin-top: -58px;
}
    -

  1. 个人作品展示页【认证项目】

    2. +

  2. 个人作品展示页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>

    <!-- 导航栏 -->
    <nav id="navbar" class="nav">
        <ul class="nav-list">
            <li><a href="#welcome-section">关于</a></li>
            <li><a href="#projects">作品</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    
    <!-- 欢迎页 -->
    <section class="welcome-section" id="welcome-section">
        <h1>嗨，我是青橙</h1>
        <p>一个Web前端开发者</p>
    </section>
    
    <!-- 作品集 -->
    <section class="projects-section" id="projects">
        <h2 class="projects-section-header">这是我的一些作品</h2>
        <div class="projects-grid">
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
        </div>
        <a href="" class="btn btn-show-all" target="_blank">展示所有<i class="fas fa-chevron-right"></i></a>
    </section>
    
    <!-- 联系方式 -->
    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2>让我们一起共事…</h2>
            <p>你要怎样联系我？</p>
        </div>
        <div class="contact-links">
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-weixin"></i> 微信
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-qq"></i> QQ
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-github"></i> Github
            </a>
            <a href="mailto:orange****@qq.com" target="_blank" class="btn contact-details">
                <i class="fas fa-at"></i> 邮箱
            </a>
            <a href="tel:191****3043" target="_blank" class="btn contact-details">
                <i class="fas fa-mobile-alt"></i> 电话
            </a>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
        <p>&copy;作者 <a href="https://blog.webrelay.cn" target="_blank">青橙</a></p>
    </footer>

</body>

</html>
styles.css

:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    }

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

/* 
1200px = 75em
980px = 61.25em
460px = 28.75em
 */

@media (max-width: 75em) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 61.25em) {
    html {
        font-size: 58%;
    }
}

@media (max-width: 28.75em) {
    html {
        font-size: 55%;
    }
}

body {
    font-size: 1.8rem; /* 18px */
    color: var(--main-white);
    line-height: 1.4;
    font-weight: 400;
}

h1 {
    font-size: 6rem;
    text-align: center;
}

h2 {
    font-size: 4.2rem;
    text-align: center;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-white);
}

img {
    display: block;
    width: 100%;
}


/* 导航栏 */
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.nav-list {
    display: flex;
    margin-right: 2rem;
}

.nav-list a {
    display: block;
    font-size: 2.2rem;
    padding: 2rem;
}

@media (max-width: 28.75em) {
    .nav {
        justify-content: center;
    }

    .nav-list {
        margin: 0 1rem;
    }
}

.nav-list a:hover {
    background: var(--main-blue);
}

/* 欢迎页 */
.welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

.welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: var(--main-red);
}

/* 作品集 */
.projects-section {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
    .projects-section-header {
        font-size: 4rem;
    }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
    .projects-section {
        padding: 6rem 1rem;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

.project {
    background: var(--main-gray);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.code {
    color: var(--main-gray);
    transition: color 0.3s ease-out;
}

.project:hover .code {
    color: #ff7f50;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px;
}

.btn-show-all {
    font-size: 2rem;
    background: var(--main-gray);
    transition: background 0.3s ease-out;
}

.btn-show-all:hover {
    background: var(--main-red);
}

.btn-show-all:hover > i {
    transform: translateX(2px);
}

.btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/* 联系页 */
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background: var(--main-gray);
}

.contact-section-header > h2 {
    font-size: 6rem;
}

@media (max-width: 28.75em) {
    .contact-section-header > h2 {
        font-size: 4rem;
    }
}

.contact-section-header > p {
    font-style: italic;
}

.contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out;
}

.contact-details:hover {
    transform: translateY(5px);
}

/* 页脚 */
footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--main-gray);
    border-top: 4px solid var(--main-red);
}

footer > p {
    margin: 2rem;
}

@media (max-width: 28.75em) {
    footer {
        flex-direction: column;
        text-align: center;
    }
}
@@ -325,7 +325,7 @@

diff --git a/index.html b/index.html index 6052dca9..a0b207fb 100644 --- a/index.html +++ b/index.html @@ -194,7 +194,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -234,7 +234,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法 @@ -274,7 +274,7 @@

BLOG OF 青橙

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） diff --git a/js-array-methods/index.html b/js-array-methods/index.html index db745697..aa445f42 100644 --- a/js-array-methods/index.html +++ b/js-array-methods/index.html @@ -8,13 +8,13 @@ - + - + @@ -39,7 +39,7 @@ - JS内置构造函数 - Array篇 + JavaScript数组常用方法 @@ -115,16 +115,16 @@ @@ -144,7 +144,7 @@

- JS内置构造函数 - Array篇 + JavaScript数组常用方法

@@ -158,7 +158,7 @@

- (Updated: ) + (Updated: ) @@ -283,16 +283,16 @@

    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
diff --git a/js-string-methods/index.html b/js-string-methods/index.html index 1cb59d0f..3cd6efd3 100644 --- a/js-string-methods/index.html +++ b/js-string-methods/index.html @@ -8,13 +8,13 @@ - + - + @@ -39,7 +39,7 @@ - JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -113,16 +113,16 @@ @@ -138,7 +138,7 @@

- JS内置构造函数 - String篇 + JavaScript字符串常用方法

@@ -152,7 +152,7 @@

- (Updated: ) + (Updated: ) @@ -308,16 +308,16 @@

diff --git a/minecraft-server/index.html b/minecraft-server/index.html index 99b05111..532369f9 100644 --- a/minecraft-server/index.html +++ b/minecraft-server/index.html @@ -8,7 +8,7 @@ - + @@ -39,7 +39,7 @@ - + @@ -64,7 +64,7 @@ - Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） @@ -140,16 +140,16 @@ @@ -169,7 +169,7 @@

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板）

@@ -183,7 +183,7 @@

- (Updated: ) + (Updated: ) @@ -338,8 +338,6 @@

MobaXterm free Xserver and tabbed SSH client for Windows

XSHELL - NetSarang Website

Download server for Minecraft | Minecraft

-

参考资料：

-

【MC】从零开始使用云服务器搭建Minecraft服务器

@@ -393,16 +391,16 @@

    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
diff --git a/search.xml b/search.xml index be4f243d..1d8f8ac9 100644 --- a/search.xml +++ b/search.xml @@ -4,7 +4,7 @@ - JS内置构造函数 - String篇 + JavaScript字符串常用方法 /js-string-methods/ @@ -50,7 +50,7 @@ - JS内置构造函数 - Array篇 + JavaScript数组常用方法 /js-array-methods/ @@ -77,7 +77,7 @@ /freecodecamp-responsive-web-design/ - 本文章汇总了freeCodeCamp网站关于响应式网页设计的所有案例的源码

  1. 通过编写猫咪相册应用学习HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
</head>

<body>
    <main>
        <h1>CatPhotoApp</h1>
        <section>
            <h2>Cat Photos</h2>
            <!-- TODO: Add link to cat photos -->
            <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
            <a href="https://freecatphotoapp.com"><img
                    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
                    alt="A cute orange cat lying on its back."></a>
        </section>
        <section>
            <h2>Cat Lists</h2>
            <h3>Things cats love:</h3>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
                    alt="A slice of lasagna on a plate.">
                <figcaption>Cats <em>love</em> lasagna.</figcaption>
            </figure>
            <h3>Top 3 things cats hate:</h3>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
                    alt="Five cats looking around a field.">
                <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
            </figure>
        </section>
        <section>
            <h2>Cat Form</h2>
            <form action="https://freecatphotoapp.com/submit-cat-photo">
                <fieldset>
                    <legend>Is your cat an indoor or outdoor cat?</legend>
                    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
                    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
                </fieldset>
                <fieldset>
                    <legend>What's your cat's personality?</legend>
                    <input id="loving" type="checkbox" name="personality" value="loving" checked> <label
                        for="loving">Loving</label>
                    <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
                    <input id="energetic" type="checkbox" name="personality" value="energetic"> <label
                        for="energetic">Energetic</label>
                </fieldset>
                <input type="text" name="catphotourl" placeholder="cat photo URL" required>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
        </p>
    </footer>
</body>

</html>

  1. 通过编写咖啡店菜单学习基础CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon" />
                <article class="item">
                    <p class="flavor">French Vanilla</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
                </article>
                <article class="item">
                    <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
                </article>
                <article class="item">
                    <p class="flavor">Hazelnut</p><p class="price">4.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Mocha</p><p class="price">4.50</p>
                </article>
            </section>
            <section>
                <h2>Desserts</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />
                <article class="item">
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
                <article class="item">
                    <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
                </article>
                <article class="item">
                    <p class="dessert">Cheesecake</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
                </article>
            </section>
        </main>
        <hr class="bottom-line">
        <footer>
            <p>
                <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
            </p>
            <p class="address">123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>

</html>
styles.css

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
    font-family: sans-serif;
    padding: 20px;
}

h1 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

h2 {
    font-size: 30px;
}

.established {
    font-style: italic;
}

h1,
h2,
p {
    text-align: center;
}

.menu {
    width: 80%;
    background-color: burlywood;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 500px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -25px;
}

hr {
    height: 2px;
    background-color: brown;
    border-color: brown;
}

.bottom-line {
    margin-top: 25px;
}

h1,
h2 {
    font-family: Impact, serif;
}

.item p {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 18px;
}

.flavor,
.dessert {
    text-align: left;
    width: 75%;
}

.price {
    text-align: right;
    width: 25%;
}

/* FOOTER */

footer {
    font-size: 14px;
}

.address {
    margin-bottom: 5px;
}

a {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: brown;
}

a:active {
    color: brown;
}

  1. 通过构建一组彩色笔来学习CSS颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>CSS Color Markers</h1>
    <div class="container">
        <div class="marker red">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
    </div>
</body>

</html>
styles.css

h1 {
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
    padding: 10px 0;
}

.marker {
    width: 200px;
    height: 25px;
    margin: 10px auto;
}

.cap {
    width: 60px;
    height: 25px;
}

.sleeve {
    width: 110px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap,
.sleeve {
    display: inline-block;
}

.red {
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}

  1. 通过编写注册表单学习HTML表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <fieldset>
            <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text"required /></label>
            <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
            <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
            <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
        </fieldset>
        <fieldset>
            <label for="personal-account"><input id="personal-account" type="radio" name="account-type"class="inline" /> Personal Account</label>
            <label for="business-account"><input id="business-account" type="radio" name="account-type"class="inline" /> Business Account</label>
            <label for="terms-and-conditions">
                <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" />I accept the 
                <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
            </label>
        </fieldset>
        <fieldset>
            <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
            <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13"max="120" /></label>
            <label for="referrer">How did you hear about us?
                <select id="referrer" name="referrer">
                    <option value="">(select one)</option>
                    <option value="1">freeCodeCamp News</option>
                    <option value="2">freeCodeCamp YouTube Channel</option>
                    <option value="3">freeCodeCamp Forum</option>
                    <option value="4">Other</option>
                </select>
            </label>
            <label for="bio">Provide a bio:
                <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
            </label>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>
styles.css

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
}

h1,
p {
    margin: 1em auto;
    text-align: center;
}

form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0;
    border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
    border-bottom: none;
}

label {
    display: block;
    margin: 0.5rem 0;
}

input,
textarea,
select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
}

input,
textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

input[type="file"] {
    padding: 1px 2px;
}

a {
    color: #dfdfe2
}

  1. 调查表单【认证项目】

仿freeCodeCamp Survey Form，技术不精，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
<body>
    <h1 id="title">freeCodeCamp 调查表</h1>
    <p id="description">感谢您花时间帮助我们改进平台</p>
    <form id="survey-form" action="" method="post">

        <label id="name-label">名字<input id="name" name="name" type="text" placeholder="输入您的名字" required></label>
        <label id="email-label">邮箱<input id="email" name="email" type="email" placeholder="输入您的邮箱" required></label>
        <label id="number-label">年龄<span>（可选）</span><input id="number" name="number" type="number" min="0" max="120" placeholder="年龄"></label>
    
        <label for="dropdown">哪个选项最能描述您当前的角色？
            <select id="dropdown" name="dropdown">
                <option value="" disabled selected>选择当前角色</option>
                <option value="1">学生</option>
                <option value="2">全职工作者</option>
                <option value="3">全日制学习者</option>
                <option value="4">宁愿不说</option>
                <option value="5">其他</option>
            </select>
        </label>
    
        你会向朋友推荐 freeCodeCamp 吗？
        <label for="definitely" class="options">
            <input type="radio" id="definitely" class="inline" name="radio" value="definitely">肯定
        </label>
        <label for="maybe" class="options">
            <input type="radio" id="maybe" class="inline" name="radio" value="maybe">也许
        </label>
        <label for="notsure" class="options">
            <input type="radio" name="radio" id="notsure" class="inline" value="notsure">不确定
        </label>
    
        <label for="dropdown2">您最喜欢 freeCodeCamp 的什么功能？
            <select id="dropdown2" name="dropdown2">
                <option value="" disabled selected>选择一个选项</option>
                <option value="1">挑战</option>
                <option value="2">项目</option>
                <option value="3">社区</option>
                <option value="4">开源</option>
            </select>
        </label>
    
        您希望看到哪些改进？<span>（检查所有适用）</span>
        <label for="checkbox1" class="options"><input type="checkbox" name="checkbox1" id="checkbox1"class="inline" value="options1">前端项目</label>
        <label for="checkbox2" class="options"><input type="checkbox" name="checkbox2" id="checkbox2"class="inline" value="options2">后端项目</label>
        <label for="checkbox3" class="options"><input type="checkbox" name="checkbox3" id="checkbox3"class="inline" value="options3">数据可视化</label>
        <label for="checkbox4" class="options"><input type="checkbox" name="checkbox4" id="checkbox4"class="inline" value="options4">挑战</label>
        <label for="checkbox5" class="options"><input type="checkbox" name="checkbox5" id="checkbox5"class="inline" value="options5">开源社区</label>
        <label for="checkbox6" class="options"><input type="checkbox" name="checkbox6" id="checkbox6"class="inline" value="options6">Gitter 帮助室</label>
        <label for="checkbox7" class="options"><input type="checkbox" name="checkbox7" id="checkbox7"class="inline" value="options7">影片</label>
        <label for="checkbox8" class="options"><input type="checkbox" name="checkbox8" id="checkbox8"class="inline" value="options8">城市聚会</label>
        <label for="checkbox9" class="options"><input type="checkbox" name="checkbox9" id="checkbox9"class="inline" value="options8">维基百科</label>
        <label for="checkbox10" class="options"><input type="checkbox" name="checkbox10" id="checkbox10"class="inline" value="options10">论坛</label>
        <label for="checkbox11" class="options"><input type="checkbox" name="checkbox11" id="checkbox11"class="inline" value="options11">附加课程</label>
        <label for="">有什么意见或建议吗？<textarea name="" id="" rows="10" placeholder="在这里输入您的评论…"></textarea></label>
    
        <input type="submit" id="submit" value="提交">
    
    </form>
</body>
</head>

</html
styles.css

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 18px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

h1,
p {
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

h1 {
    margin: 50px auto 8px;
    font-weight: 400;
}

p {
    font-style: italic;
    font-weight: 100;
}

span {
    font-size: 14px;
    vertical-align: text-top;
}

form {
    width: 720px;
    background-color: rgba(27, 27, 50, 0.8);
    color: #ffffff;
    min-width: 480px;
    margin: 30px auto 0;
    padding: 44px;
    border-radius: 4px;
    box-sizing: border-box;
}

label {
    display: block;
    margin: 20px 0;
    padding: 4px 0;
}

label:first-of-type {
    margin-top: 0;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 8px;
    background: #ffffff;
    font-size: 16px;
    padding-left: 8px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

input,
select {
    height: 38px;
}

select {
    color: #495057;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.inline {
    width: unset;
    margin: 0;
}

.options {
    margin: 0px;
    margin-top: 8px;
    padding: 0;
}

textarea {
    padding-left: 8px;
    padding-top: 10px;
    height: 120px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
}

input[type="submit"] {
    background: #37af65;
    color: #ffffff;
    margin-bottom: 20px;
}

  1. 通过创作罗斯科绘画学习CSS盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="frame">
        <div class="canvas">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>

</html>
styles.css

.canvas {
    width: 500px;
    height: 600px;
    background-color: #4d0f00;
    overflow: hidden;
    filter: blur(2px);
}

.frame {
    border: 50px solid black;
    width: 500px;
    padding: 50px;
    margin: 20px auto;
}

.one {
    width: 425px;
    height: 150px;
    background-color: #efb762;
    margin: 20px auto;
    box-shadow: 0 0 3px 3px #efb762;
    border-radius: 9px;
    transform: rotate(-0.6deg);
}

.two {
    width: 475px;
    height: 200px;
    background-color: #8f0401;
    margin: 0 auto 20px;
    box-shadow: 0 0 3px 3px #8f0401;
    border-radius: 8px 10px;
    transform: rotate(0.4deg);
}

.one,
.two {
    filter: blur(1px);
}

.three {
    width: 91%;
    height: 28%;
    background-color: #b20403;
    margin: auto;
    filter: blur(2px);
    box-shadow: 0 0 5px 5px #b20403;
    border-radius: 30px 25px 60px 12px;
    transform: rotate(-0.2deg)
}

  1. 通过创建照片集来学习CSS弹性盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header class="header">
        <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="cat1">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="cat2">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="cat3">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="cat4">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="cat5">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="cat6">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="cat7">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="cat8">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="cat9">
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

body {
    margin: 0;
    font-family: sans-serif;
    background: #f5f6f7;
}

.header {
    text-align: center;
    text-transform: uppercase;
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
}

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
}

.gallery img {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.gallery::after {
    content: "";
    width: 350px;
}

  1. 通过建立营养标签来学习排版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="label">
        <header>
            <h1 class="bold">Nutrition Facts</h1>
            <div class="divider"></div>
            <p>8 servings per container</p>
            <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
        </header>
        <div class="divider large"></div>
        <div class="calories-info">
            <div class="left-container">
                <h2 class="bold small-text">Amount per serving</h2>
                <p>Calories</p>
            </div>
            <span>230</span>
        </div>
        <div class="divider medium"></div>
        <div class="daily-value small-text">
            <p class="bold right no-divider">% Daily Value *</p>
            <div class="divider"></div>
            <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
            <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
            <div class="divider"></div>
            <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
            <div class="divider"></div>
            <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
            <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
            <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
            <p class="indent no-divider">Dietary Fiber 4g</p>
            <div class="divider"></div>
            <p class="indent no-divider">Total Sugars 12g</p>
            <div class="divider double-indent"></div>
            <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
            <div class="divider"></div>
            <p class="no-divider"><span class="bold">Protein</span> 3g</p>
            <div class="divider large"></div>
            <p>Vitamin D 2mcg <span>10%</span></p>
            <p>Calcium 260mg <span>20%</span></p>
            <p>Iron 8mg <span>45%</span></p>
            <p class="no-divider">Potassium 235mg <span>6%</span></p>
        </div>
        <div class="divider medium"></div>
        <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

html {
    font-size: 16px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.label {
    border: 2px solid black;
    width: 270px;
    margin: 20px auto;
    padding: 0 7px;
}

header h1 {
    text-align: center;
    margin: -4px 0;
    letter-spacing: 0.15px
}

p {
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.divider {
    border-bottom: 1px solid #888989;
    margin: 2px 0;
}

.bold {
    font-weight: 800;
}

.large {
    height: 10px;
}

.large,
.medium {
    background-color: black;
    border: 0;
}

.medium {
    height: 5px;
}

.small-text {
    font-size: 0.85rem;
}


.calories-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.calories-info h2 {
    margin: 0;
}

.left-container p {
    margin: -5px -2px;
    font-size: 2em;
    font-weight: 700;
}

.calories-info span {
    margin: -7px -2px;
    font-size: 2.4em;
    font-weight: 700;
}

.right {
    justify-content: flex-end;
}

.indent {
    margin-left: 1em;
}

.double-indent {
    margin-left: 2em;
}

.daily-value p:not(.no-divider) {
    border-bottom: 1px solid #888989;
}

.note {
    font-size: 0.6rem;
    margin: 5px 0;
    padding: 0 8px;
    text-indent: -8px;
}

  1. 通过编写小测验学习无障碍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <header>
        <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
        <h1>HTML/CSS Quiz</h1>
        <nav>
            <ul>
                <li><a href="#student-info" accesskey="i">INFO</a></li>
                <li><a href="#html-questions" accesskey="h">HTML</a></li>
                <li><a href="#css-questions" accesskey="c">CSS</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
                <h2 id="student-info">Student Info</h2>
                <div class="info">
                    <label for="student-name">Name:</label>
                    <input type="text" name="student-name" id="student-name" />
                </div>
                <div class="info">
                    <label for="student-email">Email:</label>
                    <input type="email" name="student-email" id="student-email" />
                </div>
                <div class="info">
                    <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                    <input type="date" name="birth-date" id="birth-date" />
                </div>
            </section>
            <section role="region" aria-labelledby="html-questions">
                <h2 id="html-questions">HTML</h2>
                <div class="question-block">
                    <p>1</p>
                    <fieldset class="question" name="html-question-one">
                        <legend>
                            The legend element represents a caption for the content of its
                            parent fieldset element
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q1-a1">
                                    <input type="radio" id="q1-a1" name="q1" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q1-a2">
                                    <input type="radio" id="q1-a2" name="q1" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
                <div class="question-block">
                    <p>2</p>
                    <fieldset class="question" name="html-question-two">
                        <legend>
                            A label element nesting an input element is required to have a
                            for attribute with the same value as the input's id
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q2-a1">
                                    <input type="radio" id="q2-a1" name="q2" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q2-a2">
                                    <input type="radio" id="q2-a2" name="q2" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
            </section>
            <section role="region" aria-labelledby="css-questions">
                <h2 id="css-questions">CSS</h2>
                <div class="formrow">
                    <div class="question-block">
                        <label for="customer">Are you a frontend developer?</label>
                    </div>
                    <div class="answer">
                        <select name="customer" id="customer" required>
                            <option value="">Select an option</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="question-block">
                        <label for="css-questions">Do you have any questions:</label>
                    </div>
                    <div class="answer">
                        <textarea id="css-questions" name="css-questions" rows="5" cols="24"
                            placeholder="Who is flexbox..."></textarea>
                    </div>
                </div>
            </section>
            <button type="submit">Send</button>
        </form>
    </main>
    <footer>
        <address>
            <a href="https://freecodecamp.org">freeCodeCamp</a><br />
            San Francisco<br />
            California<br />
            USA
        </address>
    </footer>
</body>

</html>
styles.css

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}

header {
    width: 100%;
    height: 50px;
    background-color: #1b1b32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

#logo {
    width: max(100px, 18vw);
    background-color: #0a0a23;
    aspect-ratio: 35 / 4;
    padding: 0.4rem;
}

h1 {
    color: #f1be32;
    font-size: min(5vw, 1.2em);
    text-align: center;
}

nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
}

nav>ul>li {
    color: #dfdfe2;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
}

nav>ul>li:hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
}

li>a {
    color: inherit;
    text-decoration: none;
}

main {
    padding-top: 50px;
}

section {
    width: 80%;
    margin: 0 auto 10px auto;
    max-width: 600px;
}

h1,
h2 {
    font-family: Verdana, Tahoma;
}

h2 {
    border-bottom: 4px solid #dfdfe2;
    margin-top: 0px;
    padding-top: 60px;
}

.info {
    padding: 10px 0 0 5px;
}

.formrow {
    margin-top: 30px;
    padding: 0px 15px;
}

input {
    font-size: 16px;
}

.info label,
.info input {
    display: inline-block;
}

.info input {
    width: 50%;
    text-align: left;
}

.info label {
    width: 10%;
    min-width: 55px;
    text-align: right;
}

.question-block {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: 20px;
    padding-top: 5px;
}

p {
    margin-top: 5px;
    padding-left: 15px;
    font-size: 20px;
}

p::before {
    content: "Question #";
}

.question {
    border: none;
    padding-bottom: 0;
}

.answers-list {
    list-style: none;
    padding: 0;
}

button {
    display: block;
    margin: 40px auto;
    width: 40%;
    padding: 15px;
    font-size: 23px;
    background: #d0d0d5;
    border: 3px solid #3b3b4f;
}

footer {
    background-color: #2a2a40;
    display: flex;
    justify-content: center;
}

footer,
footer a {
    color: #dfdfe2;
}

address {
    text-align: center;
    padding: 0.3em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

  1. 致敬页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title id="title">致敬 - 袁隆平</title>
</head>

<body>
    <main id="main">
        <h1>袁隆平院士</h1>
        <p>杂交水稻之父</p>
        <div id="img-div">
            <img src="https://mstatic.gzstv.com/media/images/2021/05/24/SpiYfUIacL8b.jpg" alt="袁隆平" id="image">
            <div id="img-caption">
                袁隆平院士（左二），攻克了制种关，使杂交水稻的研究获得全面成功，为水稻增产开辟了新的途径。
            </div>
        </div>
        <div id="tribute-info">
            <h3 id="headline">袁隆平的生平：</h3>
            <ul>
                <li><strong>1930年</strong> - 袁隆平出生于北京协和医院，是中国杂交水稻育种专家，被誉为“杂交水稻之父”。</li>
                <li><strong>1953年</strong> - 袁隆平毕业于西南农学院，分配到湖南安江农业学校，从事植物遗传育种工作。</li>
                <li><strong>1964年</strong> - 袁隆平开始了杂交水稻的研究，历经九年的努力，成功培育出世界上第一个杂交水稻品种“南优2号”。</li>
                <li><strong>1981年</strong> - 袁隆平获得中国首届国家特等发明奖。</li>
                <li><strong>1995年</strong> - 袁隆平率领团队开发出新型杂交水稻理论和技术，创造了更高的产量和品质。</li>
                <li><strong>1996年</strong> - 袁隆平启动了超级杂交水稻交配计划。</li>
                <li><strong>1999年</strong> - 小行星8117被命名为“袁隆平星”。</li>
                <li><strong>2001年</strong> - 袁隆平获得国家最高科学技术奖和马格萨萨奖 。</li>
                <li><strong>2004年</strong> - 袁隆平获得沃尔夫农业奖和世界粮食奖 。</li>
                <li><strong>2006年</strong> - 袁隆平成为中国农业领域首位美国科学院外籍院士。</li>
                <li><strong>2010年</strong> - 袁隆平获得食の新潟国际奖佐藤藤三郎特別賞。</li>
                <li><strong>2012年</strong> - 袁隆平获得孔子和平奖。</li>
                <li><strong>2019年</strong> - 袁隆平获得共和国勋章。</li>
                <li><strong>2021年</strong> - 袁隆平因多重器官衰竭在长沙逝世，享年91岁。</li>
            </ul>
        </div>
        <blockquote>
            <p>
                “袁隆平院士是中国杂交水稻事业的开创者，是当代神农。50多年来，始终在农业科研第一线辛勤耕耘、不懈探索，为人类运用科技手段战胜饥饿带来绿色的希望和金色的收获。不仅为解决中国人民的温饱和保障国家粮食安全做出了贡献，更为世界和平和社会进步树立了丰碑。”
            </p>
            <cite>——新浪网评</cite>
        </blockquote>
        <h3>如果你有时间，你应该在他的<a href="https://baike.baidu.com/link?url=9pGya5d8kloerQXYYXKTsU5btV-VGSxt6wC2mXUuFzUh5wQmp0Ji_zuc8lhDpEnLUpYddLfyCQdwUh_8q21xvRf2i8BMOTZZnnEo43Pa7-yQXJMhWUxP2mWdVkEkfkJw" id="tribute-link" target="_blank">百度百科条目</a>上阅读更多关于这个伟大的人的信息。</h3>
    </main>
</body>

</html>
styles.css

html {
    font-size: 10px;
}

body {
    text-align: center;
    color: #333;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

@media (max-width: 460px) {
    h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 460px) {
    #main {
        margin: 0;
    }
}

#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}

#img-caption {
    margin: 15px 0 5px 0;
}

#headline {
    margin: 50px 0;
    text-align: center;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
}

li {
    margin: 16px 0;
}

blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
}

a {
    color: #477ca7;
}

a:visited {
    color: #74638f;
    ;
}

  1. 通过构建资产负债表了解有关CSS伪类选择器的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <main>
        <section>
            <h1>
                <span class="flex">
                    <span>AcmeWidgetCorp</span>
                    <span>Balance Sheet</span>
                </span>
            </h1>
            <div id="years" aria-hidden="true">
                <span class="year">2019</span>
                <span class="year">2020</span>
                <span class="year">2021</span>
            </div>
            <div class="table-wrap">
                <table>
                    <caption>Assets</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only year">2019</span></th>
                            <th><span class="sr-only year">2020</span></th>
                            <th class="current"><span class="sr-only year">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
                            <td>$25</td>
                            <td>$30</td>
                            <td class="current">$28</td>
                        </tr>
                        <tr class="data">
                            <th>Checking <span class="description">Our primary transactional account.</span></th>
                            <td>$54</td>
                            <td>$56</td>
                            <td class="current">$53</td>
                        </tr>
                        <tr class="data">
                            <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
                            <td>$500</td>
                            <td>$650</td>
                            <td class="current">$728</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Assets</span></th>
                            <td>$579</td>
                            <td>$736</td>
                            <td class="current">$809</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Liabilities</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
                            <td>$500</td>
                            <td>$250</td>
                            <td class="current">$0</td>
                        </tr>
                        <tr class="data">
                            <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
                            </th>
                            <td>$200</td>
                            <td>$300</td>
                            <td class="current">$400</td>
                        </tr>
                        <tr class="data">
                            <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
                            <td>$50</td>
                            <td>$50</td>
                            <td class="current">$75</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Liabilities</span></th>
                            <td>$750</td>
                            <td>$600</td>
                            <td class="current">$475</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Net Worth</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="total">
                            <th>Total <span class="sr-only">Net Worth</span></th>
                            <td>$-171</td>
                            <td>$136</td>
                            <td class="current">$334</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</body>

</html>
styles.css

span[class~="sr-only"] {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
}

html {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #0a0a23;
}

h1 {
    max-width: 37.25rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

h1 .flex {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

h1 .flex span:first-of-type {
    font-size: 0.7em;
}

h1 .flex span:last-of-type {
    font-size: 1.2em;
}

section {
    max-width: 40rem;
    margin: 0 auto;
    border: 2px solid #d0d0d5;
}

#years {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    z-index: 999;
    top: 0;
    background: #0a0a23;
    color: #fff;
    padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
    margin: 0 -2px;
}

#years span[class] {
    font-weight: bold;
    width: 4.5rem;
    text-align: right;
}

.table-wrap {
    padding: 0 0.75rem 1.5rem 0.75rem;
}

table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
    position: relative;
    margin-top: 3rem;
}

table caption {
    color: #356eaf;
    font-size: 1.3em;
    font-weight: normal;
    position: absolute;
    top: -2.25rem;
    left: 0.5rem;
}

tbody td {
    width: 100vw;
    min-width: 4rem;
    max-width: 4rem;
}

tbody th {
    width: calc(100% - 12rem);
}

tr[class="total"] {
    border-bottom: 4px double #0a0a23;
    font-weight: bold;
}

tr[class="total"] th {
    text-align: left;
    padding: 0.5rem 0 0.25rem 0.5rem;
}

tr.total td {
    text-align: right;
    padding: 0 0.25rem;
}

tr.total td:nth-of-type(3) {
    padding-right: 0.5rem;
}

tr.total:hover {
    background-color: #99c9ff;
}

td.current {
    font-style: italic;
}

tr.data {
    background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
    text-align: left;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
}

tr.data th .description {
    display: block;
    font-weight: normal;
    font-style: italic;
    padding: 1rem 0 0.75rem;
    margin-right: -13.5rem;
}

tr.data td {
    vertical-align: top;
    padding: 0.3rem 0.25rem 0;
    text-align: right;
}

tr.data td:last-of-type {
    padding: 0.5rem;
}

  1. 创建一副毕加索绘画来学习中级CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>
    <div id="back-wall"></div>
    <div class="characters">
        <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
        </div>
        <div id="black-character">
            <div id="black-hat"></div>
            <div id="gray-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="white-paper">
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
            </div>
        </div>
        <div class="blue" id="blue-left"></div>
        <div class="blue" id="blue-right"></div>
        <div id="orange-character">
            <div id="black-round-hat"></div>
            <div id="eyes-div">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="triangles">
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
            </div>
            <div id="guitar">
                <div class="guitar" id="guitar-left">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="guitar" id="guitar-right">
                    <i class="fas fa-bars"></i>
                </div>
                <div id="guitar-neck"></div>
            </div>
        </div>
    </div>
</body>

</html>
styles.css

body {
    background-color: rgb(184, 132, 46);
}

#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

#white-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 140px 180px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: GhostWhite;
    border-left-color: transparent;
    position: absolute;
    top: -140px;
    left: 0;
}

#black-mask {
    width: 100%;
    height: 50px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#gray-instrument {
    width: 15%;
    height: 40%;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: 50px;
    left: 125px;
    z-index: 1;
}

.black-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 65%;
}

#tan-table {
    width: 450px;
    height: 140px;
    background-color: #D2691E;
    position: absolute;
    top: 275px;
    left: 15px;
    z-index: 1;
}

#black-character {
    width: 300px;
    height: 500px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 30%;
    left: 59%;
}

#black-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 300px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: rgb(45, 31, 19);
    position: absolute;
    top: -150px;
    left: 0;
}

#gray-mask {
    width: 150px;
    height: 150px;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: -10px;
    left: 70px;
}

#white-paper {
    width: 400px;
    height: 100px;
    background-color: GhostWhite;
    position: absolute;
    top: 250px;
    left: -150px;
    z-index: 1;
}

.fa-music {
    display: inline-block;
    margin-top: 8%;
    margin-left: 13%;
}

.blue {
    background-color: #1E90FF;
}

#blue-left {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 20%;
    left: 20%;
}

#blue-right {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 40%;
}

#orange-character {
    width: 250px;
    height: 550px;
    background-color: rgb(240, 78, 42);
    position: absolute;
    top: 25%;
    left: 40%;
}

#black-round-hat {
    width: 180px;
    height: 150px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: -1;
}

#eyes-div {
    width: 180px;
    height: 50px;
    position: absolute;
    top: -40px;
    left: 20px;
    z-index: 3;
}

#triangles {
    width: 250px;
    height: 550px;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 42px 45px 45px 0;
    border-top-color: transparent;
    border-right-color: Gold;
    /* yellow */
    border-bottom-color: transparent;
    border-left-color: transparent;
    display: inline-block;
}

#guitar {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 120px;
    left: 0px;
    z-index: 3;
}

.guitar {
    width: 150px;
    height: 120px;
    background-color: Goldenrod;
    border-radius: 50%;
}

#guitar-left {
    position: absolute;
    left: 0px;
}

#guitar-right {
    position: absolute;
    left: 100px;
}

.fa-bars {
    display: block;
    margin-top: 30%;
    margin-left: 40%;
}

#guitar-neck {
    width: 200px;
    height: 30px;
    background-color: #D2691E;
    position: absolute;
    top: 45px;
    left: 200px;
    z-index: 3;
}

.eyes {
    width: 35px;
    height: 20px;
    background-color: #8B4513;
    border-radius: 20px 50%;
}

.right {
    position: absolute;
    top: 15px;
    right: 30px;
}

.left {
    position: absolute;
    top: 15px;
    left: 30px;
}

.fas {
    font-size: 30px;
}

  1. 通过创建一架钢琴来学习响应式网页设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div id="piano">
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
            alt="freeCodeCamp Logo" />
        <div class="keys">
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
    
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
        </div>
    </div>
</body>

</html>
styles.css

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

#piano {
    background-color: #00471b;
    width: 992px;
    height: 290px;
    margin: 80px auto;
    padding: 90px 20px 0 20px;
    position: relative;
    border-radius: 10px;
}

.keys {
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

.key {
    background-color: #ffffff;
    position: relative;
    width: 41px;
    height: 175px;
    margin: 2px;
    float: left;
    border-radius: 0 0 3px 3px;
}

.key.black--key::after {
    background-color: #1d1e22;
    content: "";
    position: absolute;
    left: -18px;
    width: 32px;
    height: 100px;
    border-radius: 0 0 3px 3px;
}

.logo {
    width: 200px;
    position: absolute;
    top: 23px;
}

@media (max-width: 768px) {
    #piano {
        width: 358px;
    }

    .keys {
        width: 318px;
    }
    
    .logo {
        width: 150px;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    #piano {
        width: 675px;
    }

    .keys {
        width: 633px;
    }
}

  1. 技术文档页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav id="navbar">
        <header>JS文档</header>
        <ul>
            <li><a class="nav-link" href="#Introduction">项目介绍</a></li>
            <li>
                <a class="nav-link" href="#What_you_should_already_know">你应该已经知道的</a>
            </li>
            <li>
                <a class="nav-link" href="#JavaScript_and_Java">JavaScript和Java</a>
            </li>
            <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
            <li><a class="nav-link" href="#Variables">变量</a></li>
            <li>
                <a class="nav-link" href="#Declaring_variables">声明变量</a>
            </li>
            <li><a class="nav-link" href="#Variable_scope">变量范围</a></li>
            <li>
                <a class="nav-link" href="#Global_variables">全局变量</a>
            </li>
            <li><a class="nav-link" href="#Constants">常数</a></li>
            <li><a class="nav-link" href="#Data_types">数据类型</a></li>
            <li>
                <a class="nav-link" href="#if...else_statement">if...else语句</a>
            </li>
            <li><a class="nav-link" href="#while_statement">while语句</a></li>
            <li>
                <a class="nav-link" href="#Function_declarations">函数声明</a>
            </li>
            <li><a class="nav-link" href="#Reference">参考文献</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>项目介绍</header>
            <article>
                <p>
                    JavaScript是一种跨平台、面向对象的脚本语言。它是一种小型和轻量级的语言。在主机环境（例如，Web浏览器）中，JavaScript可以连接到其环境的对象，以提供对它们的编程控制。
                </p>

                <p>
                    JavaScript包含一个标准的对象库，如Array、Date和Math，以及一组核心语言元素，如运算符、控制结构和语句。核心JavaScript可以通过补充额外的对象来扩展各种用途;例如：
                </p>
                <ul>
                    <li>
                        客户端JavaScript通过提供对象来控制浏览器及其文档对象模型（DOM），从而扩展了核心语言。例如，客户端扩展允许应用程序在HTML表单上放置元素，并响应用户事件，如鼠标单击、表单输入和页面导航。
                    </li>
                    <li>
                        服务器端JavaScript通过提供与在服务器上运行JavaScript相关的对象来扩展核心语言。例如，服务器端扩展允许应用程序与数据库通信，提供从应用程序的一个调用到另一个调用的信息的连续性，或者在服务器上执行文件操作。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="What_you_should_already_know">
            <header>你应该已经知道的</header>
            <article>
                <p>本指南假设您具备以下基本背景：</p>
    
                <ul>
                    <li>
                        对互联网和万维网（WWW）有一般的了解。
                    </li>
                    <li>
                        良好的超文本标记语言（HTML）工作知识。
                    </li>
                    <li>
                        有编程经验。如果您是编程新手，请尝试主页上链接的有关JavaScript的教程之一。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="JavaScript_and_Java">
            <header>JavaScript和Java</header>
            <article>
                <p>
                    JavaScript和Java在某些方面是相似的，但在其他方面有根本的不同。JavaScript语言类似于Java，但没有Java的静态类型和强类型检查。JavaScript遵循大多数Java表达式语法，命名约定和基本控制流结构，这就是它从LiveScript重命名为JavaScript的原因。
                </p>
    
                <p>
                    与Java通过声明构建的类的编译时系统相反，JavaScript支持基于少量表示数值、布尔值和字符串值的数据类型的运行时系统。JavaScript具有基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的模型提供动态继承;也就是说，对于各个对象，继承的内容可能不同。JavaScript还支持没有任何特殊声明性要求的函数。函数可以是对象的属性，作为松散类型的方法执行。
                </p>
                <p>
                    与Java相比，JavaScript是一种非常自由的语言。您不必声明所有的变量、类和方法。您不必关心方法是公共的、私有的还是受保护的，也不必实现接口。变量、参数和函数返回类型不是显式类型化的。
                </p>
            </article>
        </section>
        <section class="main-section" id="Hello_world">
            <header>Hello world</header>
            <article>
                要开始编写JavaScript，请打开Scratchpad并编写第一个“Hello world”JavaScript代码：
                <code>
                    function greetMe(yourName) &#123; alert("Hello " + yourName); &#125;
                    greetMe("World");
                </code>
                选择代码板中的代码，然后按Ctrl+R以观看它在浏览器中展开！
            </article>
        </section>
        <section class="main-section" id="Variables">
            <header>变量</header>
            <p>
                在应用程序中，变量用作值的符号名称。变量的名字，称为标识符，符合一定的规则。
            </p>
            <p>
                JavaScript标识符必须以字母、下划线（_）或美元符号（$）开头;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。
            </p>
            <p>
                您可以在标识符中使用ISO 8859-1或Unicode字母，例如å和ü。您还可以使用Unicode转义序列作为标识符中的字符。法律的名称的一些示例包括Number_hits、temp 99和_name。
            </p>
        </section>
        <section class="main-section" id="Declaring_variables">
            <header>声明变量</header>
            <article>
                你可以用三种方式声明一个变量：
                <p>
                    使用关键字var。例如，
                    <code>var x = 42.</code>
                    此语法可用于声明局部和全局变量。
                </p>
                <p>
                    只要给它赋值。例如，
                    <code>x = 42.</code>
                    This总是声明一个全局变量。它会生成严格的JavaScript警告。你不应该使用这个变量。
                </p>
                <p>
                    使用关键字let。例如，
                    <code> let y = 13.</code>
                    此语法可用于声明块范围局部变量。参见下面的变量范围。
                </p>
            </article>
        </section>
        <section class="main-section" id="Variable_scope">
            <header>变量范围</header>
            <article>
                <p>
                    当在任何函数之外声明变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。当你在一个函数中声明一个变量时，它被称为局部变量，因为它只能在该函数中使用。
                </p>
    
                <p>
                    ECMAScript
                    2015之前的JavaScript没有block语句作用域;相反，在块中声明的变量对于块驻留在其中的函数（或全局范围）是本地的。例如，下面的代码将记录5，因为x的作用域是声明x的函数（或全局上下文），而不是块，在这种情况下是if语句。
                </p>
                <code>if (true) &#123; var x = 5; &#125; console.log(x); // 5</code>
                <p>
                    当使用ECMAScript 2015中引入的let声明时，这种行为会发生变化。
                </p>
    
                <code>if (true) &#123; let y = 5; &#125; console.log(y); // ReferenceError: y isnot defined</code>
            </article>
        </section>
        <section class="main-section" id="Global_variables">
            <header>全局变量</header>
            <article>
                <p>
                    全局变量实际上是全局对象的属性。在web页面中，全局对象是window，因此您可以使用window.variable语法设置和访问全局变量。
                </p>
    
                <p>
                    因此，通过指定窗口或框架名称，可以从另一个窗口或框架访问在一个窗口或框架中声明的全局变量。例如，如果在文档中声明了一个名为phoneNumber的变量，则可以从iframe中引用此变量作为parent.phoneNumber。
                </p>
            </article>
        </section>
        <section class="main-section" id="Constants">
            <header>常量</header>
            <article>
                <p>
                    您可以使用const关键字创建一个只读的命名常量。常量标识符的语法与变量标识符的语法相同：它必须以字母、下划线或美元符号开头，并且可以包含字母、数字或下划线字符。
                </p>
    
                <code>const PI = 3.14;</code>
                <p>
                    常量不能通过赋值来更改值，也不能在脚本运行时重新声明。它必须初始化为一个值。
                </p>
    
                <p>
                    常量的作用域规则与let块作用域变量的作用域规则相同。如果省略const关键字，则假定标识符表示变量。
                </p>
    
                <p>
                    不能声明与同一作用域中的函数或变量同名的常量。例如：
                </p>
    
                <code>
                    // THIS WILL CAUSE AN ERROR function f() &#123;&#125;; const f = 5; 
                    // THISWILL CAUSE AN ERROR ALSO function f() &#123; const g = 5; var g;
                    //statements &#125;
                </code>
                但是，对象属性不受保护，因此执行以下语句没有问题。
                <code>
                    const MY_OBJECT = &#123;"key": "value"&#125;; 
                    MY_OBJECT.key ="otherValue";
                </code>
            </article>
        </section>
        <section class="main-section" id="Data_types">
            <header>数据类型</header>
            <article>
                <p>最新的ECMAScript标准定义了七种数据类型：</p>
                <ul>
                    <li>
                        <p>作为基元的六种数据类型：</p>
                        <ul>
                            <li>Boolean. true与false.</li>
                            <li>
                                null. 表示空值的特殊关键字。因为JavaScript是区分大小写的，所以null与Null、NULL或任何其他变体都不相同。
                            </li>
                            <li>
                                undefined. 其值未定义的顶级属性。
                            </li>
                            <li>Number. 42或3.14159.</li>
                            <li>String. "你好"</li>
                            <li>
                                Symbol（ECMAScript 2015中新增）。一种数据类型，其实例是唯一的且不可变的。
                            </li>
                        </ul>
                    </li>
    
                    <li>对象</li>
                </ul>
                虽然这些数据类型的数量相对较小，但它们使您能够在应用程序中执行有用的功能。对象和函数是语言中的其他基本元素。您可以将对象视为值的命名容器，将函数视为应用程序可以执行的过程。
            </article>
        </section>
        <section class="main-section" id="if...else_statement">
            <header>if...else语句</header>
            <article>
                如果逻辑条件为真，则使用if语句执行语句。如果条件为false，则使用可选的else子句执行语句。if语句如下所示：
    
                <code>if (condition) &#123; statement_1; &#125; else &#123; statement_2; &#125;</code>
                condition可以是任何计算结果为true或false的表达式。有关计算结果为true和false的解释，请参见Boolean。如果condition的计算结果为true，则执行statement_1;否则，执行statement_2。statement_1和statement_2可以是任何语句，包括进一步嵌套的if语句。
                <p>
                    您还可以使用else if复合语句，以便按顺序测试多个条件，如下所示：
                </p>
                <code>
                    if (condition_1) &#123; statement_1; &#125; 
                    else if (condition_2) &#123;statement_2; &#125; 
                    else if (condition_n) &#123; statement_n; &#125; 
                    else &#123;statement_last; &#125;
                </code>
                在多个条件的情况下，仅执行第一个评估为真的逻辑条件。若要执行多个语句，请将它们分组在一个块语句（{... }）。一般来说，最好总是使用块语句，特别是在嵌套if语句时：
    
                <code>
                    if (condition) &#123; statement_1_runs_if_condition_is_true;
                    statement_2_runs_if_condition_is_true; &#125; else &#123;
                    statement_3_runs_if_condition_is_false;
                    statement_4_runs_if_condition_is_false; &#125;
                </code>
                建议不要在条件表达式中使用简单的赋值，因为在浏览代码时，赋值可能会与相等混淆。例如，不要使用以下代码：
                <code>if (x = y) &#123; /* statements here */ &#125;</code>
                如果你需要在条件表达式中使用赋值，一个常见的做法是在赋值周围加上额外的括号。例如：
                <code>if ((x = y)) &#123; /* statements here */ &#125;</code>
            </article>
        </section>
        <section class="main-section" id="while_statement">
            <header>while语句</header>
            <article>
                只要指定的条件计算为true，while语句就会执行其语句。while语句如下所示：
    
                <code>while (condition) statement</code>
                如果条件变为false，则循环内的语句停止执行，控制传递到循环后的语句。
    
                <p>
                    条件测试发生在执行循环中的语句之前。如果条件返回true，则执行语句并再次测试条件。如果条件返回false，则停止执行，并将控制传递给while后面的语句。
                </p>
    
                <p>
                    要执行多个语句，请使用块语句（{... }）对这些语句进行分组。
                </p>
    
                示例：
    
                <p>
                    下面的while循环只要n小于3就会迭代：
                </p>
    
                <code>var n = 0; var x = 0; while (n &lt; 3) &#123; n++; x += n; &#125;</code>
                <p>
                    在每次迭代中，循环递增n并将该值添加到x。因此，x和n取以下值：
                </p>
    
                <ul>
                    <li>第一遍之后：n = 1且x = 1</li>
                    <li>第二遍之后：n = 2和x = 3</li>
                    <li>第三遍之后：n = 3和x = 6</li>
                </ul>
                <p>
                    在完成第三遍之后，条件n < 3不再为真，因此循环终止。 </p>
            </article>
        </section>
        <section class="main-section" id="Function_declarations">
            <header>函数声明</header>
            <article>
                函数定义（也称为函数声明或函数语句）由function关键字组成，后跟：
    
                <ul>
                    <li>函数的名称。</li>
                    <li>
                        函数的参数列表，用圆括号括起来并用逗号分隔。
                    </li>
                    <li>
                        定义函数的JavaScript语句，用大括号{ }括起来。
                    </li>
                </ul>
                <p>
                    例如，下面的代码定义了一个名为square的简单函数：
                </p>
    
                <code>function square(number) &#123; return number * number; &#125;</code>
                <p>
                    函数square有一个参数，叫做number。该函数由一条语句组成，该语句表示返回函数的参数（即number）乘以自身。return语句指定函数返回的值。
                </p>
                <code>return number * number;</code>
                <p>
                    原始参数（如数字）通过值传递给函数;该值被传递给函数，但如果函数更改了参数的值，则该更改不会全局反映或反映在调用函数中。
                </p>
            </article>
        </section>
        <section class="main-section" id="Reference">
            <header>参考文献</header>
            <article>
                <ul>
                    <li>
                        本页中的所有文档均来自
                        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
                    </li>
                </ul>
            </article>
        </section>
    </main>
</body>

</html>
styles.css

html,
body {
    min-width: 290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
}

#navbar {
    position: fixed;
    min-width: 290px;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}

header {
    color: black;
    margin: 10px;
    text-align: center;
    font-size: 1.8em;
    font-weight: thin;
}

#main-doc header {
    text-align: left;
    margin: 0px;
}

#navbar ul {
    height: 88%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#navbar li {
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
}

#navbar a {
    display: block;
    padding: 10px 30px;
    color: #4d4e53;
    text-decoration: none;
    cursor: pointer;
}

#main-doc {
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
}

section article {
    color: #4d4e53;
    margin: 15px;
    font-size: 0.96em;
}

section li {
    margin: 15px 0px 0px 20px;
}

code {
    display: block;
    text-align: left;
    white-space: pre-line;
    position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 815px) {

    /* For mobile phones: */
    #navbar ul {
        border: 1px solid;
        height: 207px;
    }
    
    #navbar {
        background-color: white;
        position: absolute;
        top: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        max-height: 275px;
        border: none;
        z-index: 1;
        border-bottom: 2px solid;
    }
    
    #main-doc {
        position: relative;
        margin-left: 0px;
        margin-top: 270px;
    }
}

@media only screen and (max-width: 400px) {
    #main-doc {
        margin-left: -10px;
    }

    code {
        margin-left: -20px;
        width: 100%;
        padding: 15px;
        padding-left: 10px;
        padding-right: 45px;
        min-width: 233px;
    }
}

  1. 通过建立城市轮廓学习CSS变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="background-buildings sky">
        <div></div>
        <div></div>
        <div class="bb1 building-wrap">
            <div class="bb1a bb1-window"></div>
            <div class="bb1b bb1-window"></div>
            <div class="bb1c bb1-window"></div>
            <div class="bb1d"></div>
        </div>
        <div class="bb2">
            <div class="bb2a"></div>
            <div class="bb2b"></div>
        </div>
        <div class="bb3"></div>
        <div></div>
        <div class="bb4 building-wrap">
            <div class="bb4a"></div>
            <div class="bb4b"></div>
            <div class="bb4c window-wrap">
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
            </div>
        </div>
        <div></div>
        <div></div>
    </div>

    <div class="foreground-buildings">
        <div></div>
        <div></div>
        <div class="fb1 building-wrap">
            <div class="fb1a"></div>
            <div class="fb1b"></div>
            <div class="fb1c"></div>
        </div>
        <div class="fb2">
            <div class="fb2a"></div>
            <div class="fb2b window-wrap">
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
            </div>
        </div>
        <div></div>
        <div class="fb3 building-wrap">
            <div class="fb3a window-wrap">
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
            </div>
            <div class="fb3b"></div>
            <div class="fb3a"></div>
            <div class="fb3b"></div>
        </div>
        <div class="fb4">
            <div class="fb4a"></div>
            <div class="fb4b">
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
            </div>
        </div>
        <div class="fb5"></div>
        <div class="fb6"></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>
styles.css

:root {
    --building-color1: #aa80ff;
    --building-color2: #66cc99;
    --building-color3: #cc6699;
    --building-color4: #538cc6;
    --window-color1: #bb99ff;
    --window-color2: #8cd9b3;
    --window-color3: #d98cb3;
    --window-color4: #8cb3d9;
}

* {
    box-sizing: border-box;
    }

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.background-buildings,
.foreground-buildings {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
}

.building-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.window-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sky {
    background: radial-gradient(closest-corner circle at 15% 15%,
            #ffcf33,
            #ffcf33 20%,
            #ffff66 21%,
            #bbeeff 100%);
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
    width: 10%;
    height: 70%;
}

.bb1a {
    width: 70%;
}

.bb1b {
    width: 80%;
}

.bb1c {
    width: 90%;
}

.bb1d {
    width: 100%;
    height: 70%;
    background: linear-gradient(var(--building-color1) 50%,
            var(--window-color1));
}

.bb1-window {
    height: 10%;
    background: linear-gradient(var(--building-color1),
            var(--window-color1));
}

.bb2 {
    width: 10%;
    height: 50%;
}

.bb2a {
    border-bottom: 5vh solid var(--building-color2);
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
}

.bb2b {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 6%,
            var(--window-color2) 6%,
            var(--window-color2) 9%);
}

.bb3 {
    width: 10%;
    height: 55%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3),
            var(--window-color3) 15%);
}

.bb4 {
    width: 11%;
    height: 58%;
}

.bb4a {
    width: 3%;
    height: 10%;
    background-color: var(--building-color4);
}

.bb4b {
    width: 80%;
    height: 5%;
    background-color: var(--building-color4);
}

.bb4c {
    width: 100%;
    height: 85%;
    background-color: var(--building-color4);
}

.bb4-window {
    width: 18%;
    height: 90%;
    background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
    width: 10%;
    height: 60%;
}

.fb1a {
    border-bottom: 7vh solid var(--building-color4);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
}

.fb1b {
    width: 60%;
    height: 10%;
    background-color: var(--building-color4);
}

.fb1c {
    width: 100%;
    height: 80%;
    background: repeating-linear-gradient(90deg,
            var(--building-color4),
            var(--building-color4) 10%,
            transparent 10%,
            transparent 15%),
        repeating-linear-gradient(var(--building-color4),
            var(--building-color4) 10%,
            var(--window-color4) 10%,
            var(--window-color4) 90%);
}

.fb2 {
    width: 10%;
    height: 40%;
}

.fb2a {
    width: 100%;
    border-bottom: 10vh solid var(--building-color3);
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
}

.fb2b {
    width: 100%;
    height: 75%;
    background-color: var(--building-color3);
}

.fb2-window {
    width: 22%;
    height: 100%;
    background-color: var(--window-color3);
}

.fb3 {
    width: 10%;
    height: 35%;
}

.fb3a {
    width: 80%;
    height: 15%;
    background-color: var(--building-color1);
}

.fb3b {
    width: 100%;
    height: 35%;
    background-color: var(--building-color1);
}

.fb3-window {
    width: 25%;
    height: 80%;
    background-color: var(--window-color1);
}

.fb4 {
    width: 8%;
    height: 45%;
    position: relative;
    left: 10%;
}

.fb4a {
    border-top: 5vh solid transparent;
    border-left: 8vw solid var(--building-color1);
}

.fb4b {
    width: 100%;
    height: 89%;
    background-color: var(--building-color1);
    display: flex;
    flex-wrap: wrap;
}

.fb4-window {
    width: 30%;
    height: 10%;
    border-radius: 50%;
    background-color: var(--window-color1);
    margin: 10%;
}

.fb5 {
    width: 10%;
    height: 33%;
    position: relative;
    right: 10%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 5%,
            transparent 5%,
            transparent 10%),
        repeating-linear-gradient(90deg,
            var(--building-color2),
            var(--building-color2) 12%,
            var(--window-color2) 12%,
            var(--window-color2) 44%);
}

.fb6 {
    width: 9%;
    height: 38%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3) 10%,
            transparent 10%,
            transparent 30%),
        repeating-linear-gradient(var(--building-color3),
            var(--building-color3) 10%,
            var(--window-color3) 10%,
            var(--window-color3) 30%);
}

@media (max-width: 1000px) {
    :root {
        --building-color1: #000;
        --building-color2: #000;
        --building-color3: #000;
        --building-color4: #000;
        --window-color1: #777;
        --window-color2: #777;
        --window-color3: #777;
        --window-color4: #777;
    }

    .sky {
        background: radial-gradient(closest-corner circle at 15% 15%,
                #ccc,
                #ccc 20%,
                #445 21%,
                #223 100%);
    }
}

  1. 通过创建杂志学习CSS网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <main>
        <section class="heading">
            <header class="hero">
                <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
                    alt="freecodecamp logo" loading="lazy" class="hero-img" />
                <h1 class="hero-title">OUR NEW CURRICULUM</h1>
                <p class="hero-subtitle">
                    Our efforts to restructure our curriculum with a more project-based focus
                </p>
            </header>
            <div class="author">
                <p class="author-name">
                    By
                    <a href="https://freecodecamp.org" target="_blank" rel="noreferrer">freeCodeCamp</a>
                </p>
                <p class="publish-date">March 7, 2019</p>
            </div>
            <div class="social-icons">
                <a href="https://www.facebook.com/freecodecamp/">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://twitter.com/freecodecamp/">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://instagram.com/freecodecamp">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/school/free-code-camp/">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://www.youtube.com/freecodecamp">
                    <i class="fab fa-youtube"></i>
                </a>
            </div>
        </section>
        <section class="text">
            <p class="first-paragraph">
                Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding
                challenges, you'll learn through building projects - step by step. Before we get into the details, let
                me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5
                required projects. We are only changing the optional coding challenges.
            </p>
            <p>
                After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on
                the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This
                is what makes time travel possible: the flux capacitor!
            </p>
            <p>
                It wasn't as dramatic as Doc's revelation in Back to the Future. It
                just occurred to me while I was going for a run. The revelation: the entire curriculum should be a
                series of projects. Instead of individual coding challenges, we'll just have projects, each with their
                own seamless series of tests. Each test gives you just enough information to figure out how to get it to
                pass. (And you can view hints if that isn't enough.)
            </p>
            <blockquote>
                <hr />
                <p class="quote">
                    The entire curriculum should be a series of projects
                </p>
                <hr />
            </blockquote>
            <p>
                No more walls of explanatory text. No more walls of tests. Just one
                test at a time, as you build up a working project. Over the course of passing thousands of tests, you
                build up projects and your own understanding of coding fundamentals. There is no transition between
                lessons and projects, because the lessons themselves are baked into projects. And there's plenty of
                repetition to help you retain everything because - hey - building projects in real life has plenty of
                repetition.
            </p>
            <p>
                The main design challenge is taking what is currently paragraphs of explanation and instructions and
                packing them into a single test description text. Each project will involve dozens of tests like this.
                People will be coding the entire time, rather than switching back and forth from "reading mode" to
                "coding mode".
            </p>
            <p>
                Instead of a series of coding challenges, people will be in their code editor passing one test after
                another, quickly building up a project. People will get into a real flow state, similar to what they
                experience when they build the required projects at the end of each certification. They'll get that
                sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
            </p>
        </section>
        <section class="text text-with-images">
            <article class="brief-history">
                <h3 class="list-title">A Brief History</h3>
                <p>Of the Curriculum</p>
                <ul class="lists">
                    <li>
                        <h4 class="list-subtitle">V1 - 2014</h4>
                        <p>
                            We launched freeCodeCamp with a simple list of 15 resources,
                            including Harvard's CS50 and Stanford's Database Class.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V2 - 2015</h4>
                        <p>We added interactive algorithm challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V3 - 2015</h4>
                        <p>
                            We added our own HTML+CSS challenges (before we'd been relying on
                            General Assembly's Dash course for these).
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V4 - 2016</h4>
                        <p>
                            We expanded the curriculum to 3 certifications, including Front
                            End, Back End, and Data Visualization. They each had 10 required
                            projects, but only the Front End section had its own challenges.
                            For the other certs, we were still using external resources like
                            Node School.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V5 - 2017</h4>
                        <p>We added the back end and data visualization challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V6 - 2018</h4>
                        <p>
                            We launched 6 new certifications to replace our old ones. This was
                            the biggest curriculum improvement to date.
                        </p>
                    </li>
                </ul>
            </article>
            <aside class="image-wrapper">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
                    alt="image of the quote machine project" loading="lazy" class="image-1" width="600" height="400" />
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
                    alt="image of a calculator project" loading="lazy" class="image-2" width="400" height="400" />
                <blockquote class="image-quote">
                    <hr />
                    <p class="quote">
                        The millions of people who are learning to code through freeCodeCamp
                        will have an even better resource to help them learn these
                        fundamentals.
                    </p>
                    <hr />
                </blockquote>
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
                    alt="four people working on code" loading="lazy" class="image-3" width="600" height="400" />
            </aside>
        </section>
    </main>
</body>

</html>
styles.css

*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Baskervville', serif;
    color: linen;
    background-color: rgb(20, 30, 40);
}

h1 {
    font-family: 'Anton', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
}

a {
    text-decoration: none;
    color: linen;
}

main {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem;
}

img {
    width: 100%;
    object-fit: cover;
}

hr {
    margin: 1.5rem 0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}

.heading {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
}

.text {
    grid-column: 2 / 3;
    font-size: 1.8rem;
    letter-spacing: 0.6px;
    column-width: 25rem;
    text-align: justify;
}

.hero {
    grid-column: 1 / -1;
    position: relative;
}

.hero-title {
    text-align: center;
    color: orangered;
    font-size: 8rem;
}

.hero-subtitle {
    font-size: 2.4rem;
    color: orangered;
    text-align: center;
}

.author {
    font-size: 2rem;
    font-family: "Raleway", sans-serif;
}

.author-name a:hover {
    background-color: #306203;
}

.publish-date {
    color: rgba(255, 255, 255, 0.5);
}

.social-icons {
    display: grid;
    font-size: 3rem;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

.first-paragraph::first-letter {
    font-size: 6rem;
    color: orangered;
    float: left;
    margin-right: 1rem;
}

.quote {
    color: #00beef;
    font-size: 2.4rem;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

.quote::before {
    content: '" ';
}

.quote::after {
    content: ' "';
}

.text-with-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
    margin-bottom: 3rem;
}

.lists {
    list-style-type: none;
    margin-top: 2rem;
}

.lists li {
    margin-bottom: 1.5rem;
}

.list-title,
.list-subtitle {
    color: #00beef;
}

.image-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, min-content);
    gap: 2rem;
    place-items: center;
}

.image-1,
.image-3 {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
    .image-wrapper {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .text-with-images {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .hero-title {
        font-size: 6rem;
    }

    .hero-subtitle,
    .author,
    .quote,
    .list-title {
        font-size: 1.8rem;
    }
    
    .social-icons {
        font-size: 2rem;
    }
    
    .text {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 420px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

  1. 产品登录页【认证项目】

1
2
index.html
styles.css

  1. 通过构建摩天轮学习CSS动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="wheel">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>

        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
    </div>
</body>

</html>
styles.css

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 50px;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
    transform: rotate(60deg);
}

.line:nth-of-type(3) {
    transform: rotate(120deg);
}

.line:nth-of-type(4) {
    transform: rotate(180deg);
}

.line:nth-of-type(5) {
    transform: rotate(240deg);
}

.line:nth-of-type(6) {
    transform: rotate(300deg);
}

.cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    transform-origin: 50% 0%;
    animation: cabins 10s ease-in-out infinite;
}

.cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
}

.cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
}

.cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
}

.cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cabins {
    0% {
        transform: rotate(0deg);
    }

    25% {
        background-color: yellow;
    }
    
    50% {
        background-color: purple;
    }
    
    75% {
        background-color: yellow;
    }
    
    100% {
        transform: rotate(-360deg);
    }
}

  1. 通过构建企鹅来学习CSS变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="sun"></div>
    <div class="penguin">
        <div class="penguin-head">
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="chin"></div>
            <div class="eye left">
                <div class="eye-lid"></div>
            </div>
            <div class="eye right">
                <div class="eye-lid"></div>
            </div>
            <div class="blush left"></div>
            <div class="blush right"></div>
            <div class="beak top"></div>
            <div class="beak bottom"></div>
        </div>
        <div class="shirt">
            <div>💜</div>
            <p>I CSS</p>
        </div>
        <div class="penguin-body">
            <div class="arm left"></div>
            <div class="arm right"></div>
            <div class="foot left"></div>
            <div class="foot right"></div>
        </div>
    </div>

    <div class="ground"></div>
</body>

</html>
styles.css

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
}

body {
    background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
    position: absolute;
    transform: skew(0deg, 44deg);
    z-index: 2;
    margin-top: 100px;
}

.back-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    left: 110px;
    top: 225px;
}

.sun {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    top: -75px;
    right: -75px;
}

.penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    transition: transform 1s ease-in-out 0ms;
}

.penguin * {
    position: absolute;
}

.penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
}

.penguin-head {
    width: 50%;
    height: 45%;
    background: linear-gradient(45deg,
            var(--penguin-skin),
            rgb(239, 240, 228));
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
}

.face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
}

.face.left {
    left: 5%;
}

.face.right {
    right: 5%;
}

.chin {
    width: 90%;
    height: 70%;
    background-color: var(--penguin-face);
    top: 25%;
    left: 5%;
    border-radius: 70% 70% 100% 100%;
}

.eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 45%;
    border-radius: 50%;
}

.eye.left {
    left: 25%;
}

.eye.right {
    right: 25%;
}

.eye-lid {
    width: 150%;
    height: 100%;
    background-color: var(--penguin-face);
    top: 25%;
    left: -23%;
    border-radius: 50%;
}

.blush {
    width: 15%;
    height: 10%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
}

.blush.left {
    left: 15%;
}

.blush.right {
    right: 15%;
}

.beak {
    height: 10%;
    background-color: var(--penguin-picorna);
    border-radius: 50%;
}

.beak.top {
    width: 20%;
    top: 60%;
    left: 40%;
}

.beak.bottom {
    width: 16%;
    top: 65%;
    left: 42%;
}

.shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 165px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
}

.shirt div {
    font-weight: initial;
    top: 22.5px;
    left: 12px;
}

.penguin-body {
    width: 53%;
    height: 45%;
    background: linear-gradient(45deg,
            rgb(134, 133, 133) 0%,
            rgb(234, 231, 231) 25%,
            white 67%);
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
}

.penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: var(--penguin-skin);
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
}

.arm {
    width: 30%;
    height: 60%;
    background: linear-gradient(90deg,
            var(--penguin-skin),
            rgb(209, 210, 199));
    border-radius: 30% 30% 30% 120%;
    z-index: -1;
}

.arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left;
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
}

.arm.right {
    top: 0%;
    right: -5%;
    transform: rotate(-45deg);
}

@keyframes wave {
    10% {
        transform: rotate(110deg) scaleX(-1);
    }

    20% {
        transform: rotate(130deg) scaleX(-1);
    }
    
    30% {
        transform: rotate(110deg) scaleX(-1);
    }
    
    40% {
        transform: rotate(130deg) scaleX(-1);
    }
}

.foot {
    width: 15%;
    height: 30%;
    background-color: var(--penguin-picorna);
    top: 85%;
    border-radius: 50%;
    z-index: -1;
}

.foot.left {
    left: 25%;
    transform: rotate(80deg);
}

.foot.right {
    right: 25%;
    transform: rotate(-80deg);
}

.ground {
    width: 100vw;
    height: calc(100vh - 300px);
    background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
    z-index: 3;
    position: absolute;
    margin-top: -58px;
}

  1. 个人作品展示页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>

    <!-- 导航栏 -->
    <nav id="navbar" class="nav">
        <ul class="nav-list">
            <li><a href="#welcome-section">关于</a></li>
            <li><a href="#projects">作品</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    
    <!-- 欢迎页 -->
    <section class="welcome-section" id="welcome-section">
        <h1>嗨，我是青橙</h1>
        <p>一个Web前端开发者</p>
    </section>
    
    <!-- 作品集 -->
    <section class="projects-section" id="projects">
        <h2 class="projects-section-header">这是我的一些作品</h2>
        <div class="projects-grid">
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
        </div>
        <a href="" class="btn btn-show-all" target="_blank">展示所有<i class="fas fa-chevron-right"></i></a>
    </section>
    
    <!-- 联系方式 -->
    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2>让我们一起共事…</h2>
            <p>你要怎样联系我？</p>
        </div>
        <div class="contact-links">
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-weixin"></i> 微信
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-qq"></i> QQ
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-github"></i> Github
            </a>
            <a href="mailto:orange****@qq.com" target="_blank" class="btn contact-details">
                <i class="fas fa-at"></i> 邮箱
            </a>
            <a href="tel:191****3043" target="_blank" class="btn contact-details">
                <i class="fas fa-mobile-alt"></i> 电话
            </a>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
        <p>&copy;作者 <a href="https://blog.webrelay.cn" target="_blank">青橙</a></p>
    </footer>

</body>

</html>
styles.css

:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    }

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

/* 
1200px = 75em
980px = 61.25em
460px = 28.75em
 */

@media (max-width: 75em) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 61.25em) {
    html {
        font-size: 58%;
    }
}

@media (max-width: 28.75em) {
    html {
        font-size: 55%;
    }
}

body {
    font-size: 1.8rem; /* 18px */
    color: var(--main-white);
    line-height: 1.4;
    font-weight: 400;
}

h1 {
    font-size: 6rem;
    text-align: center;
}

h2 {
    font-size: 4.2rem;
    text-align: center;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-white);
}

img {
    display: block;
    width: 100%;
}


/* 导航栏 */
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.nav-list {
    display: flex;
    margin-right: 2rem;
}

.nav-list a {
    display: block;
    font-size: 2.2rem;
    padding: 2rem;
}

@media (max-width: 28.75em) {
    .nav {
        justify-content: center;
    }

    .nav-list {
        margin: 0 1rem;
    }
}

.nav-list a:hover {
    background: var(--main-blue);
}

/* 欢迎页 */
.welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

.welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: var(--main-red);
}

/* 作品集 */
.projects-section {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
    .projects-section-header {
        font-size: 4rem;
    }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
    .projects-section {
        padding: 6rem 1rem;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

.project {
    background: var(--main-gray);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.code {
    color: var(--main-gray);
    transition: color 0.3s ease-out;
}

.project:hover .code {
    color: #ff7f50;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px;
}

.btn-show-all {
    font-size: 2rem;
    background: var(--main-gray);
    transition: background 0.3s ease-out;
}

.btn-show-all:hover {
    background: var(--main-red);
}

.btn-show-all:hover > i {
    transform: translateX(2px);
}

.btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/* 联系页 */
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background: var(--main-gray);
}

.contact-section-header > h2 {
    font-size: 6rem;
}

@media (max-width: 28.75em) {
    .contact-section-header > h2 {
        font-size: 4rem;
    }
}

.contact-section-header > p {
    font-style: italic;
}

.contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out;
}

.contact-details:hover {
    transform: translateY(5px);
}

/* 页脚 */
footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--main-gray);
    border-top: 4px solid var(--main-red);
}

footer > p {
    margin: 2rem;
}

@media (max-width: 28.75em) {
    footer {
        flex-direction: column;
        text-align: center;
    }
}
]]> + 本文章汇总了freeCodeCamp网站关于响应式网页设计的所有案例的源码

  1. 通过编写猫咪相册应用学习HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
</head>

<body>
    <main>
        <h1>CatPhotoApp</h1>
        <section>
            <h2>Cat Photos</h2>
            <!-- TODO: Add link to cat photos -->
            <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
            <a href="https://freecatphotoapp.com"><img
                    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
                    alt="A cute orange cat lying on its back."></a>
        </section>
        <section>
            <h2>Cat Lists</h2>
            <h3>Things cats love:</h3>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
                    alt="A slice of lasagna on a plate.">
                <figcaption>Cats <em>love</em> lasagna.</figcaption>
            </figure>
            <h3>Top 3 things cats hate:</h3>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
            <figure>
                <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
                    alt="Five cats looking around a field.">
                <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
            </figure>
        </section>
        <section>
            <h2>Cat Form</h2>
            <form action="https://freecatphotoapp.com/submit-cat-photo">
                <fieldset>
                    <legend>Is your cat an indoor or outdoor cat?</legend>
                    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
                    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
                </fieldset>
                <fieldset>
                    <legend>What's your cat's personality?</legend>
                    <input id="loving" type="checkbox" name="personality" value="loving" checked> <label
                        for="loving">Loving</label>
                    <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
                    <input id="energetic" type="checkbox" name="personality" value="energetic"> <label
                        for="energetic">Energetic</label>
                </fieldset>
                <input type="text" name="catphotourl" placeholder="cat photo URL" required>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
        </p>
    </footer>
</body>

</html>

  1. 通过编写咖啡店菜单学习基础CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon" />
                <article class="item">
                    <p class="flavor">French Vanilla</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
                </article>
                <article class="item">
                    <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
                </article>
                <article class="item">
                    <p class="flavor">Hazelnut</p><p class="price">4.00</p>
                </article>
                <article class="item">
                    <p class="flavor">Mocha</p><p class="price">4.50</p>
                </article>
            </section>
            <section>
                <h2>Desserts</h2>
                <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />
                <article class="item">
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
                <article class="item">
                    <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
                </article>
                <article class="item">
                    <p class="dessert">Cheesecake</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
                </article>
            </section>
        </main>
        <hr class="bottom-line">
        <footer>
            <p>
                <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
            </p>
            <p class="address">123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>

</html>
styles.css

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
    font-family: sans-serif;
    padding: 20px;
}

h1 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

h2 {
    font-size: 30px;
}

.established {
    font-style: italic;
}

h1,
h2,
p {
    text-align: center;
}

.menu {
    width: 80%;
    background-color: burlywood;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 500px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -25px;
}

hr {
    height: 2px;
    background-color: brown;
    border-color: brown;
}

.bottom-line {
    margin-top: 25px;
}

h1,
h2 {
    font-family: Impact, serif;
}

.item p {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 18px;
}

.flavor,
.dessert {
    text-align: left;
    width: 75%;
}

.price {
    text-align: right;
    width: 25%;
}

/* FOOTER */

footer {
    font-size: 14px;
}

.address {
    margin-bottom: 5px;
}

a {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: brown;
}

a:active {
    color: brown;
}

  1. 通过构建一组彩色笔来学习CSS颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>CSS Color Markers</h1>
    <div class="container">
        <div class="marker red">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
    </div>
</body>

</html>
styles.css

h1 {
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
    padding: 10px 0;
}

.marker {
    width: 200px;
    height: 25px;
    margin: 10px auto;
}

.cap {
    width: 60px;
    height: 25px;
}

.sleeve {
    width: 110px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap,
.sleeve {
    display: inline-block;
}

.red {
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}

  1. 通过编写注册表单学习HTML表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <fieldset>
            <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text"required /></label>
            <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
            <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
            <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
        </fieldset>
        <fieldset>
            <label for="personal-account"><input id="personal-account" type="radio" name="account-type"class="inline" /> Personal Account</label>
            <label for="business-account"><input id="business-account" type="radio" name="account-type"class="inline" /> Business Account</label>
            <label for="terms-and-conditions">
                <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" />I accept the 
                <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
            </label>
        </fieldset>
        <fieldset>
            <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
            <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13"max="120" /></label>
            <label for="referrer">How did you hear about us?
                <select id="referrer" name="referrer">
                    <option value="">(select one)</option>
                    <option value="1">freeCodeCamp News</option>
                    <option value="2">freeCodeCamp YouTube Channel</option>
                    <option value="3">freeCodeCamp Forum</option>
                    <option value="4">Other</option>
                </select>
            </label>
            <label for="bio">Provide a bio:
                <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
            </label>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>
styles.css

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
}

h1,
p {
    margin: 1em auto;
    text-align: center;
}

form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0;
    border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
    border-bottom: none;
}

label {
    display: block;
    margin: 0.5rem 0;
}

input,
textarea,
select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
}

input,
textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

input[type="file"] {
    padding: 1px 2px;
}

a {
    color: #dfdfe2
}

  1. 调查表单【认证项目】

仿freeCodeCamp Survey Form，技术不精，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
<body>
    <h1 id="title">freeCodeCamp 调查表</h1>
    <p id="description">感谢您花时间帮助我们改进平台</p>
    <form id="survey-form" action="" method="post">

        <label id="name-label">名字<input id="name" name="name" type="text" placeholder="输入您的名字" required></label>
        <label id="email-label">邮箱<input id="email" name="email" type="email" placeholder="输入您的邮箱" required></label>
        <label id="number-label">年龄<span>（可选）</span><input id="number" name="number" type="number" min="0" max="120" placeholder="年龄"></label>
    
        <label for="dropdown">哪个选项最能描述您当前的角色？
            <select id="dropdown" name="dropdown">
                <option value="" disabled selected>选择当前角色</option>
                <option value="1">学生</option>
                <option value="2">全职工作者</option>
                <option value="3">全日制学习者</option>
                <option value="4">宁愿不说</option>
                <option value="5">其他</option>
            </select>
        </label>
    
        你会向朋友推荐 freeCodeCamp 吗？
        <label for="definitely" class="options">
            <input type="radio" id="definitely" class="inline" name="radio" value="definitely">肯定
        </label>
        <label for="maybe" class="options">
            <input type="radio" id="maybe" class="inline" name="radio" value="maybe">也许
        </label>
        <label for="notsure" class="options">
            <input type="radio" name="radio" id="notsure" class="inline" value="notsure">不确定
        </label>
    
        <label for="dropdown2">您最喜欢 freeCodeCamp 的什么功能？
            <select id="dropdown2" name="dropdown2">
                <option value="" disabled selected>选择一个选项</option>
                <option value="1">挑战</option>
                <option value="2">项目</option>
                <option value="3">社区</option>
                <option value="4">开源</option>
            </select>
        </label>
    
        您希望看到哪些改进？<span>（检查所有适用）</span>
        <label for="checkbox1" class="options"><input type="checkbox" name="checkbox1" id="checkbox1"class="inline" value="options1">前端项目</label>
        <label for="checkbox2" class="options"><input type="checkbox" name="checkbox2" id="checkbox2"class="inline" value="options2">后端项目</label>
        <label for="checkbox3" class="options"><input type="checkbox" name="checkbox3" id="checkbox3"class="inline" value="options3">数据可视化</label>
        <label for="checkbox4" class="options"><input type="checkbox" name="checkbox4" id="checkbox4"class="inline" value="options4">挑战</label>
        <label for="checkbox5" class="options"><input type="checkbox" name="checkbox5" id="checkbox5"class="inline" value="options5">开源社区</label>
        <label for="checkbox6" class="options"><input type="checkbox" name="checkbox6" id="checkbox6"class="inline" value="options6">Gitter 帮助室</label>
        <label for="checkbox7" class="options"><input type="checkbox" name="checkbox7" id="checkbox7"class="inline" value="options7">影片</label>
        <label for="checkbox8" class="options"><input type="checkbox" name="checkbox8" id="checkbox8"class="inline" value="options8">城市聚会</label>
        <label for="checkbox9" class="options"><input type="checkbox" name="checkbox9" id="checkbox9"class="inline" value="options8">维基百科</label>
        <label for="checkbox10" class="options"><input type="checkbox" name="checkbox10" id="checkbox10"class="inline" value="options10">论坛</label>
        <label for="checkbox11" class="options"><input type="checkbox" name="checkbox11" id="checkbox11"class="inline" value="options11">附加课程</label>
        <label for="">有什么意见或建议吗？<textarea name="" id="" rows="10" placeholder="在这里输入您的评论…"></textarea></label>
    
        <input type="submit" id="submit" value="提交">
    
    </form>
</body>
</head>

</html
styles.css

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 18px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

h1,
p {
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

h1 {
    margin: 50px auto 8px;
    font-weight: 400;
}

p {
    font-style: italic;
    font-weight: 100;
}

span {
    font-size: 14px;
    vertical-align: text-top;
}

form {
    width: 720px;
    background-color: rgba(27, 27, 50, 0.8);
    color: #ffffff;
    min-width: 480px;
    margin: 30px auto 0;
    padding: 44px;
    border-radius: 4px;
    box-sizing: border-box;
}

label {
    display: block;
    margin: 20px 0;
    padding: 4px 0;
}

label:first-of-type {
    margin-top: 0;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 8px;
    background: #ffffff;
    font-size: 16px;
    padding-left: 8px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

input,
select {
    height: 38px;
}

select {
    color: #495057;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.inline {
    width: unset;
    margin: 0;
}

.options {
    margin: 0px;
    margin-top: 8px;
    padding: 0;
}

textarea {
    padding-left: 8px;
    padding-top: 10px;
    height: 120px;
    font-family: Century Gothic, "Lucida Grande", "Lucida Sans Unicode";
}

input[type="submit"] {
    background: #37af65;
    color: #ffffff;
    margin-bottom: 20px;
}

  1. 通过创作罗斯科绘画学习CSS盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="frame">
        <div class="canvas">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>

</html>
styles.css

.canvas {
    width: 500px;
    height: 600px;
    background-color: #4d0f00;
    overflow: hidden;
    filter: blur(2px);
}

.frame {
    border: 50px solid black;
    width: 500px;
    padding: 50px;
    margin: 20px auto;
}

.one {
    width: 425px;
    height: 150px;
    background-color: #efb762;
    margin: 20px auto;
    box-shadow: 0 0 3px 3px #efb762;
    border-radius: 9px;
    transform: rotate(-0.6deg);
}

.two {
    width: 475px;
    height: 200px;
    background-color: #8f0401;
    margin: 0 auto 20px;
    box-shadow: 0 0 3px 3px #8f0401;
    border-radius: 8px 10px;
    transform: rotate(0.4deg);
}

.one,
.two {
    filter: blur(1px);
}

.three {
    width: 91%;
    height: 28%;
    background-color: #b20403;
    margin: auto;
    filter: blur(2px);
    box-shadow: 0 0 5px 5px #b20403;
    border-radius: 30px 25px 60px 12px;
    transform: rotate(-0.2deg)
}

  1. 通过创建照片集来学习CSS弹性盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header class="header">
        <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="cat1">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="cat2">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="cat3">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="cat4">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="cat5">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="cat6">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="cat7">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="cat8">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="cat9">
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

body {
    margin: 0;
    font-family: sans-serif;
    background: #f5f6f7;
}

.header {
    text-align: center;
    text-transform: uppercase;
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
}

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
}

.gallery img {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.gallery::after {
    content: "";
    width: 350px;
}

  1. 通过建立营养标签来学习排版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
    <div class="label">
        <header>
            <h1 class="bold">Nutrition Facts</h1>
            <div class="divider"></div>
            <p>8 servings per container</p>
            <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
        </header>
        <div class="divider large"></div>
        <div class="calories-info">
            <div class="left-container">
                <h2 class="bold small-text">Amount per serving</h2>
                <p>Calories</p>
            </div>
            <span>230</span>
        </div>
        <div class="divider medium"></div>
        <div class="daily-value small-text">
            <p class="bold right no-divider">% Daily Value *</p>
            <div class="divider"></div>
            <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
            <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
            <div class="divider"></div>
            <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
            <div class="divider"></div>
            <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
            <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
            <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
            <p class="indent no-divider">Dietary Fiber 4g</p>
            <div class="divider"></div>
            <p class="indent no-divider">Total Sugars 12g</p>
            <div class="divider double-indent"></div>
            <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
            <div class="divider"></div>
            <p class="no-divider"><span class="bold">Protein</span> 3g</p>
            <div class="divider large"></div>
            <p>Vitamin D 2mcg <span>10%</span></p>
            <p>Calcium 260mg <span>20%</span></p>
            <p>Iron 8mg <span>45%</span></p>
            <p class="no-divider">Potassium 235mg <span>6%</span></p>
        </div>
        <div class="divider medium"></div>
        <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
    </div>
</body>

</html>
styles.css

* {
    box-sizing: border-box;
    }

html {
    font-size: 16px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.label {
    border: 2px solid black;
    width: 270px;
    margin: 20px auto;
    padding: 0 7px;
}

header h1 {
    text-align: center;
    margin: -4px 0;
    letter-spacing: 0.15px
}

p {
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.divider {
    border-bottom: 1px solid #888989;
    margin: 2px 0;
}

.bold {
    font-weight: 800;
}

.large {
    height: 10px;
}

.large,
.medium {
    background-color: black;
    border: 0;
}

.medium {
    height: 5px;
}

.small-text {
    font-size: 0.85rem;
}


.calories-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.calories-info h2 {
    margin: 0;
}

.left-container p {
    margin: -5px -2px;
    font-size: 2em;
    font-weight: 700;
}

.calories-info span {
    margin: -7px -2px;
    font-size: 2.4em;
    font-weight: 700;
}

.right {
    justify-content: flex-end;
}

.indent {
    margin-left: 1em;
}

.double-indent {
    margin-left: 2em;
}

.daily-value p:not(.no-divider) {
    border-bottom: 1px solid #888989;
}

.note {
    font-size: 0.6rem;
    margin: 5px 0;
    padding: 0 8px;
    text-indent: -8px;
}

  1. 通过编写小测验学习无障碍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <header>
        <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
        <h1>HTML/CSS Quiz</h1>
        <nav>
            <ul>
                <li><a href="#student-info" accesskey="i">INFO</a></li>
                <li><a href="#html-questions" accesskey="h">HTML</a></li>
                <li><a href="#css-questions" accesskey="c">CSS</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
                <h2 id="student-info">Student Info</h2>
                <div class="info">
                    <label for="student-name">Name:</label>
                    <input type="text" name="student-name" id="student-name" />
                </div>
                <div class="info">
                    <label for="student-email">Email:</label>
                    <input type="email" name="student-email" id="student-email" />
                </div>
                <div class="info">
                    <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                    <input type="date" name="birth-date" id="birth-date" />
                </div>
            </section>
            <section role="region" aria-labelledby="html-questions">
                <h2 id="html-questions">HTML</h2>
                <div class="question-block">
                    <p>1</p>
                    <fieldset class="question" name="html-question-one">
                        <legend>
                            The legend element represents a caption for the content of its
                            parent fieldset element
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q1-a1">
                                    <input type="radio" id="q1-a1" name="q1" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q1-a2">
                                    <input type="radio" id="q1-a2" name="q1" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
                <div class="question-block">
                    <p>2</p>
                    <fieldset class="question" name="html-question-two">
                        <legend>
                            A label element nesting an input element is required to have a
                            for attribute with the same value as the input's id
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q2-a1">
                                    <input type="radio" id="q2-a1" name="q2" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q2-a2">
                                    <input type="radio" id="q2-a2" name="q2" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
            </section>
            <section role="region" aria-labelledby="css-questions">
                <h2 id="css-questions">CSS</h2>
                <div class="formrow">
                    <div class="question-block">
                        <label for="customer">Are you a frontend developer?</label>
                    </div>
                    <div class="answer">
                        <select name="customer" id="customer" required>
                            <option value="">Select an option</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="question-block">
                        <label for="css-questions">Do you have any questions:</label>
                    </div>
                    <div class="answer">
                        <textarea id="css-questions" name="css-questions" rows="5" cols="24"
                            placeholder="Who is flexbox..."></textarea>
                    </div>
                </div>
            </section>
            <button type="submit">Send</button>
        </form>
    </main>
    <footer>
        <address>
            <a href="https://freecodecamp.org">freeCodeCamp</a><br />
            San Francisco<br />
            California<br />
            USA
        </address>
    </footer>
</body>

</html>
styles.css

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}

header {
    width: 100%;
    height: 50px;
    background-color: #1b1b32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

#logo {
    width: max(100px, 18vw);
    background-color: #0a0a23;
    aspect-ratio: 35 / 4;
    padding: 0.4rem;
}

h1 {
    color: #f1be32;
    font-size: min(5vw, 1.2em);
    text-align: center;
}

nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
}

nav>ul>li {
    color: #dfdfe2;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
}

nav>ul>li:hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
}

li>a {
    color: inherit;
    text-decoration: none;
}

main {
    padding-top: 50px;
}

section {
    width: 80%;
    margin: 0 auto 10px auto;
    max-width: 600px;
}

h1,
h2 {
    font-family: Verdana, Tahoma;
}

h2 {
    border-bottom: 4px solid #dfdfe2;
    margin-top: 0px;
    padding-top: 60px;
}

.info {
    padding: 10px 0 0 5px;
}

.formrow {
    margin-top: 30px;
    padding: 0px 15px;
}

input {
    font-size: 16px;
}

.info label,
.info input {
    display: inline-block;
}

.info input {
    width: 50%;
    text-align: left;
}

.info label {
    width: 10%;
    min-width: 55px;
    text-align: right;
}

.question-block {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: 20px;
    padding-top: 5px;
}

p {
    margin-top: 5px;
    padding-left: 15px;
    font-size: 20px;
}

p::before {
    content: "Question #";
}

.question {
    border: none;
    padding-bottom: 0;
}

.answers-list {
    list-style: none;
    padding: 0;
}

button {
    display: block;
    margin: 40px auto;
    width: 40%;
    padding: 15px;
    font-size: 23px;
    background: #d0d0d5;
    border: 3px solid #3b3b4f;
}

footer {
    background-color: #2a2a40;
    display: flex;
    justify-content: center;
}

footer,
footer a {
    color: #dfdfe2;
}

address {
    text-align: center;
    padding: 0.3em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

  1. 致敬页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title id="title">致敬 - 袁隆平</title>
</head>

<body>
    <main id="main">
        <h1>袁隆平院士</h1>
        <p>杂交水稻之父</p>
        <div id="img-div">
            <img src="https://mstatic.gzstv.com/media/images/2021/05/24/SpiYfUIacL8b.jpg" alt="袁隆平" id="image">
            <div id="img-caption">
                袁隆平院士（左二），攻克了制种关，使杂交水稻的研究获得全面成功，为水稻增产开辟了新的途径。
            </div>
        </div>
        <div id="tribute-info">
            <h3 id="headline">袁隆平的生平：</h3>
            <ul>
                <li><strong>1930年</strong> - 袁隆平出生于北京协和医院，是中国杂交水稻育种专家，被誉为“杂交水稻之父”。</li>
                <li><strong>1953年</strong> - 袁隆平毕业于西南农学院，分配到湖南安江农业学校，从事植物遗传育种工作。</li>
                <li><strong>1964年</strong> - 袁隆平开始了杂交水稻的研究，历经九年的努力，成功培育出世界上第一个杂交水稻品种“南优2号”。</li>
                <li><strong>1981年</strong> - 袁隆平获得中国首届国家特等发明奖。</li>
                <li><strong>1995年</strong> - 袁隆平率领团队开发出新型杂交水稻理论和技术，创造了更高的产量和品质。</li>
                <li><strong>1996年</strong> - 袁隆平启动了超级杂交水稻交配计划。</li>
                <li><strong>1999年</strong> - 小行星8117被命名为“袁隆平星”。</li>
                <li><strong>2001年</strong> - 袁隆平获得国家最高科学技术奖和马格萨萨奖 。</li>
                <li><strong>2004年</strong> - 袁隆平获得沃尔夫农业奖和世界粮食奖 。</li>
                <li><strong>2006年</strong> - 袁隆平成为中国农业领域首位美国科学院外籍院士。</li>
                <li><strong>2010年</strong> - 袁隆平获得食の新潟国际奖佐藤藤三郎特別賞。</li>
                <li><strong>2012年</strong> - 袁隆平获得孔子和平奖。</li>
                <li><strong>2019年</strong> - 袁隆平获得共和国勋章。</li>
                <li><strong>2021年</strong> - 袁隆平因多重器官衰竭在长沙逝世，享年91岁。</li>
            </ul>
        </div>
        <blockquote>
            <p>
                “袁隆平院士是中国杂交水稻事业的开创者，是当代神农。50多年来，始终在农业科研第一线辛勤耕耘、不懈探索，为人类运用科技手段战胜饥饿带来绿色的希望和金色的收获。不仅为解决中国人民的温饱和保障国家粮食安全做出了贡献，更为世界和平和社会进步树立了丰碑。”
            </p>
            <cite>——新浪网评</cite>
        </blockquote>
        <h3>如果你有时间，你应该在他的<a href="https://baike.baidu.com/link?url=9pGya5d8kloerQXYYXKTsU5btV-VGSxt6wC2mXUuFzUh5wQmp0Ji_zuc8lhDpEnLUpYddLfyCQdwUh_8q21xvRf2i8BMOTZZnnEo43Pa7-yQXJMhWUxP2mWdVkEkfkJw" id="tribute-link" target="_blank">百度百科条目</a>上阅读更多关于这个伟大的人的信息。</h3>
    </main>
</body>

</html>
styles.css

html {
    font-size: 10px;
}

body {
    text-align: center;
    color: #333;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

@media (max-width: 460px) {
    h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 460px) {
    #main {
        margin: 0;
    }
}

#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}

#img-caption {
    margin: 15px 0 5px 0;
}

#headline {
    margin: 50px 0;
    text-align: center;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
}

li {
    margin: 16px 0;
}

blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
}

a {
    color: #477ca7;
}

a:visited {
    color: #74638f;
    ;
}

  1. 通过构建资产负债表了解有关CSS伪类选择器的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <main>
        <section>
            <h1>
                <span class="flex">
                    <span>AcmeWidgetCorp</span>
                    <span>Balance Sheet</span>
                </span>
            </h1>
            <div id="years" aria-hidden="true">
                <span class="year">2019</span>
                <span class="year">2020</span>
                <span class="year">2021</span>
            </div>
            <div class="table-wrap">
                <table>
                    <caption>Assets</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only year">2019</span></th>
                            <th><span class="sr-only year">2020</span></th>
                            <th class="current"><span class="sr-only year">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
                            <td>$25</td>
                            <td>$30</td>
                            <td class="current">$28</td>
                        </tr>
                        <tr class="data">
                            <th>Checking <span class="description">Our primary transactional account.</span></th>
                            <td>$54</td>
                            <td>$56</td>
                            <td class="current">$53</td>
                        </tr>
                        <tr class="data">
                            <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
                            <td>$500</td>
                            <td>$650</td>
                            <td class="current">$728</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Assets</span></th>
                            <td>$579</td>
                            <td>$736</td>
                            <td class="current">$809</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Liabilities</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="data">
                            <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
                            <td>$500</td>
                            <td>$250</td>
                            <td class="current">$0</td>
                        </tr>
                        <tr class="data">
                            <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span>
                            </th>
                            <td>$200</td>
                            <td>$300</td>
                            <td class="current">$400</td>
                        </tr>
                        <tr class="data">
                            <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
                            <td>$50</td>
                            <td>$50</td>
                            <td class="current">$75</td>
                        </tr>
                        <tr class="total">
                            <th>Total <span class="sr-only">Liabilities</span></th>
                            <td>$750</td>
                            <td>$600</td>
                            <td class="current">$475</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <caption>Net Worth</caption>
                    <thead>
                        <tr>
                            <td></td>
                            <th><span class="sr-only">2019</span></th>
                            <th><span class="sr-only">2020</span></th>
                            <th><span class="sr-only">2021</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="total">
                            <th>Total <span class="sr-only">Net Worth</span></th>
                            <td>$-171</td>
                            <td>$136</td>
                            <td class="current">$334</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</body>

</html>
styles.css

span[class~="sr-only"] {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
}

html {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #0a0a23;
}

h1 {
    max-width: 37.25rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

h1 .flex {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

h1 .flex span:first-of-type {
    font-size: 0.7em;
}

h1 .flex span:last-of-type {
    font-size: 1.2em;
}

section {
    max-width: 40rem;
    margin: 0 auto;
    border: 2px solid #d0d0d5;
}

#years {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    z-index: 999;
    top: 0;
    background: #0a0a23;
    color: #fff;
    padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
    margin: 0 -2px;
}

#years span[class] {
    font-weight: bold;
    width: 4.5rem;
    text-align: right;
}

.table-wrap {
    padding: 0 0.75rem 1.5rem 0.75rem;
}

table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
    position: relative;
    margin-top: 3rem;
}

table caption {
    color: #356eaf;
    font-size: 1.3em;
    font-weight: normal;
    position: absolute;
    top: -2.25rem;
    left: 0.5rem;
}

tbody td {
    width: 100vw;
    min-width: 4rem;
    max-width: 4rem;
}

tbody th {
    width: calc(100% - 12rem);
}

tr[class="total"] {
    border-bottom: 4px double #0a0a23;
    font-weight: bold;
}

tr[class="total"] th {
    text-align: left;
    padding: 0.5rem 0 0.25rem 0.5rem;
}

tr.total td {
    text-align: right;
    padding: 0 0.25rem;
}

tr.total td:nth-of-type(3) {
    padding-right: 0.5rem;
}

tr.total:hover {
    background-color: #99c9ff;
}

td.current {
    font-style: italic;
}

tr.data {
    background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
    text-align: left;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
}

tr.data th .description {
    display: block;
    font-weight: normal;
    font-style: italic;
    padding: 1rem 0 0.75rem;
    margin-right: -13.5rem;
}

tr.data td {
    vertical-align: top;
    padding: 0.3rem 0.25rem 0;
    text-align: right;
}

tr.data td:last-of-type {
    padding: 0.5rem;
}

  1. 创建一副毕加索绘画来学习中级CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>
    <div id="back-wall"></div>
    <div class="characters">
        <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
        </div>
        <div id="black-character">
            <div id="black-hat"></div>
            <div id="gray-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="white-paper">
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
                <i class="fas fa-music"></i>
            </div>
        </div>
        <div class="blue" id="blue-left"></div>
        <div class="blue" id="blue-right"></div>
        <div id="orange-character">
            <div id="black-round-hat"></div>
            <div id="eyes-div">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="triangles">
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
                <div class="triangle"></div>
            </div>
            <div id="guitar">
                <div class="guitar" id="guitar-left">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="guitar" id="guitar-right">
                    <i class="fas fa-bars"></i>
                </div>
                <div id="guitar-neck"></div>
            </div>
        </div>
    </div>
</body>

</html>
styles.css

body {
    background-color: rgb(184, 132, 46);
}

#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

#white-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 140px 180px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: GhostWhite;
    border-left-color: transparent;
    position: absolute;
    top: -140px;
    left: 0;
}

#black-mask {
    width: 100%;
    height: 50px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#gray-instrument {
    width: 15%;
    height: 40%;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: 50px;
    left: 125px;
    z-index: 1;
}

.black-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 65%;
}

#tan-table {
    width: 450px;
    height: 140px;
    background-color: #D2691E;
    position: absolute;
    top: 275px;
    left: 15px;
    z-index: 1;
}

#black-character {
    width: 300px;
    height: 500px;
    background-color: rgb(45, 31, 19);
    position: absolute;
    top: 30%;
    left: 59%;
}

#black-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 300px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: rgb(45, 31, 19);
    position: absolute;
    top: -150px;
    left: 0;
}

#gray-mask {
    width: 150px;
    height: 150px;
    background-color: rgb(167, 162, 117);
    position: absolute;
    top: -10px;
    left: 70px;
}

#white-paper {
    width: 400px;
    height: 100px;
    background-color: GhostWhite;
    position: absolute;
    top: 250px;
    left: -150px;
    z-index: 1;
}

.fa-music {
    display: inline-block;
    margin-top: 8%;
    margin-left: 13%;
}

.blue {
    background-color: #1E90FF;
}

#blue-left {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 20%;
    left: 20%;
}

#blue-right {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 40%;
}

#orange-character {
    width: 250px;
    height: 550px;
    background-color: rgb(240, 78, 42);
    position: absolute;
    top: 25%;
    left: 40%;
}

#black-round-hat {
    width: 180px;
    height: 150px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: -1;
}

#eyes-div {
    width: 180px;
    height: 50px;
    position: absolute;
    top: -40px;
    left: 20px;
    z-index: 3;
}

#triangles {
    width: 250px;
    height: 550px;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 42px 45px 45px 0;
    border-top-color: transparent;
    border-right-color: Gold;
    /* yellow */
    border-bottom-color: transparent;
    border-left-color: transparent;
    display: inline-block;
}

#guitar {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 120px;
    left: 0px;
    z-index: 3;
}

.guitar {
    width: 150px;
    height: 120px;
    background-color: Goldenrod;
    border-radius: 50%;
}

#guitar-left {
    position: absolute;
    left: 0px;
}

#guitar-right {
    position: absolute;
    left: 100px;
}

.fa-bars {
    display: block;
    margin-top: 30%;
    margin-left: 40%;
}

#guitar-neck {
    width: 200px;
    height: 30px;
    background-color: #D2691E;
    position: absolute;
    top: 45px;
    left: 200px;
    z-index: 3;
}

.eyes {
    width: 35px;
    height: 20px;
    background-color: #8B4513;
    border-radius: 20px 50%;
}

.right {
    position: absolute;
    top: 15px;
    right: 30px;
}

.left {
    position: absolute;
    top: 15px;
    left: 30px;
}

.fas {
    font-size: 30px;
}

  1. 通过创建一架钢琴来学习响应式网页设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div id="piano">
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
            alt="freeCodeCamp Logo" />
        <div class="keys">
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
    
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
        </div>
    </div>
</body>

</html>
styles.css

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

#piano {
    background-color: #00471b;
    width: 992px;
    height: 290px;
    margin: 80px auto;
    padding: 90px 20px 0 20px;
    position: relative;
    border-radius: 10px;
}

.keys {
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

.key {
    background-color: #ffffff;
    position: relative;
    width: 41px;
    height: 175px;
    margin: 2px;
    float: left;
    border-radius: 0 0 3px 3px;
}

.key.black--key::after {
    background-color: #1d1e22;
    content: "";
    position: absolute;
    left: -18px;
    width: 32px;
    height: 100px;
    border-radius: 0 0 3px 3px;
}

.logo {
    width: 200px;
    position: absolute;
    top: 23px;
}

@media (max-width: 768px) {
    #piano {
        width: 358px;
    }

    .keys {
        width: 318px;
    }
    
    .logo {
        width: 150px;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    #piano {
        width: 675px;
    }

    .keys {
        width: 633px;
    }
}

  1. 技术文档页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav id="navbar">
        <header>JS文档</header>
        <ul>
            <li><a class="nav-link" href="#Introduction">项目介绍</a></li>
            <li>
                <a class="nav-link" href="#What_you_should_already_know">你应该已经知道的</a>
            </li>
            <li>
                <a class="nav-link" href="#JavaScript_and_Java">JavaScript和Java</a>
            </li>
            <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
            <li><a class="nav-link" href="#Variables">变量</a></li>
            <li>
                <a class="nav-link" href="#Declaring_variables">声明变量</a>
            </li>
            <li><a class="nav-link" href="#Variable_scope">变量范围</a></li>
            <li>
                <a class="nav-link" href="#Global_variables">全局变量</a>
            </li>
            <li><a class="nav-link" href="#Constants">常数</a></li>
            <li><a class="nav-link" href="#Data_types">数据类型</a></li>
            <li>
                <a class="nav-link" href="#if...else_statement">if...else语句</a>
            </li>
            <li><a class="nav-link" href="#while_statement">while语句</a></li>
            <li>
                <a class="nav-link" href="#Function_declarations">函数声明</a>
            </li>
            <li><a class="nav-link" href="#Reference">参考文献</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>项目介绍</header>
            <article>
                <p>
                    JavaScript是一种跨平台、面向对象的脚本语言。它是一种小型和轻量级的语言。在主机环境（例如，Web浏览器）中，JavaScript可以连接到其环境的对象，以提供对它们的编程控制。
                </p>

                <p>
                    JavaScript包含一个标准的对象库，如Array、Date和Math，以及一组核心语言元素，如运算符、控制结构和语句。核心JavaScript可以通过补充额外的对象来扩展各种用途;例如：
                </p>
                <ul>
                    <li>
                        客户端JavaScript通过提供对象来控制浏览器及其文档对象模型（DOM），从而扩展了核心语言。例如，客户端扩展允许应用程序在HTML表单上放置元素，并响应用户事件，如鼠标单击、表单输入和页面导航。
                    </li>
                    <li>
                        服务器端JavaScript通过提供与在服务器上运行JavaScript相关的对象来扩展核心语言。例如，服务器端扩展允许应用程序与数据库通信，提供从应用程序的一个调用到另一个调用的信息的连续性，或者在服务器上执行文件操作。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="What_you_should_already_know">
            <header>你应该已经知道的</header>
            <article>
                <p>本指南假设您具备以下基本背景：</p>
    
                <ul>
                    <li>
                        对互联网和万维网（WWW）有一般的了解。
                    </li>
                    <li>
                        良好的超文本标记语言（HTML）工作知识。
                    </li>
                    <li>
                        有编程经验。如果您是编程新手，请尝试主页上链接的有关JavaScript的教程之一。
                    </li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="JavaScript_and_Java">
            <header>JavaScript和Java</header>
            <article>
                <p>
                    JavaScript和Java在某些方面是相似的，但在其他方面有根本的不同。JavaScript语言类似于Java，但没有Java的静态类型和强类型检查。JavaScript遵循大多数Java表达式语法，命名约定和基本控制流结构，这就是它从LiveScript重命名为JavaScript的原因。
                </p>
    
                <p>
                    与Java通过声明构建的类的编译时系统相反，JavaScript支持基于少量表示数值、布尔值和字符串值的数据类型的运行时系统。JavaScript具有基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的模型提供动态继承;也就是说，对于各个对象，继承的内容可能不同。JavaScript还支持没有任何特殊声明性要求的函数。函数可以是对象的属性，作为松散类型的方法执行。
                </p>
                <p>
                    与Java相比，JavaScript是一种非常自由的语言。您不必声明所有的变量、类和方法。您不必关心方法是公共的、私有的还是受保护的，也不必实现接口。变量、参数和函数返回类型不是显式类型化的。
                </p>
            </article>
        </section>
        <section class="main-section" id="Hello_world">
            <header>Hello world</header>
            <article>
                要开始编写JavaScript，请打开Scratchpad并编写第一个“Hello world”JavaScript代码：
                <code>
                    function greetMe(yourName) &#123; alert("Hello " + yourName); &#125;
                    greetMe("World");
                </code>
                选择代码板中的代码，然后按Ctrl+R以观看它在浏览器中展开！
            </article>
        </section>
        <section class="main-section" id="Variables">
            <header>变量</header>
            <p>
                在应用程序中，变量用作值的符号名称。变量的名字，称为标识符，符合一定的规则。
            </p>
            <p>
                JavaScript标识符必须以字母、下划线（_）或美元符号（$）开头;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。
            </p>
            <p>
                您可以在标识符中使用ISO 8859-1或Unicode字母，例如å和ü。您还可以使用Unicode转义序列作为标识符中的字符。法律的名称的一些示例包括Number_hits、temp 99和_name。
            </p>
        </section>
        <section class="main-section" id="Declaring_variables">
            <header>声明变量</header>
            <article>
                你可以用三种方式声明一个变量：
                <p>
                    使用关键字var。例如，
                    <code>var x = 42.</code>
                    此语法可用于声明局部和全局变量。
                </p>
                <p>
                    只要给它赋值。例如，
                    <code>x = 42.</code>
                    This总是声明一个全局变量。它会生成严格的JavaScript警告。你不应该使用这个变量。
                </p>
                <p>
                    使用关键字let。例如，
                    <code> let y = 13.</code>
                    此语法可用于声明块范围局部变量。参见下面的变量范围。
                </p>
            </article>
        </section>
        <section class="main-section" id="Variable_scope">
            <header>变量范围</header>
            <article>
                <p>
                    当在任何函数之外声明变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。当你在一个函数中声明一个变量时，它被称为局部变量，因为它只能在该函数中使用。
                </p>
    
                <p>
                    ECMAScript
                    2015之前的JavaScript没有block语句作用域;相反，在块中声明的变量对于块驻留在其中的函数（或全局范围）是本地的。例如，下面的代码将记录5，因为x的作用域是声明x的函数（或全局上下文），而不是块，在这种情况下是if语句。
                </p>
                <code>if (true) &#123; var x = 5; &#125; console.log(x); // 5</code>
                <p>
                    当使用ECMAScript 2015中引入的let声明时，这种行为会发生变化。
                </p>
    
                <code>if (true) &#123; let y = 5; &#125; console.log(y); // ReferenceError: y isnot defined</code>
            </article>
        </section>
        <section class="main-section" id="Global_variables">
            <header>全局变量</header>
            <article>
                <p>
                    全局变量实际上是全局对象的属性。在web页面中，全局对象是window，因此您可以使用window.variable语法设置和访问全局变量。
                </p>
    
                <p>
                    因此，通过指定窗口或框架名称，可以从另一个窗口或框架访问在一个窗口或框架中声明的全局变量。例如，如果在文档中声明了一个名为phoneNumber的变量，则可以从iframe中引用此变量作为parent.phoneNumber。
                </p>
            </article>
        </section>
        <section class="main-section" id="Constants">
            <header>常量</header>
            <article>
                <p>
                    您可以使用const关键字创建一个只读的命名常量。常量标识符的语法与变量标识符的语法相同：它必须以字母、下划线或美元符号开头，并且可以包含字母、数字或下划线字符。
                </p>
    
                <code>const PI = 3.14;</code>
                <p>
                    常量不能通过赋值来更改值，也不能在脚本运行时重新声明。它必须初始化为一个值。
                </p>
    
                <p>
                    常量的作用域规则与let块作用域变量的作用域规则相同。如果省略const关键字，则假定标识符表示变量。
                </p>
    
                <p>
                    不能声明与同一作用域中的函数或变量同名的常量。例如：
                </p>
    
                <code>
                    // THIS WILL CAUSE AN ERROR function f() &#123;&#125;; const f = 5; 
                    // THISWILL CAUSE AN ERROR ALSO function f() &#123; const g = 5; var g;
                    //statements &#125;
                </code>
                但是，对象属性不受保护，因此执行以下语句没有问题。
                <code>
                    const MY_OBJECT = &#123;"key": "value"&#125;; 
                    MY_OBJECT.key ="otherValue";
                </code>
            </article>
        </section>
        <section class="main-section" id="Data_types">
            <header>数据类型</header>
            <article>
                <p>最新的ECMAScript标准定义了七种数据类型：</p>
                <ul>
                    <li>
                        <p>作为基元的六种数据类型：</p>
                        <ul>
                            <li>Boolean. true与false.</li>
                            <li>
                                null. 表示空值的特殊关键字。因为JavaScript是区分大小写的，所以null与Null、NULL或任何其他变体都不相同。
                            </li>
                            <li>
                                undefined. 其值未定义的顶级属性。
                            </li>
                            <li>Number. 42或3.14159.</li>
                            <li>String. "你好"</li>
                            <li>
                                Symbol（ECMAScript 2015中新增）。一种数据类型，其实例是唯一的且不可变的。
                            </li>
                        </ul>
                    </li>
    
                    <li>对象</li>
                </ul>
                虽然这些数据类型的数量相对较小，但它们使您能够在应用程序中执行有用的功能。对象和函数是语言中的其他基本元素。您可以将对象视为值的命名容器，将函数视为应用程序可以执行的过程。
            </article>
        </section>
        <section class="main-section" id="if...else_statement">
            <header>if...else语句</header>
            <article>
                如果逻辑条件为真，则使用if语句执行语句。如果条件为false，则使用可选的else子句执行语句。if语句如下所示：
    
                <code>if (condition) &#123; statement_1; &#125; else &#123; statement_2; &#125;</code>
                condition可以是任何计算结果为true或false的表达式。有关计算结果为true和false的解释，请参见Boolean。如果condition的计算结果为true，则执行statement_1;否则，执行statement_2。statement_1和statement_2可以是任何语句，包括进一步嵌套的if语句。
                <p>
                    您还可以使用else if复合语句，以便按顺序测试多个条件，如下所示：
                </p>
                <code>
                    if (condition_1) &#123; statement_1; &#125; 
                    else if (condition_2) &#123;statement_2; &#125; 
                    else if (condition_n) &#123; statement_n; &#125; 
                    else &#123;statement_last; &#125;
                </code>
                在多个条件的情况下，仅执行第一个评估为真的逻辑条件。若要执行多个语句，请将它们分组在一个块语句（{... }）。一般来说，最好总是使用块语句，特别是在嵌套if语句时：
    
                <code>
                    if (condition) &#123; statement_1_runs_if_condition_is_true;
                    statement_2_runs_if_condition_is_true; &#125; else &#123;
                    statement_3_runs_if_condition_is_false;
                    statement_4_runs_if_condition_is_false; &#125;
                </code>
                建议不要在条件表达式中使用简单的赋值，因为在浏览代码时，赋值可能会与相等混淆。例如，不要使用以下代码：
                <code>if (x = y) &#123; /* statements here */ &#125;</code>
                如果你需要在条件表达式中使用赋值，一个常见的做法是在赋值周围加上额外的括号。例如：
                <code>if ((x = y)) &#123; /* statements here */ &#125;</code>
            </article>
        </section>
        <section class="main-section" id="while_statement">
            <header>while语句</header>
            <article>
                只要指定的条件计算为true，while语句就会执行其语句。while语句如下所示：
    
                <code>while (condition) statement</code>
                如果条件变为false，则循环内的语句停止执行，控制传递到循环后的语句。
    
                <p>
                    条件测试发生在执行循环中的语句之前。如果条件返回true，则执行语句并再次测试条件。如果条件返回false，则停止执行，并将控制传递给while后面的语句。
                </p>
    
                <p>
                    要执行多个语句，请使用块语句（{... }）对这些语句进行分组。
                </p>
    
                示例：
    
                <p>
                    下面的while循环只要n小于3就会迭代：
                </p>
    
                <code>var n = 0; var x = 0; while (n &lt; 3) &#123; n++; x += n; &#125;</code>
                <p>
                    在每次迭代中，循环递增n并将该值添加到x。因此，x和n取以下值：
                </p>
    
                <ul>
                    <li>第一遍之后：n = 1且x = 1</li>
                    <li>第二遍之后：n = 2和x = 3</li>
                    <li>第三遍之后：n = 3和x = 6</li>
                </ul>
                <p>
                    在完成第三遍之后，条件n < 3不再为真，因此循环终止。 </p>
            </article>
        </section>
        <section class="main-section" id="Function_declarations">
            <header>函数声明</header>
            <article>
                函数定义（也称为函数声明或函数语句）由function关键字组成，后跟：
    
                <ul>
                    <li>函数的名称。</li>
                    <li>
                        函数的参数列表，用圆括号括起来并用逗号分隔。
                    </li>
                    <li>
                        定义函数的JavaScript语句，用大括号{ }括起来。
                    </li>
                </ul>
                <p>
                    例如，下面的代码定义了一个名为square的简单函数：
                </p>
    
                <code>function square(number) &#123; return number * number; &#125;</code>
                <p>
                    函数square有一个参数，叫做number。该函数由一条语句组成，该语句表示返回函数的参数（即number）乘以自身。return语句指定函数返回的值。
                </p>
                <code>return number * number;</code>
                <p>
                    原始参数（如数字）通过值传递给函数;该值被传递给函数，但如果函数更改了参数的值，则该更改不会全局反映或反映在调用函数中。
                </p>
            </article>
        </section>
        <section class="main-section" id="Reference">
            <header>参考文献</header>
            <article>
                <ul>
                    <li>
                        本页中的所有文档均来自
                        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
                    </li>
                </ul>
            </article>
        </section>
    </main>
</body>

</html>
styles.css

html,
body {
    min-width: 290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
}

#navbar {
    position: fixed;
    min-width: 290px;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}

header {
    color: black;
    margin: 10px;
    text-align: center;
    font-size: 1.8em;
    font-weight: thin;
}

#main-doc header {
    text-align: left;
    margin: 0px;
}

#navbar ul {
    height: 88%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#navbar li {
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
}

#navbar a {
    display: block;
    padding: 10px 30px;
    color: #4d4e53;
    text-decoration: none;
    cursor: pointer;
}

#main-doc {
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
}

section article {
    color: #4d4e53;
    margin: 15px;
    font-size: 0.96em;
}

section li {
    margin: 15px 0px 0px 20px;
}

code {
    display: block;
    text-align: left;
    white-space: pre-line;
    position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 815px) {

    /* For mobile phones: */
    #navbar ul {
        border: 1px solid;
        height: 207px;
    }
    
    #navbar {
        background-color: white;
        position: absolute;
        top: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        max-height: 275px;
        border: none;
        z-index: 1;
        border-bottom: 2px solid;
    }
    
    #main-doc {
        position: relative;
        margin-left: 0px;
        margin-top: 270px;
    }
}

@media only screen and (max-width: 400px) {
    #main-doc {
        margin-left: -10px;
    }

    code {
        margin-left: -20px;
        width: 100%;
        padding: 15px;
        padding-left: 10px;
        padding-right: 45px;
        min-width: 233px;
    }
}

  1. 通过建立城市轮廓学习CSS变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="background-buildings sky">
        <div></div>
        <div></div>
        <div class="bb1 building-wrap">
            <div class="bb1a bb1-window"></div>
            <div class="bb1b bb1-window"></div>
            <div class="bb1c bb1-window"></div>
            <div class="bb1d"></div>
        </div>
        <div class="bb2">
            <div class="bb2a"></div>
            <div class="bb2b"></div>
        </div>
        <div class="bb3"></div>
        <div></div>
        <div class="bb4 building-wrap">
            <div class="bb4a"></div>
            <div class="bb4b"></div>
            <div class="bb4c window-wrap">
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
                <div class="bb4-window"></div>
            </div>
        </div>
        <div></div>
        <div></div>
    </div>

    <div class="foreground-buildings">
        <div></div>
        <div></div>
        <div class="fb1 building-wrap">
            <div class="fb1a"></div>
            <div class="fb1b"></div>
            <div class="fb1c"></div>
        </div>
        <div class="fb2">
            <div class="fb2a"></div>
            <div class="fb2b window-wrap">
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
                <div class="fb2-window"></div>
            </div>
        </div>
        <div></div>
        <div class="fb3 building-wrap">
            <div class="fb3a window-wrap">
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
                <div class="fb3-window"></div>
            </div>
            <div class="fb3b"></div>
            <div class="fb3a"></div>
            <div class="fb3b"></div>
        </div>
        <div class="fb4">
            <div class="fb4a"></div>
            <div class="fb4b">
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
                <div class="fb4-window"></div>
            </div>
        </div>
        <div class="fb5"></div>
        <div class="fb6"></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>
styles.css

:root {
    --building-color1: #aa80ff;
    --building-color2: #66cc99;
    --building-color3: #cc6699;
    --building-color4: #538cc6;
    --window-color1: #bb99ff;
    --window-color2: #8cd9b3;
    --window-color3: #d98cb3;
    --window-color4: #8cb3d9;
}

* {
    box-sizing: border-box;
    }

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.background-buildings,
.foreground-buildings {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
}

.building-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.window-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sky {
    background: radial-gradient(closest-corner circle at 15% 15%,
            #ffcf33,
            #ffcf33 20%,
            #ffff66 21%,
            #bbeeff 100%);
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
    width: 10%;
    height: 70%;
}

.bb1a {
    width: 70%;
}

.bb1b {
    width: 80%;
}

.bb1c {
    width: 90%;
}

.bb1d {
    width: 100%;
    height: 70%;
    background: linear-gradient(var(--building-color1) 50%,
            var(--window-color1));
}

.bb1-window {
    height: 10%;
    background: linear-gradient(var(--building-color1),
            var(--window-color1));
}

.bb2 {
    width: 10%;
    height: 50%;
}

.bb2a {
    border-bottom: 5vh solid var(--building-color2);
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
}

.bb2b {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 6%,
            var(--window-color2) 6%,
            var(--window-color2) 9%);
}

.bb3 {
    width: 10%;
    height: 55%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3),
            var(--window-color3) 15%);
}

.bb4 {
    width: 11%;
    height: 58%;
}

.bb4a {
    width: 3%;
    height: 10%;
    background-color: var(--building-color4);
}

.bb4b {
    width: 80%;
    height: 5%;
    background-color: var(--building-color4);
}

.bb4c {
    width: 100%;
    height: 85%;
    background-color: var(--building-color4);
}

.bb4-window {
    width: 18%;
    height: 90%;
    background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
    width: 10%;
    height: 60%;
}

.fb1a {
    border-bottom: 7vh solid var(--building-color4);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
}

.fb1b {
    width: 60%;
    height: 10%;
    background-color: var(--building-color4);
}

.fb1c {
    width: 100%;
    height: 80%;
    background: repeating-linear-gradient(90deg,
            var(--building-color4),
            var(--building-color4) 10%,
            transparent 10%,
            transparent 15%),
        repeating-linear-gradient(var(--building-color4),
            var(--building-color4) 10%,
            var(--window-color4) 10%,
            var(--window-color4) 90%);
}

.fb2 {
    width: 10%;
    height: 40%;
}

.fb2a {
    width: 100%;
    border-bottom: 10vh solid var(--building-color3);
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
}

.fb2b {
    width: 100%;
    height: 75%;
    background-color: var(--building-color3);
}

.fb2-window {
    width: 22%;
    height: 100%;
    background-color: var(--window-color3);
}

.fb3 {
    width: 10%;
    height: 35%;
}

.fb3a {
    width: 80%;
    height: 15%;
    background-color: var(--building-color1);
}

.fb3b {
    width: 100%;
    height: 35%;
    background-color: var(--building-color1);
}

.fb3-window {
    width: 25%;
    height: 80%;
    background-color: var(--window-color1);
}

.fb4 {
    width: 8%;
    height: 45%;
    position: relative;
    left: 10%;
}

.fb4a {
    border-top: 5vh solid transparent;
    border-left: 8vw solid var(--building-color1);
}

.fb4b {
    width: 100%;
    height: 89%;
    background-color: var(--building-color1);
    display: flex;
    flex-wrap: wrap;
}

.fb4-window {
    width: 30%;
    height: 10%;
    border-radius: 50%;
    background-color: var(--window-color1);
    margin: 10%;
}

.fb5 {
    width: 10%;
    height: 33%;
    position: relative;
    right: 10%;
    background: repeating-linear-gradient(var(--building-color2),
            var(--building-color2) 5%,
            transparent 5%,
            transparent 10%),
        repeating-linear-gradient(90deg,
            var(--building-color2),
            var(--building-color2) 12%,
            var(--window-color2) 12%,
            var(--window-color2) 44%);
}

.fb6 {
    width: 9%;
    height: 38%;
    background: repeating-linear-gradient(90deg,
            var(--building-color3),
            var(--building-color3) 10%,
            transparent 10%,
            transparent 30%),
        repeating-linear-gradient(var(--building-color3),
            var(--building-color3) 10%,
            var(--window-color3) 10%,
            var(--window-color3) 30%);
}

@media (max-width: 1000px) {
    :root {
        --building-color1: #000;
        --building-color2: #000;
        --building-color3: #000;
        --building-color4: #000;
        --window-color1: #777;
        --window-color2: #777;
        --window-color3: #777;
        --window-color4: #777;
    }

    .sky {
        background: radial-gradient(closest-corner circle at 15% 15%,
                #ccc,
                #ccc 20%,
                #445 21%,
                #223 100%);
    }
}

  1. 通过创建杂志学习CSS网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <main>
        <section class="heading">
            <header class="hero">
                <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
                    alt="freecodecamp logo" loading="lazy" class="hero-img" />
                <h1 class="hero-title">OUR NEW CURRICULUM</h1>
                <p class="hero-subtitle">
                    Our efforts to restructure our curriculum with a more project-based focus
                </p>
            </header>
            <div class="author">
                <p class="author-name">
                    By
                    <a href="https://freecodecamp.org" target="_blank" rel="noreferrer">freeCodeCamp</a>
                </p>
                <p class="publish-date">March 7, 2019</p>
            </div>
            <div class="social-icons">
                <a href="https://www.facebook.com/freecodecamp/">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://twitter.com/freecodecamp/">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://instagram.com/freecodecamp">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/school/free-code-camp/">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://www.youtube.com/freecodecamp">
                    <i class="fab fa-youtube"></i>
                </a>
            </div>
        </section>
        <section class="text">
            <p class="first-paragraph">
                Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding
                challenges, you'll learn through building projects - step by step. Before we get into the details, let
                me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5
                required projects. We are only changing the optional coding challenges.
            </p>
            <p>
                After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on
                the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This
                is what makes time travel possible: the flux capacitor!
            </p>
            <p>
                It wasn't as dramatic as Doc's revelation in Back to the Future. It
                just occurred to me while I was going for a run. The revelation: the entire curriculum should be a
                series of projects. Instead of individual coding challenges, we'll just have projects, each with their
                own seamless series of tests. Each test gives you just enough information to figure out how to get it to
                pass. (And you can view hints if that isn't enough.)
            </p>
            <blockquote>
                <hr />
                <p class="quote">
                    The entire curriculum should be a series of projects
                </p>
                <hr />
            </blockquote>
            <p>
                No more walls of explanatory text. No more walls of tests. Just one
                test at a time, as you build up a working project. Over the course of passing thousands of tests, you
                build up projects and your own understanding of coding fundamentals. There is no transition between
                lessons and projects, because the lessons themselves are baked into projects. And there's plenty of
                repetition to help you retain everything because - hey - building projects in real life has plenty of
                repetition.
            </p>
            <p>
                The main design challenge is taking what is currently paragraphs of explanation and instructions and
                packing them into a single test description text. Each project will involve dozens of tests like this.
                People will be coding the entire time, rather than switching back and forth from "reading mode" to
                "coding mode".
            </p>
            <p>
                Instead of a series of coding challenges, people will be in their code editor passing one test after
                another, quickly building up a project. People will get into a real flow state, similar to what they
                experience when they build the required projects at the end of each certification. They'll get that
                sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
            </p>
        </section>
        <section class="text text-with-images">
            <article class="brief-history">
                <h3 class="list-title">A Brief History</h3>
                <p>Of the Curriculum</p>
                <ul class="lists">
                    <li>
                        <h4 class="list-subtitle">V1 - 2014</h4>
                        <p>
                            We launched freeCodeCamp with a simple list of 15 resources,
                            including Harvard's CS50 and Stanford's Database Class.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V2 - 2015</h4>
                        <p>We added interactive algorithm challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V3 - 2015</h4>
                        <p>
                            We added our own HTML+CSS challenges (before we'd been relying on
                            General Assembly's Dash course for these).
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V4 - 2016</h4>
                        <p>
                            We expanded the curriculum to 3 certifications, including Front
                            End, Back End, and Data Visualization. They each had 10 required
                            projects, but only the Front End section had its own challenges.
                            For the other certs, we were still using external resources like
                            Node School.
                        </p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V5 - 2017</h4>
                        <p>We added the back end and data visualization challenges.</p>
                    </li>
                    <li>
                        <h4 class="list-subtitle">V6 - 2018</h4>
                        <p>
                            We launched 6 new certifications to replace our old ones. This was
                            the biggest curriculum improvement to date.
                        </p>
                    </li>
                </ul>
            </article>
            <aside class="image-wrapper">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
                    alt="image of the quote machine project" loading="lazy" class="image-1" width="600" height="400" />
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
                    alt="image of a calculator project" loading="lazy" class="image-2" width="400" height="400" />
                <blockquote class="image-quote">
                    <hr />
                    <p class="quote">
                        The millions of people who are learning to code through freeCodeCamp
                        will have an even better resource to help them learn these
                        fundamentals.
                    </p>
                    <hr />
                </blockquote>
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
                    alt="four people working on code" loading="lazy" class="image-3" width="600" height="400" />
            </aside>
        </section>
    </main>
</body>

</html>
styles.css

*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Baskervville', serif;
    color: linen;
    background-color: rgb(20, 30, 40);
}

h1 {
    font-family: 'Anton', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
}

a {
    text-decoration: none;
    color: linen;
}

main {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem;
}

img {
    width: 100%;
    object-fit: cover;
}

hr {
    margin: 1.5rem 0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}

.heading {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
}

.text {
    grid-column: 2 / 3;
    font-size: 1.8rem;
    letter-spacing: 0.6px;
    column-width: 25rem;
    text-align: justify;
}

.hero {
    grid-column: 1 / -1;
    position: relative;
}

.hero-title {
    text-align: center;
    color: orangered;
    font-size: 8rem;
}

.hero-subtitle {
    font-size: 2.4rem;
    color: orangered;
    text-align: center;
}

.author {
    font-size: 2rem;
    font-family: "Raleway", sans-serif;
}

.author-name a:hover {
    background-color: #306203;
}

.publish-date {
    color: rgba(255, 255, 255, 0.5);
}

.social-icons {
    display: grid;
    font-size: 3rem;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

.first-paragraph::first-letter {
    font-size: 6rem;
    color: orangered;
    float: left;
    margin-right: 1rem;
}

.quote {
    color: #00beef;
    font-size: 2.4rem;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

.quote::before {
    content: '" ';
}

.quote::after {
    content: ' "';
}

.text-with-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
    margin-bottom: 3rem;
}

.lists {
    list-style-type: none;
    margin-top: 2rem;
}

.lists li {
    margin-bottom: 1.5rem;
}

.list-title,
.list-subtitle {
    color: #00beef;
}

.image-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, min-content);
    gap: 2rem;
    place-items: center;
}

.image-1,
.image-3 {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
    .image-wrapper {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .text-with-images {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .hero-title {
        font-size: 6rem;
    }

    .hero-subtitle,
    .author,
    .quote,
    .list-title {
        font-size: 1.8rem;
    }
    
    .social-icons {
        font-size: 2rem;
    }
    
    .text {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 420px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

  1. 产品登录页【认证项目】

1
2
index.html
styles.css

  1. 通过构建摩天轮学习CSS动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="wheel">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>

        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
        <div class="cabin"></div>
    </div>
</body>

</html>
styles.css

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 50px;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
    transform: rotate(60deg);
}

.line:nth-of-type(3) {
    transform: rotate(120deg);
}

.line:nth-of-type(4) {
    transform: rotate(180deg);
}

.line:nth-of-type(5) {
    transform: rotate(240deg);
}

.line:nth-of-type(6) {
    transform: rotate(300deg);
}

.cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    transform-origin: 50% 0%;
    animation: cabins 10s ease-in-out infinite;
}

.cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
}

.cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
}

.cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
}

.cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
}

.cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cabins {
    0% {
        transform: rotate(0deg);
    }

    25% {
        background-color: yellow;
    }
    
    50% {
        background-color: purple;
    }
    
    75% {
        background-color: yellow;
    }
    
    100% {
        transform: rotate(-360deg);
    }
}

  1. 通过构建企鹅来学习CSS变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="sun"></div>
    <div class="penguin">
        <div class="penguin-head">
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="chin"></div>
            <div class="eye left">
                <div class="eye-lid"></div>
            </div>
            <div class="eye right">
                <div class="eye-lid"></div>
            </div>
            <div class="blush left"></div>
            <div class="blush right"></div>
            <div class="beak top"></div>
            <div class="beak bottom"></div>
        </div>
        <div class="shirt">
            <div>💜</div>
            <p>I CSS</p>
        </div>
        <div class="penguin-body">
            <div class="arm left"></div>
            <div class="arm right"></div>
            <div class="foot left"></div>
            <div class="foot right"></div>
        </div>
    </div>

    <div class="ground"></div>
</body>

</html>
styles.css

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
}

body {
    background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
    position: absolute;
    transform: skew(0deg, 44deg);
    z-index: 2;
    margin-top: 100px;
}

.back-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    left: 110px;
    top: 225px;
}

.sun {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    top: -75px;
    right: -75px;
}

.penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    transition: transform 1s ease-in-out 0ms;
}

.penguin * {
    position: absolute;
}

.penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
}

.penguin-head {
    width: 50%;
    height: 45%;
    background: linear-gradient(45deg,
            var(--penguin-skin),
            rgb(239, 240, 228));
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
}

.face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
}

.face.left {
    left: 5%;
}

.face.right {
    right: 5%;
}

.chin {
    width: 90%;
    height: 70%;
    background-color: var(--penguin-face);
    top: 25%;
    left: 5%;
    border-radius: 70% 70% 100% 100%;
}

.eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 45%;
    border-radius: 50%;
}

.eye.left {
    left: 25%;
}

.eye.right {
    right: 25%;
}

.eye-lid {
    width: 150%;
    height: 100%;
    background-color: var(--penguin-face);
    top: 25%;
    left: -23%;
    border-radius: 50%;
}

.blush {
    width: 15%;
    height: 10%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
}

.blush.left {
    left: 15%;
}

.blush.right {
    right: 15%;
}

.beak {
    height: 10%;
    background-color: var(--penguin-picorna);
    border-radius: 50%;
}

.beak.top {
    width: 20%;
    top: 60%;
    left: 40%;
}

.beak.bottom {
    width: 16%;
    top: 65%;
    left: 42%;
}

.shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 165px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
}

.shirt div {
    font-weight: initial;
    top: 22.5px;
    left: 12px;
}

.penguin-body {
    width: 53%;
    height: 45%;
    background: linear-gradient(45deg,
            rgb(134, 133, 133) 0%,
            rgb(234, 231, 231) 25%,
            white 67%);
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
}

.penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: var(--penguin-skin);
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
}

.arm {
    width: 30%;
    height: 60%;
    background: linear-gradient(90deg,
            var(--penguin-skin),
            rgb(209, 210, 199));
    border-radius: 30% 30% 30% 120%;
    z-index: -1;
}

.arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left;
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
}

.arm.right {
    top: 0%;
    right: -5%;
    transform: rotate(-45deg);
}

@keyframes wave {
    10% {
        transform: rotate(110deg) scaleX(-1);
    }

    20% {
        transform: rotate(130deg) scaleX(-1);
    }
    
    30% {
        transform: rotate(110deg) scaleX(-1);
    }
    
    40% {
        transform: rotate(130deg) scaleX(-1);
    }
}

.foot {
    width: 15%;
    height: 30%;
    background-color: var(--penguin-picorna);
    top: 85%;
    border-radius: 50%;
    z-index: -1;
}

.foot.left {
    left: 25%;
    transform: rotate(80deg);
}

.foot.right {
    right: 25%;
    transform: rotate(-80deg);
}

.ground {
    width: 100vw;
    height: calc(100vh - 300px);
    background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
    z-index: 3;
    position: absolute;
    margin-top: -58px;
}

  1. 个人作品展示页【认证项目】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>

    <!-- 导航栏 -->
    <nav id="navbar" class="nav">
        <ul class="nav-list">
            <li><a href="#welcome-section">关于</a></li>
            <li><a href="#projects">作品</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    
    <!-- 欢迎页 -->
    <section class="welcome-section" id="welcome-section">
        <h1>嗨，我是青橙</h1>
        <p>一个Web前端开发者</p>
    </section>
    
    <!-- 作品集 -->
    <section class="projects-section" id="projects">
        <h2 class="projects-section-header">这是我的一些作品</h2>
        <div class="projects-grid">
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
            <a href="" class="project project-tile" target="_blank">
                <img src="https://pic.webrelay.cn/img/penguin.png" alt="project" class="project-image">
                <p class="project-title">
                    <span class="code">&lt;</span>
                    企鹅挥手
                    <span class="code">&#47;&gt;</span>
                </p>
            </a>
        </div>
        <a href="" class="btn btn-show-all" target="_blank">展示所有<i class="fas fa-chevron-right"></i></a>
    </section>
    
    <!-- 联系方式 -->
    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2>让我们一起共事…</h2>
            <p>你要怎样联系我？</p>
        </div>
        <div class="contact-links">
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-weixin"></i> 微信
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-qq"></i> QQ
            </a>
            <a href="" target="_blank" class="btn contact-details">
                <i class="fab fa-github"></i> Github
            </a>
            <a href="mailto:orange****@qq.com" target="_blank" class="btn contact-details">
                <i class="fas fa-at"></i> 邮箱
            </a>
            <a href="tel:191****3043" target="_blank" class="btn contact-details">
                <i class="fas fa-mobile-alt"></i> 电话
            </a>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
        <p>&copy;作者 <a href="https://blog.webrelay.cn" target="_blank">青橙</a></p>
    </footer>

</body>

</html>
styles.css

:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    }

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

/* 
1200px = 75em
980px = 61.25em
460px = 28.75em
 */

@media (max-width: 75em) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 61.25em) {
    html {
        font-size: 58%;
    }
}

@media (max-width: 28.75em) {
    html {
        font-size: 55%;
    }
}

body {
    font-size: 1.8rem; /* 18px */
    color: var(--main-white);
    line-height: 1.4;
    font-weight: 400;
}

h1 {
    font-size: 6rem;
    text-align: center;
}

h2 {
    font-size: 4.2rem;
    text-align: center;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-white);
}

img {
    display: block;
    width: 100%;
}


/* 导航栏 */
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.nav-list {
    display: flex;
    margin-right: 2rem;
}

.nav-list a {
    display: block;
    font-size: 2.2rem;
    padding: 2rem;
}

@media (max-width: 28.75em) {
    .nav {
        justify-content: center;
    }

    .nav-list {
        margin: 0 1rem;
    }
}

.nav-list a:hover {
    background: var(--main-blue);
}

/* 欢迎页 */
.welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

.welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: var(--main-red);
}

/* 作品集 */
.projects-section {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
    .projects-section-header {
        font-size: 4rem;
    }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
    .projects-section {
        padding: 6rem 1rem;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

.project {
    background: var(--main-gray);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.code {
    color: var(--main-gray);
    transition: color 0.3s ease-out;
}

.project:hover .code {
    color: #ff7f50;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 2px;
}

.btn-show-all {
    font-size: 2rem;
    background: var(--main-gray);
    transition: background 0.3s ease-out;
}

.btn-show-all:hover {
    background: var(--main-red);
}

.btn-show-all:hover > i {
    transform: translateX(2px);
}

.btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/* 联系页 */
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background: var(--main-gray);
}

.contact-section-header > h2 {
    font-size: 6rem;
}

@media (max-width: 28.75em) {
    .contact-section-header > h2 {
        font-size: 4rem;
    }
}

.contact-section-header > p {
    font-style: italic;
}

.contact-links {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.contact-details {
    font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out;
}

.contact-details:hover {
    transform: translateY(5px);
}

/* 页脚 */
footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--main-gray);
    border-top: 4px solid var(--main-red);
}

footer > p {
    margin: 2rem;
}

@media (max-width: 28.75em) {
    footer {
        flex-direction: column;
        text-align: center;
    }
}
]]> @@ -96,11 +96,11 @@ - Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） /minecraft-server/ - 你是否在玩Minecraft国际版时想和小伙伴联机一块玩耍却不知道该怎么办，亦或自己手上有台吃灰了很久的云服务器不知道拿来干什么，今天这期教程就教大家如何搭建一个MC服务器。本教程尽可能精简，会省略一些详细步骤，有疑问欢迎在评论区提问。

本文章操作环境

img img img img img img

本服务器到期前会一直开着（到期时间 2023-08-12 12:46:14），欢迎小伙伴来玩

1.19.4原版生存：43.142.236.44:25565

💰 购买服务器

首先得拥有一台Linux服务器，可以在腾讯云、阿里云购买云服务器，一般新用户都会有活动，而且有时还会有免费试用活动等。具体购买步骤略。

img

由于CentOS已停止维护，Java版本最新只能安装Java 11，而 Minecraft 1.16 版本以上需要 Java 11 以上版本支持，所以我原本的CentOS云服务器重装成了Ubuntu系统，具体在控制台 - 重装系统选择系统及版本即可一键重装。

具体对应版本推荐：

Minecraft服务端版本号JDK/Java推荐版本
1.7-8
1.8+8/11
1.12+ ~ 1.15+8/11
1.16+11/16
1.17+ ~ 1.18+16/17

🚀 登录服务器

推荐下载 MobaXterm 或 XShell 远程登录我们的服务器，我以MobaXterm为例，打开软件，点击左上角的Session按钮建立一个连接，选择最左边的SSH

Remote host 填写我们的服务器公网IP，例如43.142.236.44

Specify username Ubuntu默认用户名一般为 ubuntu，CentOS默认用户名一般为root

img

Port 端口号22保持不变，如果服务器未开启22端口，可在服务器控制台 - 防火墙/安全组 - 添加规则 端口填写22确认即可。

创建完Session后打开，会提示让我们输入密码，输入过程中不会显示，输完了以后直接回车即可。如果忘记了密码可在服务器控制台重置密码。出现以下界面表示登录成功：

img

🔧 服务器配置

我们先来到我们的云服务器控制台，找到防火墙/安全组，点击添加规则，依次添加23333，24444，25565三个端口，来源默认为0.0.0.0，如需手动填写请手动填写。

img

回到MobaXterm，依次输入以下指令：

  • Ubuntu系统

切换到管理员权限（$为普通用户权限，#为管理员权限）

1
sudo bash

更新软件包

1
apt update

安装Java环境

1
apt install openjdk-17-jre

查看Java版本（确认安装成功）

1
java -version

安装Node

1
apt install nodejs

安装npm

1
apt install npm

🧩 安装MCSManager

一行命令快速安装

1
wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh

开启MCSManager中文管理面板

1
2
systemctl start mcsm
systemctl status mcsm

img

记住默认管理用户为#master，密码123456

🔑 登录MCSManager

在我们自己电脑的浏览器地址栏中输入云服务器公网IP:23333即可打开登录界面，例如43.142.236.44:23333

img

输入默认的账号和密码即可登录，登录完成后请尽快修改密码

img

💡 配置Minecraft服务端

  • 下载Minecraft Java版服务端（server.jar)

Minecraft官网下载（只能下载最新版本）

img

MCVersion.net （可下载各个版本的服务端及客户端）

img

  • 创建实例

回到MCSManager管理面板，点击 服务端管理 - 创建新实例应用 - 引导创建（推荐）

img

填写实例名称（只能用字母/数字/下划线！），项目位置不用填（默认自动），点击下一步，上传刚刚下载的服务端程序server.jar

img

点击下一步，填写相关参数，全部默认，选择确认无误，立刻创建

img

  • 开启游戏服务器

点击刚刚创建的实例，点击左边的 服务端操作 - 开启服务器 即可运行游戏服务端。启动设置 - 服务器自启推荐打开

img

  • 配置游戏服务器

点击 配置文件 - Server.Properties 即可配置我们的游戏服务器参数，例如游戏模式、地图种子、正版验证、极限模式、玩家互伤等等

img

再打开服务端命令控制台，输入 op 玩家id，给玩家管理员权限，例如op cyan___orange

更多服务端指令请参考：Minecraft：服务器命令大全 - EDER笑笑的文章 - 知乎

img

🕹️ 登录Minecraft服务器

使用对应的游戏版本启动，我用的服务端是最新版本1.19.4版本，那么我的游戏版本也必须是1.19.4，如果使用离线账号登录，那么必须要在服务器配置文件Server.Properties中关闭正版验证

img

进入游戏后，在Minecraft中点击 多人游戏 - 添加服务器

服务器名称：随意

服务器地址：服务器公网IP:25565，例如43.142.236.44:25565

img

点击完成后即可添加我们的服务器，回到服务器列表就可以看到我们的服务器，后面显示绿色即可连接，让我们加入游戏吧！

img

🎉 成功进入游戏 🥳

img

相关链接：

MCSManager | Minecraft 中文管理面板

MobaXterm free Xserver and tabbed SSH client for Windows

XSHELL - NetSarang Website

Download server for Minecraft | Minecraft

参考资料：

【MC】从零开始使用云服务器搭建Minecraft服务器

]]> + 你是否在玩Minecraft国际版时想和小伙伴联机一块玩耍却不知道该怎么办，亦或自己手上有台吃灰了很久的云服务器不知道拿来干什么，今天这期教程就教大家如何搭建一个MC服务器。本教程尽可能精简，会省略一些详细步骤，有疑问欢迎在评论区提问。

本文章操作环境

img img img img img img

本服务器到期前会一直开着（到期时间 2023-08-12 12:46:14），欢迎小伙伴来玩

1.19.4原版生存：43.142.236.44:25565

💰 购买服务器

首先得拥有一台Linux服务器，可以在腾讯云、阿里云购买云服务器，一般新用户都会有活动，而且有时还会有免费试用活动等。具体购买步骤略。

img

由于CentOS已停止维护，Java版本最新只能安装Java 11，而 Minecraft 1.16 版本以上需要 Java 11 以上版本支持，所以我原本的CentOS云服务器重装成了Ubuntu系统，具体在控制台 - 重装系统选择系统及版本即可一键重装。

具体对应版本推荐：

Minecraft服务端版本号JDK/Java推荐版本
1.7-8
1.8+8/11
1.12+ ~ 1.15+8/11
1.16+11/16
1.17+ ~ 1.18+16/17

🚀 登录服务器

推荐下载 MobaXterm 或 XShell 远程登录我们的服务器，我以MobaXterm为例，打开软件，点击左上角的Session按钮建立一个连接，选择最左边的SSH

Remote host 填写我们的服务器公网IP，例如43.142.236.44

Specify username Ubuntu默认用户名一般为 ubuntu，CentOS默认用户名一般为root

img

Port 端口号22保持不变，如果服务器未开启22端口，可在服务器控制台 - 防火墙/安全组 - 添加规则 端口填写22确认即可。

创建完Session后打开，会提示让我们输入密码，输入过程中不会显示，输完了以后直接回车即可。如果忘记了密码可在服务器控制台重置密码。出现以下界面表示登录成功：

img

🔧 服务器配置

我们先来到我们的云服务器控制台，找到防火墙/安全组，点击添加规则，依次添加23333，24444，25565三个端口，来源默认为0.0.0.0，如需手动填写请手动填写。

img

回到MobaXterm，依次输入以下指令：

  • Ubuntu系统

切换到管理员权限（$为普通用户权限，#为管理员权限）

1
sudo bash

更新软件包

1
apt update

安装Java环境

1
apt install openjdk-17-jre

查看Java版本（确认安装成功）

1
java -version

安装Node

1
apt install nodejs

安装npm

1
apt install npm

🧩 安装MCSManager

一行命令快速安装

1
wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh

开启MCSManager中文管理面板

1
2
systemctl start mcsm
systemctl status mcsm

img

记住默认管理用户为#master，密码123456

🔑 登录MCSManager

在我们自己电脑的浏览器地址栏中输入云服务器公网IP:23333即可打开登录界面，例如43.142.236.44:23333

img

输入默认的账号和密码即可登录，登录完成后请尽快修改密码

img

💡 配置Minecraft服务端

  • 下载Minecraft Java版服务端（server.jar)

Minecraft官网下载（只能下载最新版本）

img

MCVersion.net （可下载各个版本的服务端及客户端）

img

  • 创建实例

回到MCSManager管理面板，点击 服务端管理 - 创建新实例应用 - 引导创建（推荐）

img

填写实例名称（只能用字母/数字/下划线！），项目位置不用填（默认自动），点击下一步，上传刚刚下载的服务端程序server.jar

img

点击下一步，填写相关参数，全部默认，选择确认无误，立刻创建

img

  • 开启游戏服务器

点击刚刚创建的实例，点击左边的 服务端操作 - 开启服务器 即可运行游戏服务端。启动设置 - 服务器自启推荐打开

img

  • 配置游戏服务器

点击 配置文件 - Server.Properties 即可配置我们的游戏服务器参数，例如游戏模式、地图种子、正版验证、极限模式、玩家互伤等等

img

再打开服务端命令控制台，输入 op 玩家id，给玩家管理员权限，例如op cyan___orange

更多服务端指令请参考：Minecraft：服务器命令大全 - EDER笑笑的文章 - 知乎

img

🕹️ 登录Minecraft服务器

使用对应的游戏版本启动，我用的服务端是最新版本1.19.4版本，那么我的游戏版本也必须是1.19.4，如果使用离线账号登录，那么必须要在服务器配置文件Server.Properties中关闭正版验证

img

进入游戏后，在Minecraft中点击 多人游戏 - 添加服务器

服务器名称：随意

服务器地址：服务器公网IP:25565，例如43.142.236.44:25565

img

点击完成后即可添加我们的服务器，回到服务器列表就可以看到我们的服务器，后面显示绿色即可连接，让我们加入游戏吧！

img

🎉 成功进入游戏 🥳

img

相关链接：

MCSManager | Minecraft 中文管理面板

MobaXterm free Xserver and tabbed SSH client for Windows

XSHELL - NetSarang Website

Download server for Minecraft | Minecraft

]]> diff --git a/tags/JavaScript/index.html b/tags/JavaScript/index.html index 8dfcd608..93d16d75 100644 --- a/tags/JavaScript/index.html +++ b/tags/JavaScript/index.html @@ -128,7 +128,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -152,7 +152,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法 diff --git "a/tags/\345\211\215\347\253\257/index.html" "b/tags/\345\211\215\347\253\257/index.html" index 0749b90e..46b76126 100644 --- "a/tags/\345\211\215\347\253\257/index.html" +++ "b/tags/\345\211\215\347\253\257/index.html" @@ -128,7 +128,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -176,7 +176,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法 diff --git "a/tags/\346\225\231\347\250\213/index.html" "b/tags/\346\225\231\347\250\213/index.html" index 352de77e..02b0a66e 100644 --- "a/tags/\346\225\231\347\250\213/index.html" +++ "b/tags/\346\225\231\347\250\213/index.html" @@ -128,7 +128,7 @@

BLOG OF 青橙

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） diff --git "a/tags/\346\270\270\346\210\217/index.html" "b/tags/\346\270\270\346\210\217/index.html" index aea9075d..2bfb3969 100644 --- "a/tags/\346\270\270\346\210\217/index.html" +++ "b/tags/\346\270\270\346\210\217/index.html" @@ -128,7 +128,7 @@

BLOG OF 青橙

- Minecraft Java版游戏服务器搭建 - MCSManager新版教程 + Minecraft游戏服务器搭建（MCSManager管理面板） diff --git "a/tags/\347\254\224\350\256\260/index.html" "b/tags/\347\254\224\350\256\260/index.html" index f3e2562b..b0ec35b7 100644 --- "a/tags/\347\254\224\350\256\260/index.html" +++ "b/tags/\347\254\224\350\256\260/index.html" @@ -128,7 +128,7 @@

BLOG OF 青橙

- JS内置构造函数 - String篇 + JavaScript字符串常用方法 @@ -176,7 +176,7 @@

BLOG OF 青橙

- JS内置构造函数 - Array篇 + JavaScript数组常用方法