Web学习-freeCodeCamp课程学习

发表于 | 分类于 | 评论数： | 阅读次数：

一、Responsive Web Design Certification(响应式网页设计认证)

1. Basic HTML and HTML5(基本的HTML和HTML5)

2. Basic CSS（基本CSS）

3. Applied Visual Design（应用视觉设计）

  • Create Visual Balance Using the text-align Property

h4标记上的text-align属性将其设置为 center
p标记上的text-align属性将其设置为 justify

1
2
3
4
5
6
h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
  • Adjust the Width of an Element Using the width Property（使用width属性调整元素的宽度）

为fullCard类选择器，设置width属性为245px

1
2
3
4
5
6
7
.fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  • Adjust the Height of an Element Using the height Property（使用height属性调整元素的高度）

将height属性添加到h4标记并将其设置为25px

1
2
3
4
h4 {
    text-align: center;
    height: 25px;
  }
  • Use the strong Tag to Make Text Bold（使用strong标记使文字粗体）

在p标签内围绕”Stanford University”包裹一个strong标签。

1
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
  • Use the u Tag to Underline Text（使用u标签为文本加下划线）

在”Ph.D. students”文本周围包裹u标签

1
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
  • Use the em Tag to Italicize Text（使用em标记来显示文本）

em标签应该环绕p标签的内容

1
2
3
4
5
<p>  
    <em>
    Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.
    </em>
</p>
  • Use the s Tag to Strikethrough Text（使用s标记删除线文本）

将s标签包裹在h4标签内的“Google”周围，然后在其旁边添加单词Alphabet，Alphabet不具有删除线格式。

1
<h4><s>Google</s>Alphabet</h4>
  • Create a Horizontal Line Using the hr Element（使用hr元素创建水平线）

在h4标签下面添加一个hr标签

1
2
<h4><s>Google</s>Alphabet</h4>
<hr>
  • Adjust the background-color Property of Text（调整文本的背景颜色属性）

将h4元素的背景颜色调整为给定的rgba(45, 45, 45, 0.1)值
删除height属性 并添加 padding 为 10px的填充。 

1
2
3
4
5
h4 {
    text-align: center;
    padding: 10px;
    background-color: rgba(45, 45, 45, 0.1);
  }
  • Adjust the Size of a Header Versus a Paragraph Tag（调整标题的大小与段落标记）

将字体大小属性添加到设置为27像素的h4元素

1
2
3
4
5
6
h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }
  • Add a box-shadow to a Card-like Element（将盒子阴影添加到类似卡片的元素）

把id为thumbnail的元素，使用box-shadow

1
2
3
#thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
  • Decrease the Opacity of an Element（降低元素的不透明度）

links的样式设置opacity为0.7

1
2
3
4
5
.links {
    text-align: left;
    color: black;
    opacity: 0.7;
  }
  • Use the text-transform Property to Make Text Uppercase（使用text-transform属性使文本为大写）

将h4的文本text-transform属性转换为大写

1
2
3
4
5
6
7
h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
    text-transform: uppercase;
  }
  • Set the font-size for Multiple Heading Elements（设置多个标题元素的font-size）

将h1标记的font-size设置为68px
将h2标记的font-size设置为52px
将h3标签的font-size设置为40px
将h4标记的font-size设置为32px
将h5标记的font-size设置为21px
将h6标记的font-size设置为14px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
h1 {
  font-size: 68px;
}
h2 {
  font-size: 52px;
}
h3 {
  font-size: 40px;
}
h4 {
  font-size: 32px;
}
h5 {
  font-size: 21px;
}
h6 {
  font-size: 14px;
}
  • Set the font-weight for Multiple Heading Elements（设置多个标题元素的font-weight）

将h1标记的font-weight设置为800
将h2标记的font-weight设置为600
将h3标签的font-weight设置为500
将h4标记的font-weight设置为400
将h5标记的font-weight设置为300
将h6标记的font-weight设置为200

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
  font-size: 68px;
  font-weight: 800;
}
h2 {
  font-size: 52px;
  font-weight: 600;
}
h3 {
  font-size: 40px;
  font-weight: 500;
}
h4 {
  font-size: 32px;
  font-weight: 400;
}
h5 {
  font-size: 21px;
  font-weight: 300;
}
h6 {
  font-size: 14px;
  font-weight: 200;
}
  • Set the font-size of Paragraph Text（设置段落文本的font-size）

