写了这么多HTML CSS研究，最后，我们将在本文中迎来一个具体的案例应用。 以下是本课要演示的案例图，我们将通过HTML和CSS来实现：
但无法用图文完整解释该页面的实现过程。 我们只能尽量包含我们写作的顺序和要点。 您需要参考视频教程并下载我们的案例源文件进行研究，才能更详细。 良好掌握相关知识。
视频教程：
案例源文件下载： 密码：ul1v
过去的评论：
设计师编程基础知识：什么是 HTML 和 CSS？
很多学生都讨论过，在找工作的时候，总是看到需要懂代码的招聘信息。 他们是否认为成为一名 UI 设计师需要了解代码？ 为什么设计需要编程？
阅读文章>
设计师速成指南：一小时快速了解 CSS 基础知识
本章我们开始学习CSS样式表的知识点，通过CSS控制HTML标签和元素的样式的方法和规范。
阅读文章>
设计师前端指南：一小时了解CSS属性应用
本系列将以每个人都能理解的方式帮助您掌握 HTML 和 CSS 的基础知识。
阅读文章>
HTML 样式语法
完成设计稿后，我们开始进行项目前端界面的布局。 首先我们需要创建一个项目相关的文件夹，然后在这个文件夹的根目录下创建一个“index.html”文档，然后创建img和css两个文件夹。 用于存放相应的文件。
然后，用编辑器打开index.html，首先完成页面标签结构的创建，即预测页面中包含哪些标签，以及对应的层次结构（即文档对象模型DOM），并将它们编码下来。
那么HTML的代码结构是怎样的呢？ 我们之前提到过。 让我们用树形图来理解 HTML 文档的结构：
这样做的目的是为了先集中精力创建一个清晰的HTML文档，这样有利于我们后续的样式调整更加方便，而不是一边写HTML一边调整CSS，效率会很低。
所以，你可以从下面开始做，首先填写我们前面提到的HTML文档的标准结构，并在head中添加引用外部CSS文件的链接。
然后我们将在body标签中添加相关内容框架的div标签。 为了直观显示，下面的标签都在body标签中，标准文档信息我就不展示了。
简单描述一下上面的结构，即我们将页面分为三个大模块，并将每个大模块拆分为两个子模块。 用文字解释如下：
在这个过程中，为了更好的区分代码内容，我们可以在开头或者结尾添加注释代码，以提高后期的浏览效率。
而且，在通过div创建框架的同时，我们还可以为其添加相关的类名。 命名方式可以根据自己的习惯来确定，也可以用拼音，只要不重名不相关的div就行。 。 接下来，我们来演示如何为几个模块编写 HTML 标签。
首先看最上面的模块，拆解它的具体内部模块，然后开始做：
然后，我们开始定义下一个模块功能介绍：
那么，我们来说说干货分享模块中单卡是如何定义的：
相信通过以上模块的演示，您应该能够了解如何制定HTML标签的结构。 为了节省空间，我不会添加页脚模块的样式。
我会把基础文件框架放在文件夹下，大家可以自行下载。
CSS 全局预设
完成HTML结构后，我们就要开始创建CSS文档，创建一个style.css样式表文件并将其存放在CSS文件夹中，然后开始在编辑器中添加样式。
通常，我们在CSS中添加的第一个选择器是一个特殊的选择器“*”符号，它代表所有元素。 使用此选择器相当于为所有元素进行样式声明。 我们将在 CSS 标头中添加此选择器以“格式化”标签自己的默认样式。 常用设置如下：
在这个全局预设中，我们分别清除了 、list-style 三个属性的默认值，将所有元素设置为 block 块，可以定义长度和宽度，实现整体元素的左对齐，且宽度和高度自适应。
全局预设并不意味着所有参数元素都是固定的，而是我们为它们预设了一个默认值。 只要在其他选择器中声明了新参数，浏览器就会使用最后设置的声明作为标准。
比如title标签，理论上这个标签不会出现在中，但是在新功能中，有些浏览器被屏蔽后还是会看到它，所以我们还需要添加一条隐藏语句：
然后，我们还可以定义body标签。 我们通常将页面文本上定义的基本属性放在body上而不是完整的选择器上，例如：
这里我们定义了依次显示的字体（英文），平房，雅黑，字体大小为14像素，行高默认为字体大小的1.6倍，字体颜色为黑色，整个内容的背景色区域为白色，宽度与浏览器区域一致，且最小宽度。
全局基本风格的制定与我们的经验有关。 需要预判这个项目哪些是需要提前定的，哪些是不能强调的。 前期可以用和我一样的设置。 接下来我们来拓展一下模块风格的具体制定。 。
顶部样式定义
接下来我们就完成顶部样式的制定。 我们可以发现，顶部导航栏背景的实际区域宽度为960px，高度为60px，并且显示在画布的中央，所以它们的样式：
然后，我们将定义导航栏中的元素，其中包含LOGO和导航按钮文本两部分，因此我们可以使用float属性来表示它们，并使用该属性来增加模块间距。
然后，对导航中的列表文本链接进行特定设置。 其中ul没有什么需要调整的。 我们从li标签开始，设置li为左浮动，设置里面的a标签为100px*60px，等于li的长宽也是100px*60px：
在a标签的样式中，可以注意到属性line-，只要将其设置为与模块相同的高度，就可以实现上下居中的效果，而无需使用top或.
同时，由于a标签是一个矩形模块的全尺寸，我们可以通过hover属性修改其选择效果，使其具有深灰色背景和白色文本。
然后，看样式，是一张会占满整个屏幕的图片，而我们在完成这种效果的时候，一定要考虑浏览器拉伸时图片的效果。 最常见的方法是保持图片的大小和高度不变，左右内容会根据整体浏览宽度的变化隐藏和显示。
然后我们可以像这样定义它们的样式：
这样图片就保持在居中了，而且由于上级div中的值被隐藏了，所以无论我们如何拖动浏览器，图片的大小和位置都会居中。
但由于我们导出的宽度是1280，分辨率为1920宽时两边会出现间隙，所以为了解决这个问题，我们通常会添加另一种背景颜色，以保证显示效果合理。 下面是实际的显示效果。
到这里，页面顶部的布局就基本实现了。
内容风格定义
然后，我们来实现内容区域的样式。 我不会谈论标题。 我们首先关注卡片模块。
卡内部其实有一个内边距，所以我们可以使用属性，而且因为一排有四张卡，而且每张卡之间都有间隙，所以也使用了浮动和属性。
请记住，在这个定义下，我们使用它，它等于我们设置的长度和宽度减去 28px 左右。 如果原来的宽度是232px，我们需要左右总共减去56px，得到176px。
当这个标签的宽度为176px时，当下面的其他div设置为100%宽度时，它们的总宽度只能是176px。
还要注意的是，中间一共有4张牌。 如果我们统一指定它们占用的空间为“宽度”+“右边距”，那么就会有4个卡片宽度和4个右边距，但实际显示效果中只有3个间距。
所以这种情况下，可以使用内联样式的方法来清除第四张卡片的右边距，以保证显示的合理性：
在下面的多文本排列中，我们必须重点关注原始设计稿中的数字字体定义值，包括行高、字体大小和字体粗细。 只要数据一致，我们就可以使用设计稿中的间距来定义magin值。
下面的独家分享模块也是如此。 如果我们要实现3*2的矩阵排列，我们需要为卡片标签设置浮动、右侧和底部边距，并且对于每行的最后一个，我们需要清除其右侧边距。 保证正常显示。
该模块中，底部使用span标签作为父标签，b和i分别代表作者和阅读量。
这里需要注意的是，b和i是作为调整文本样式的标签，不必遵守其原有的样式。 我们可以去掉它的粗体和斜体，并用它们作为不同字段标识的标签。
而且，在阅读量方面，有一个眼睛图标，我们不需要使用img标签来实现。 我们只需要在CSS中添加一个-left来留出一个空白区域，然后用图片填充这个区域。
讲完这个模块，我就不再讲页脚了。
结尾
HTML和CSS的教学到这里就结束了，大家最后的任务就是根据所学知识，充分体会本课的案例。
相信你在实现过程中会遇到很多问题，所以一定要边做边思考，多查CSS手册或者百度来解决问题。
只要能够完全实现本课的案例，那么大家就已经掌握了前端的初级水平，无特殊情况不需要进一步学习。
还是那句话，学习这两种语言其实并不是需要我们在工作中写代码，而是通过了解前端的实现流程和思维逻辑来提高与团队中前端工程师的协作效率，降低沟通成本风格，从而具有更强的专业竞争力。
