1
00:00:04,040 --> 00:00:09,465
现在到了你在这门课上的第一次作业时间

2
00:00:09,465 --> 00:00:10,975
在第一次作业中,

3
00:00:10,975 --> 00:00:18,605
我们将为你提供未经修饰的 aboutus.html 页面

4
00:00:18,605 --> 00:00:22,130
包含 aboutus.html 的 zip 文件

5
00:00:22,130 --> 00:00:25,670
在 assignment instructions 中

6
00:00:25,670 --> 00:00:30,530
因此, 你需要下载该页, 然后将它移动到你的 conFusion 文件夹中

7
00:00:30,530 --> 00:00:33,060
此后, 你将应用

8
00:00:33,060 --> 00:00:40,970
Bootstrap 类和 Flexbox 网格来改变页面样式

9
00:00:41,110 --> 00:00:47,780
然后将它移到 conFusion 文件夹里

10
00:00:47,780 --> 00:00:52,095
然后, 您可以通过键入 localhost:3000/aboutus.html

11
00:00:52,095 --> 00:01:01,810
来查看浏览器中的页面

12
00:01:01,810 --> 00:01:05,310
这是你可以看到的页面的唯一方式

13
00:01:05,310 --> 00:01:06,545
所以首先

14
00:01:06,545 --> 00:01:08,775
页面看起来会像这样,

15
00:01:08,775 --> 00:01:12,520
一个完全未经修饰的页面, 只包含内容

16
00:01:12,520 --> 00:01:20,165
现在, 你的任务是完成三项任务以设置此页面的格式

17
00:01:20,165 --> 00:01:23,245
让我们更详细地看一下这三项任务

18
00:01:23,245 --> 00:01:26,890
你的第一个任务是对 aboutus.html 应用

19
00:01:26,890 --> 00:01:32,850
Bootstrap CSS 和 Javascript 类

20
00:01:32,850 --> 00:01:42,415
使得此页立即转变为本页,

21
00:01:42,415 --> 00:01:48,470
一旦你添加了 Bootstrap CSS 和 Javascript 类,

22
00:01:48,470 --> 00:01:54,115
页眉和页脚将自动得到修改,

23
00:01:54,115 --> 00:01:59,170
因为我只是简单地从首页复制了页眉和页脚

24
00:01:59,170 --> 00:02:05,140
我没有改变任何样式

25
00:02:05,140 --> 00:02:10,955
但是页面的实际内容仍然未添加样式

26
00:02:10,955 --> 00:02:14,580
所以现在, 第二项任务,

27
00:02:14,580 --> 00:02:19,580
你要应用 Bootstrap Flexbox 网格, 包括 container,

28
00:02:19,580 --> 00:02:23,190
row 和 column 类来

29
00:02:23,190 --> 00:02:28,430
此内容或页面, 以便你可以正确地修改其样式

30
00:02:28,430 --> 00:02:30,345
现在, 当应用这些类时,

31
00:02:30,345 --> 00:02:36,430
您将行和列类应用于 About Us, 将其变成这样

32
00:02:36,430 --> 00:02:40,390
然后, 将行和列类应用于

33
00:02:40,390 --> 00:02:45,445
此内容, 使此内容仅占屏幕的一半,

34
00:02:45,445 --> 00:02:48,740
然后, 将行和列类应用于

35
00:02:48,740 --> 00:02:53,245
此内容使其占据整个屏幕宽度

36
00:02:53,245 --> 00:03:00,300
因此, 请正确选择行和列类应用于此

37
00:03:00,300 --> 00:03:05,220
你可以使用我们已经自定义的 CSS 类

38
00:03:05,220 --> 00:03:10,510
通过添加 styles.css,

39
00:03:10,510 --> 00:03:14,765
它也可以在此页中对内容进行样式的修改

40
00:03:14,765 --> 00:03:18,010
所以当你完成第二项任务时,

41
00:03:18,010 --> 00:03:21,990
你的网页看起来会像这样

42
00:03:21,990 --> 00:03:27,290
你可以看到, About Us 自成一体

43
00:03:27,290 --> 00:03:31,505
然后 Our History 部分,