将段落的font-size属性值更改为16px

1
2
3
p {
    font-size: 16px;
  }
  • Set the line-height of Paragraphs（设置段落的line-height）

将line-height属性添加到p标记并将其设置为25px

1
2
3
4
p {
    font-size: 16px;
    line-height: 25px;
  }
  • Adjust the Hover State of an Anchor Tag（调整锚标记的悬停状态）

将a标签设置为黑色。添加规则，当用户将鼠标悬停在a标记上时，颜色为蓝色

1
2
3
4
5
6
a {
    color: black;
  }
a:hover {
    color: blue;
  }
  • Change an Element’s Relative Position（更改元素的相对位置）

将h2的position更改为relative，并将其移动到距离正常位置top的15px

1
2
3
4
h2 {
    position: relative;
    top: 15px;
}
  • Move a Relatively Positioned Element with CSS Offsets（）

将h2 向右移动15px，向上移动10px

1
2
3
4
5
h2 {
    position: relative;
    left: 15px;
    bottom: 10px
}
  • Lock an Element to its Parent with Absolute Positioning（使用Absolute将元素锁定到其父级）

给 #searchbar的 top和right元素偏移50px

1
2
3
4
5
6
#searchbar {
    position: absolute;
    top: 50px;
    right: 50px;
    
  }
  • Lock an Element to the Browser Window with Fixed Positioning（使用固定定位将元素锁定到浏览器窗口）

将其position更改为fixed，并将其偏离top 0px和left 0px

1
2
3
4
5
6
7
8
#navbar {
    position: fixed;
    top: 0px;
    left: 0px;
    
    width: 100%;
    background-color: #767676;
  }
  • Push Elements Left or Right with the float Property（使用float属性向左或向右推送元素）

给#left项left设置float，#right项right设置float数。

1
2
3
4
5
6
7
8
#left {
    float: left;
    width: 50%;
  }
#right {
    float: right;
    width: 40%;
  }
  • Change the Position of Overlapping Elements with the z-index Property（使用z-index属性更改重叠元素的位置）

first的元素的z-index值应为2

1
2
3
4
5
.first {
  background-color: red;
  position: absolute;
  z-index: 2;
}
  • Center an Element Horizontally Using the margin Property（使用margin属性水平居中元素）

通过添加值为auto的margin属性将页面居中放在页面上

1
2
3
4
5
6
div {
    background-color: blue;
    height: 100px;
    width: 100px;
    margin: auto;
  }
  • Learn about Complementary Colors（了解互补色）

blue类的div元素应具有blue的background-color
yellow类的div元素应具有yellow的background-color

1
2
3
4
5
6
.blue {
    background-color: blue;
  }
.yellow {
    background-color: yellow;
  }
  • Learn about Tertiary Colors（了解第三色）

将orange，cyan和raspberry的background-color属性更改为各自的颜色,确保使用十六进制代码

1
2
3
4
5
6
7
8
9
10
11
.orange {
    background-color: #FF7D00;
  }
  
.cyan {
    background-color: #00FFFF;
  }
  
.raspberry {
    background-color: #FF007D;
  }
  • Adjust the Color of Various Elements to Complementary Colors（将各种元素的颜色调整为互补色）

header元素的background-color应为＃09A7A1
footer元素的background-color应为＃09A7A1
h2元素的color应为＃09A7A1
button元素的background-color应为＃FF790E。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
header {
    background-color: #09A7A1;
    color: white;
    padding: 0.25em;
  }
footer {
    background-color: #09A7A1;
    color: white;
    padding: 0.5em;
  }
h2 {
    color: #09A7A1;
  }  
button {
    background-color: #FF790E;
  }
  • Adjust the Hue of a Color（调整颜色的色调）

使用hsl()根据类名（green, cyan, 或blue）更改每个div元素的背景颜色

1
2
3
4
5
6
7
8
9
.green {
    background-color: hsl(120, 100%, 50%);
  }
