这部分没有具体的知识点，全都以习题的形式来巩固之前的内容。这里我直接将题目和解答思路放上来：
具体内容包括：
- 设置文字样式，包括html标签如strong, em等，以及css属性如font-size, font-weight, line-height等
- 设置盒模型，包括宽高、背景颜色、阴影、透明度等
- 常见定位方式，包括相对定位、绝对定位、固定定位、浮动，以及通过z-index调整元素的呈现方式，margin:auto实现居中
- 颜色的使用方法，包括如何使用互补色、三次色以及通过hsl设置
- 通过@keyframes设置动画效果
值得注意的是，有一些小的技巧还设计得挺可爱的，如通过修改link元素的透明度而不是颜色来修改链接的样式，互补色在16进制颜色代码上有明显的对应特征等。
另外还添加了两个小的案例，一个是实现爱心跳动，一个是实现月牙效果来使用这些属性，比之前的习题案例生动许多。
以下是这一节的思维导图和习题解答：
Introduction to the Applied Visual Design Challenges
Create Visual Balance Using the text-align Property
1
2<h4 style="text-align: center;">Google</h4>
<p style="text-align: justify">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>Adjust the Width of an Element Using the width Property
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
1
2
3
4h4 {
text-align: center;
height: 25px;
}Use the strong Tag to Make Text Bold
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
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
1
<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 del Tag to Strikethrough Text
1
<h4><del>Google</del>Alphabet</h4>
Create a Horizontal Line Using the hr Element
1
2<h4><del>Google</del>Alphabet</h4>
<hr>Adjust the background-color Property of Text
1
2
3
4
5h4 {
text-align: center;
background-color:rgba(45,45,45, 0.1);
padding: 10px;
}Adjust the Size of a Header Versus a Paragraph Tag
1
2
3
4
5
6h4 {
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
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
1
2
3
4
5.links {
text-align: left;
color: black;
opacity: 0.7;
}Use the text-transform Property to Make Text Uppercase
1
2
3
4
5
6
7h4 {
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>Set the font-weight for Multiple Heading Elements
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<style>
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;
}
</style>Set the font-size of Paragraph Text
1
2
3
4
5<style>
p {
font-size: 16px;
}
</style>Set the line-height of Paragraphs
1
2
3
4
5
6<style>
p {
font-size: 16px;
line-height: 25px;
}
</style>Adjust the Hover State of an Anchor Tag
1
2
3
4
5
6
7
8<style>
a {
color: #000;
}
a:hover {
color: blue;
}
</style>Change an Element’s Relative Position
1
2
3
4
5
6<style>
h2 {
position: relative;
top: 15px;
}
</style>Move a Relatively Positioned Element with CSS Offsets
1
2
3
4
5
6
7<style>
h2 {
position: relative;
bottom: 10px;
left:15px;
}
</style>Lock an Element to its Parent with Absolute Positioning
1
2
3
4
5
6
7
8
9
10<style>
#searchbar {
position: absolute;
top: 50px;
right:50px;
}
section {
position: relative;
}
</style>Lock an Element to the Browser Window with Fixed Positioning
1
2
3
4
5
6
7#navbar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #767676;
}Push Elements Left or Right with the float Property
1
2
3
4
5
6
7
8
9
10
11
12
13
14<style>
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}
aside, section {
padding: 2px;
background-color: #ccc;
}
</style>Change the Position of Overlapping Elements with the z-index Property
1
2
3
4
5.first {
background-color: red;
position: absolute;
z-index: 2;
}Center an Element Horizontally Using the margin Property
1
2
3
4
5
6
7
8<style>
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
</style>Learn about Complementary Colors
1
2
3
4
5
6.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}-
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<style>
body {
background-color: white;
}
header {
background-color: #09A7A1;
color: white;
padding: 0.25em;
}
h2 {
color: #09A7A1;
}
button {
background-color: #FF790E;
}
footer {
background-color: #09A7A1;
color: white;
padding: 0.5em;
}
</style>-
1
2
3
4
5
6
7
8
9
10
11.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
} -
1
2
3nav {
background-color:hsl(180, 80%, 25%);
} Create a Gradual CSS Linear Gradient
1
2
3
4
5
6
7
8
9<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}
</style>Use a CSS Linear Gradient to Create a Striped Element
1
2
3
4
5
6
7
8
9
10
11
12
13div{
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
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
1
2
3
4#ball2 {
left:65%;
transform: scale(1.5);
}Use the CSS Transform scale Property to Scale an Element on Hover
1
2
3div:hover {
transform: scale(1.1);
}Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
1
2
3
4#bottom {
background-color: blue;
transform: skewX(24deg);
}tesUse the CSS Transform Property skewY to Skew an Element Along the Y-Axis
1
2
3
4#top {
background-color: red;
transform: skewY(-10deg);
}-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<style>
.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 0 0 blue;
}
</style> Create a More Complex Shape Using CSS and 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<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
content: '';
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>Learn How the CSS @keyframes and animation Properties Work
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15#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
1
2
3
4
5@keyframes background-color {
100% {
background-color: #4791d0;
}
}Modify Fill Mode of an Animation
1
2
3
4
5
6
7button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
animation-fill-mode: forwards;
/* add your code above this line */
}Create Movement Using CSS Animation
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: 0px;
}
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
1
2
3
4
5
6@keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}
}Animate Elements Continually Using an Infinite Animation Count
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}Make a CSS Heartbeat using an Infinite Animation Count
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<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>Animate Elements at Variable Rates
1
2
3
4
5
6@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}Animate Multiple Elements at Variable Rates
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
1
2
3
4
5
6
7
8#ball1 {
left:27%;
animation-timing-function: linear;
}
#ball2 {
left:56%;
animation-timing-function: ease-out;
}-
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
1
2
3
4
5#red {
background: red;
left: 27%;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}Make Motion More Natural Using a Bezier Curve
1
2
3
4
5#green {
background: green;
left: 75%;
animation-timing-function: cubic-bezier(0.311,0.441,0.444,1.649);
}