44
00:03:31,505 --> 00:03:37,800
注意到在一个小到大的屏幕尺寸,

45
00:03:37,800 --> 00:03:43,815
Our History 将占据屏幕宽度的一半

46
00:03:43,815 --> 00:03:51,850
Corporate Leadership 部分占据整个屏幕宽度

47
00:03:51,850 --> 00:03:56,000
这是您在作业中需要完成的第二个任务

48
00:03:56,000 --> 00:03:59,660
对于第三个任务, 你可以看到,

49
00:03:59,660 --> 00:04:05,380
对于较大的屏幕尺寸, 此内容布局看起来很好,

50
00:04:05,380 --> 00:04:13,240
但是当你去到额外的小屏幕尺寸, 尤其是这样,

51
00:04:13,240 --> 00:04:20,415
你会发现这部分中的内容太多

52
00:04:20,415 --> 00:04:27,670
所以, 我们想做的是使用另一个 Bootstrap 提供给我们的类, 叫做

53
00:04:27,670 --> 00:04:31,615
d-none 和 d-sm-block

54
00:04:31,615 --> 00:04:37,865
在作业资源中有一个响应类的链接,

55
00:04:37,865 --> 00:04:44,550
你可以查看 d-none 和 d-sm-block 的文档

56
00:04:44,550 --> 00:04:49,440
你需要应用这些, 从而使得此描述被

57
00:04:49,440 --> 00:04:54,400
隐藏, 在额外的小屏幕尺寸。

58
00:04:54,400 --> 00:04:59,955
所以, 当你对 Corporate Leadership 应用这个类,

59
00:04:59,955 --> 00:05:06,040
同样的内容将在没有描述的情况下列出,

60
00:05:06,040 --> 00:05:10,465
所以它将在额外小的屏幕尺寸被隐藏

61
00:05:10,465 --> 00:05:14,170
但是当你去小到大屏幕尺寸,

62
00:05:14,170 --> 00:05:16,335
内容将变为可见

63
00:05:16,335 --> 00:05:21,200
所以你可以注意到, 对于额外小的屏幕尺寸,

64
00:05:21,200 --> 00:05:23,760
内容是隐藏的,

65
00:05:23,760 --> 00:05:26,170
但对于小屏幕尺寸,

66
00:05:26,170 --> 00:05:30,475
该描述内容将被清晰地显示出来

67
00:05:30,475 --> 00:05:35,310
所以 这是这个作业的第三部分

68
00:05:35,310 --> 00:05:40,175
你做的时候还可以将相同的类应用于

69
00:05:40,175 --> 00:05:45,810
我们 index.html 页中的说明, 使

70
00:05:45,810 --> 00:05:51,480
内容项的详细说明也隐藏起来

71
00:05:51,480 --> 00:05:57,645
在超小屏幕大小上查看的时候

72
00:05:57,645 --> 00:06:02,090
这样就完成了你的第一次作业

73
00:06:02,090 --> 00:06:04,965
此外, 当你提交作业时,

74
00:06:04,965 --> 00:06:14,460
请对你的布局进行整页屏幕截图

75
00:06:14,460 --> 00:06:19,615
不仅是小到

76
00:06:19,615 --> 00:06:25,930
额外大的屏幕尺寸, 还有额外小的屏幕尺寸,

77
00:06:25,930 --> 00:06:29,230
然后将其作为您提交内容的一部分

78
00:06:29,230 --> 00:06:32,420
要在 Chrome 中进行完整的页面截图,

79
00:06:32,420 --> 00:06:36,000
您可以使用 Chrome 扩展插件,

80
00:06:36,000 --> 00:06:39,305
Chrome 扩展插件的链接提供在

81
00:06:39,305 --> 00:06:45,325
作业描述之后的作业资源中

82
00:06:45,325 --> 00:06:48,555
完成你的作业后,

83
00:06:48,555 --> 00:06:52,610
如果要将更改保存到 Git 仓库,

84
00:06:52,610 --> 00:06:55,750
请不要忘记提交更改

85
00:06:55,750 --> 00:07:00,090
信息为 Assignment One