.cyan {
    background-color: hsl(180, 100%, 50%);
  }
.blue {
    background-color: hsl(240, 100%, 50%);
  }
  • Adjust the Tone of a Color（调整颜色的色调）

为nav元素添加背景颜色，使其使用相同的青色色调，但具有80％饱和度和25％亮度值，以改变其色调和阴影

1
2
3
nav {
    background-color: hsl(180, 80%, 25%);
  }
  • Create a Gradual CSS Linear Gradient（创建渐进的CSS线性渐变）

对div元素的background使用linear-gradient(），并从35deg的方向设置它以将颜色从#CCFFFF更改为#FFCCCC

1
2
3
4
5
6
7
div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
  }
  • Use a CSS Linear Gradient to Create a Striped Element（使用CSS线性渐变来创建条带元素）

通过更改repeating-linear-gradient()以使用45deg的渐变角度来创建条纹，然后将前两个颜色设置为yellow，将最后两个颜色设置为black

1
2
3
4
5
6
7
8
9
10
11
12
13
div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }
  • Create Texture by Adding a Subtle Pattern as a Background Image（通过添加细微图案作为背景图像来创建纹理）

使用https://i.imgur.com/MJAkxbh.png的网址，使用正文选择器设置整个页面的背景

1
2
3
4
5
<style>
  body {
    background: url(https://i.imgur.com/MJAkxbh.png);
  }
</style>
  • Use the CSS Transform scale Property to Change the Size of an Element（使用CSS Transform scale属性更改元素的大小）

id为#ball2的元素大小增加到原始大小的1.5倍

1
2
3
4
#ball2 {
    left: 65%;
    transform: scale(1.5);
  }
  • Use the CSS Transform scale Property to Scale an Element on Hover（使用CSS Transform scale属性在悬停上缩放元素）

为div的悬停状态添加CSS规则，当用户将鼠标悬停在其上时, 使用transform属性将div元素缩放到其原始大小的1.1倍

1
2
3
div:hover {
    transform: scale(1.1);
  }
  • Use the CSS Transform Property skewX to Skew an Element Along the X-Axis（使用CSS变换属性skewX, 沿X轴倾斜元素）

使用transform属性,将id为bottom的元素沿X轴倾斜24deg

1
2
3
4
#bottom {
    background-color: blue;
    transform: skewX(24deg);
  }
  • Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis（使用CSS变换属性skewY，沿Y轴倾斜元素）

使用transform属性，将id为top的元素沿Y轴倾斜-10deg

1
2
3
4
#top {
    background-color: red;
    transform: skewY(-10deg);
  }
  • Create a Graphic Using CSS（使用CSS创建图形）

将background-color更改为transparent
将border-radius属性设置为50％以形成圆形
更改box-shadow属性，将offset-x设置为25px，offset-y设置为10px，blur-radius设置为0，spread-radius设置为0，颜色设置为blue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 25px 10px 0px 0px blue; 
}
  • Create a More Complex Shape Using CSS and HTML（使用CSS和HTML创建更复杂的形状）

在heart::after选择器中，将background-color更改为pink，将border-radius更改为50％
在heart选择器中，填写transform属性，使用rotate()函数偏转-45deg
在heart::before选择器中，将其content属性设置为空字符串

1
2
3
4
5
6
7
8
9
10
.heart {
  transform: rotate(-45deg);
}
.heart::after {
  background-color: pink;
  border-radius: 50%;
  }
.heart::before {
  content: "";
}
  • Learn How the CSS @keyframes and animation Properties Work（了解CSS @keyframes和动画属性的工作原理）

为id为rect的元素创建动画，animation-name设置为rainbow，并将animation-duration设置为4s
声明一个@keyframes规则，并将动画开头的背景颜色（0％）设置为blue，将动画的中间（50％）设置为green，将动画的结尾（100％）设置为yellow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}
@keyframes rainbow {
  0% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}
  • Use CSS Animation to Change the Hover State of a Button（使用CSS动画更改按钮的悬停状态）

使用@keyframes规则将动画名称为background-color的background-color在100％的时候更改为#4791d0

