时间流逝！今天开始一个新的部分，通过构建城市天际线来学习 CSS 变量。
让我快速向您展示我采取的步骤：
- 首先在文档顶部添加 !DOCTYPE html 声明，以便浏览器知道它正在阅读什么类型的文档。
- 在 DOCTYPE 下方添加了打开和关闭 html 标记。我没有忘记添加语言类型。
- 接下来，我在 html 元素中添加了打开和关闭 head 和 body 标记。
- 在头部中，嵌套了一个字符集为 UTF-8 的元元素，一个标题为 City Skyline 的标题元素，以及一个将我的 styles.css 文件链接到我的 html 文档的链接元素也被添加了。
- 使用 * 选择器为所有内容添加边框，并为其设置 1px 纯黑色边框。这是一个有助于可视化元素的位置及其大小的技巧。我稍后会删除它。（在 CSS 中，您可以使用星号定位所有内容）。
- 还为所有内容添加了边框大小的框。
- 给身体一个100vh的高度。通过将边距设置为 0，从正文中删除了默认边距。最后，将溢出属性设置为隐藏，以隐藏任何超出视口时出现的滚动条。
- 在 body 中创建了一个带有背景建筑物类的 div 元素。这将是一组建筑物的容器。
- 将背景建筑物元素的宽度和高度设置为 100%，使其成为其父级 body 的完整宽度和高度。
- 在背景建筑物容器中嵌套了一个类为 bb1 的 div。给 .bb1 10% 的宽度和 70% 的高度。这将是您的第一座建筑。
这就是今天的全部内容。这是 freeCodeCamp 上的免费课程，我很享受它的每一步。记得发表评论。谢谢你。
网友评论