(音乐生动) 欢迎来到KnowledgeCity的课程 中级联样式表上的内容。 我叫悬崖布罗佐(Cliff Brozo)。 我是你的教授 今天我们将探索布局页面 级联样式表。 我们将研究如何做一些粘性标题。 我们将弄清楚如何创建导航栏。 我们将讨论不同的领域 页面，内容窗口， 边线，主窗口，页脚，页眉。 将所有这些内容放到页面上。 我们将讨论文章 我们将看到如何格式化整个页面 使它看起来最好。 让我们开始吧。 我们应该指出的第一件事 我们将使用称为Atom的软件， ATOM，您可以找到它 并下载到atom.io。 我们使用Atom的原因 真的没关系吗 是否有Windows计算机 或Apple机器，Atom均可在 这将允许我们 查看代码和结果 同时具有实时预览功能。 所以你在看什么 是我们创建的网页 举例说明 我们将在本次会议中学习。 首先，我们将讨论粘性标头。 通过粘页眉， 我们的意思是标题在滚动时不会移动。 所以如果我向下滚动 屏幕内容将改变 但标头将保留在应有的位置。 这允许我们做什么 给用户导航 停留在页面上 无论他们在页面上的什么位置。 我们刚刚看过的另一件事 是导航栏 有很多不同的方式 导航。 在这种情况下，我们要做的就是交换一些颜色 当用户将鼠标指针悬停时 在那个特定项目上。 让我们看一下代码 完成此页面。 HTML代码非常简单。 我有一个指向我的样式表的链接 在CSS文件夹中。 然后我从我的身体开始 然后创建一个标题部分 包含一个部门 控制粘性标头的方式 看起来，我创建了一个名为stick_top的类。 并且还管理导航部分。 所以stick_top是什么 我们在CSS程序中声明的 我们将在稍后讨论。 但这就是为什么当我们编写代码"粘性标头"时， 我们在这里看到蓝色文字。 我们可以看到有一些下划线。 我们有一个橙色背景。 所有这些东西都在CSS文件中处理。 当我们向下移动页面时， 我们进入主要部分 并且MAIN部分包含所有 我们将要放置的内容 在页面上。 再一次，我宣布一个课 在CSS中称为main_content 正在格式化该特定区域。 我从H1开始。 那只是在页面上放一个标题， 紧接着一段文字 希望读起来有些有趣。 然后我创建一个叫做" aside"的东西 如果您以前从未使用过辅助材料， 他们是一个好方法 将您的注意力吸引到屏幕的某个区域。 现在，我将其格式化 包括一个不错的绿色酒吧 褪色了。 我把文字写成斜体 我已经设定好宽度 再次，我们将在CSS代码中看到它是如何完成的。 然后我继续我的话题 再说另一段 然后我来一个叫做文章的东西 显示文字的位置 在特殊格式的区域中。 在这种情况下，我正在看棒球成绩。 本文底部的信息 只是一系列的H1和H2 而您在这里看到的是Unicode 打印一点棒球。 我们继续下一页 然后进入页脚部分。 在页脚部分，我已放入一些邮件以获取信息 以同样的方式徘徊 导航栏可以 在这种情况下 我再次使用了Unicode。 第一次获得快速信封。 而且我知道信封不是电子邮件的时尚 但想法是我们正在发送某种邮件。 然后我把另一个电话链接 是的，我用过＆phone， 具有命名的Unicode功能 给我一个黑色的电话 再次变为白色。 最后，我放入了版权声明 与© 我会在那里拿到小c。 然后关闭HTML标签 按照打开的顺序。 让我们来看看CSS 与此特定页面一起。 我为你所做的 我几乎在每行上都发表了评论 CSS，以便您知道该行的功能。 首先，我要设置编码 以及三个基本HTML标签的格式， 从第一行开始的body标签， 导航，从第六行开始 以及从第12行开始的水平尺。 对于身体，我要整个身体 到有点古怪的字体 如果由于某种原因Comic Sans MS不可用 在用户的PC上， 我将使用任何无衬线字体 再一次，我们了解了衬线 在初学者课程中。 我正在使用MidnightBlue作为颜色 而且我喜欢尽可能使用命名的颜色。 如果是十六进制数字， 人们然后必须去查找颜色。 您还会注意到，我花了时间 排列我的代码 我把所有的结肠都排好了 我可以使它们看起来干净整洁。 在身体上，我需要做的一切 将它们排成一排，以便使我的结肠对齐 然后再间隔一些 使我的分号对齐。 这样做的重点 是当代码不起作用时 有时您可能在某个地方犯了错误 一路走来，你的代码 不符合您的预期， 解决问题要容易得多 当您查看格式正确的代码时。 如果你能保持所有结肠对齐 您可以保持所有分号对齐， 你会变得更快乐。