1
2
3
4
5
@keyframes background-color {
   100% {
     background-color: #4791d0;
   }
 }
  • Modify Fill Mode of an Animation（修改动画的填充模式）

ps：因为动画在500ms过后会重置，导致按钮恢复为原始颜色，这样做会将按钮保持突出显示

button：hover应该具有值为forward的animation-fill-mode属性

1
2
3
4
5
button:hover {
  animation-name: background-color;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}
  • Create Movement Using CSS Animation（使用CSS动画创建运动）

@keyframes规则0％的时候,向left偏移0px
@keyframes规则50％的时候,向left偏移25px
@keyframes规则100％的时候,向left偏移-25px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
    left: 0;
  }
  50% {
    background-color: green;
    top: 50px;
    left: 25px;
  }
  100% {
    background-color: yellow;
    top: 0px;
    left: -25px;
  }
}
  • Create Visual Direction by Fading an Element from Left to Right（通过从左到右淡化元素来创建视觉方向）

@keyframes规则用于淡入淡出50％的时候, 将opacity属性设置为0.1

1
2
3
4
5
6
@keyframes fade {
    50% {
      left: 60%;
      opacity: 0.1;
    }
  }
  • Animate Elements Continually Using an Infinite Animation Count（动画元素不断使用无限动画计数）

要使球在连续循环中保持在右侧弹跳，请将animation-iteration-count属性更改为infinite值

1
2
3
#ball {
  animation-iteration-count: infinite;
}
  • Make a CSS Heartbeat using an Infinite Animation Count
    （使用无限动画计数制作CSS心跳）

heart类的animation-iteration-count属性应具有infinite值
back类的animation-iteration-count属性应具有infinite值。

1
2
3
4
5
6
.back {
  animation-iteration-count: infinite;
}
.heart {
  animation-iteration-count: infinite
}
  • Animate Elements at Variable Rates（可变速率动画元素）

将star-1类的@keyframes规则改为50％

1
2
3
4
5
6
@keyframes twinkle-1 {
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}
  • Animate Multiple Elements at Variable Rates（可变速率动画多个元素）
    之前可以通过更改其@keyframes规则来更改两个相似动画元素的动画速率。也可以通过操纵多个元素的动画持续时间来实现相同的目标。

star-1的星的animation-duration属性应为1s
star-2的星的animation-duration属性应为0.9s
star-3的星的animation-duration属性应为1.1s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.star-1 {
    margin-top: 15%; 
    margin-left: 60%;
    animation-duration: 1s;
    animation-name: twinkle;
  }

  .star-2 {
    margin-top: 25%;
    margin-left: 25%;
    animation-duration: 0.9s;
    animation-name: twinkle;
  }

  .star-3 {
    margin-top: 10%;
    margin-left: 50%;
    animation-duration: 1.1s;
    animation-name: twinkle;
  }
  • Change Animation Timing with Keywords（使用关键字更改动画计时）

id为ball1的元素的animation-timing-function属性的值应该是linear
id为ball2的元素的animation-timing-function属性的值是ease-out

1
2
3
4
5
6
7
8
#ball1 { 
    left:27%;
    animation-timing-function: linear;
  }
#ball2 { 
    left:56%;
    animation-timing-function: ease-out;
  }
  • Learn How Bezier Curves Work（了解Bezier曲线的工作原理）

id为ball1的元素，将animation-timing-function属性的值从linear更改为其等效的cubic-bezier函数值

1
2
3
4
#ball1 { 
   left: 27%;
   animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
 }
  • Use a Bezier Curve to Move a Graphic（使用贝塞尔曲线移动图形）

将id为red的元素的animation-timing-function更改为cubic-bezier函数，其中x1，y1，x2，y2值分别设置为0,0,0.58,1

1
2


  • Make Motion More Natural Using a Bezier Curve（使用贝塞尔曲线使运动更自然）

id为green的元素的animation-timing-function的值更改为cubic-bezier函数，x1，y1，x2，y2值分别设置为0.311,0.441,0.444,1.649

1
2
3
4
5
#green {
    background: green;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
  }

4. Applied Accessibility（应用可访问性）