现在到了你在这门课上的第一次作业时间
在第一次作业中,
我们将为你提供未经修饰的 aboutus.html 页面
包含 aboutus.html 的 zip 文件
在 assignment instructions 中
因此, 你需要下载该页, 然后将它移动到你的 conFusion 文件夹中
此后, 你将应用
Bootstrap 类和 Flexbox 网格来改变页面样式
然后将它移到 conFusion 文件夹里
然后, 您可以通过键入 localhost:3000/aboutus.html
来查看浏览器中的页面
这是你可以看到的页面的唯一方式
所以首先
页面看起来会像这样,
一个完全未经修饰的页面, 只包含内容
现在, 你的任务是完成三项任务以设置此页面的格式
让我们更详细地看一下这三项任务
你的第一个任务是对 aboutus.html 应用
Bootstrap CSS 和 Javascript 类
使得此页立即转变为本页,
一旦你添加了 Bootstrap CSS 和 Javascript 类,
页眉和页脚将自动得到修改,
因为我只是简单地从首页复制了页眉和页脚
我没有改变任何样式
但是页面的实际内容仍然未添加样式
所以现在, 第二项任务,
你要应用 Bootstrap Flexbox 网格, 包括 container,
row 和 column 类来
此内容或页面, 以便你可以正确地修改其样式
现在, 当应用这些类时,
您将行和列类应用于 About Us, 将其变成这样
然后, 将行和列类应用于
此内容, 使此内容仅占屏幕的一半,
然后, 将行和列类应用于
此内容使其占据整个屏幕宽度
因此, 请正确选择行和列类应用于此
你可以使用我们已经自定义的 CSS 类
通过添加 styles.css,
它也可以在此页中对内容进行样式的修改
所以当你完成第二项任务时,
你的网页看起来会像这样
你可以看到, About Us 自成一体
然后 Our History 部分,
注意到在一个小到大的屏幕尺寸,
Our History 将占据屏幕宽度的一半
Corporate Leadership 部分占据整个屏幕宽度
这是您在作业中需要完成的第二个任务
对于第三个任务, 你可以看到,
对于较大的屏幕尺寸, 此内容布局看起来很好,
但是当你去到额外的小屏幕尺寸, 尤其是这样,
你会发现这部分中的内容太多
所以, 我们想做的是使用另一个 Bootstrap 提供给我们的类, 叫做
d-none 和 d-sm-block
在作业资源中有一个响应类的链接,
你可以查看 d-none 和 d-sm-block 的文档
你需要应用这些, 从而使得此描述被
隐藏, 在额外的小屏幕尺寸。
所以, 当你对 Corporate Leadership 应用这个类,
同样的内容将在没有描述的情况下列出,
所以它将在额外小的屏幕尺寸被隐藏
但是当你去小到大屏幕尺寸,
内容将变为可见
所以你可以注意到, 对于额外小的屏幕尺寸,
内容是隐藏的,
但对于小屏幕尺寸,
该描述内容将被清晰地显示出来
所以 这是这个作业的第三部分
你做的时候还可以将相同的类应用于
我们 index.html 页中的说明, 使
内容项的详细说明也隐藏起来
在超小屏幕大小上查看的时候
这样就完成了你的第一次作业
此外, 当你提交作业时,
请对你的布局进行整页屏幕截图
不仅是小到
额外大的屏幕尺寸, 还有额外小的屏幕尺寸,
然后将其作为您提交内容的一部分
要在 Chrome 中进行完整的页面截图,
您可以使用 Chrome 扩展插件,
Chrome 扩展插件的链接提供在
作业描述之后的作业资源中
完成你的作业后,
如果要将更改保存到 Git 仓库,
请不要忘记提交更改
信息为 Assignment One