此文章我们专门录制了对应的视频教学，传送门：

https://www.bilibili.com/video/BV1ng4y1v75q

接下来，我们开始学习 CSS 样式表有关的知识点，通过 CSS 来控制 HTML 标签和元素的样式的方法和规范。

3.1 CSS样式的语法

CSS 和 HTML 不是同一种代码语言，所以自然语法书写的形式上也有差异。比如下面是一段标准的 CSS 代码，作用是指定 h1 标签内容为红色。

一段 CSS 代码中通常包含两样东西 —— 选择器、声明。选择器就是前面所写的 h1，它是需要控制样式的 “对象”，而每条声明则是声明了一则 CSS 的具体样式调整，通过一对花括号来容纳。

比如上面案例，声明了对颜色的修改，但每条声明中，还包含了属性和值。同理，对一个标签要做多种样式类型的修改，那么我们就可以添加多条声明，比如：

上面我们添加了三条声明，每条声明的结尾由 “;” 分号分隔，一定要记得如果不加分号的话，那么这条声明就没有结束，后续的内容都会无效。

而光看上面这样的写法，肯定觉得特别乱，阅读起来很难受，所以通用的 CSS 代码书写方式，是类似下面这样的，将每条声明独立成一行：

还有一个细节，就是一条声明中，可以为一个属性设置多种值。比如我们在设置字体的时候，使用 font 属性可以同时声明字体、大小、字重等参数，用空格将值分隔开，也可以把它们拆开来声明。

这会在后面有更确切的演示。

3.2 CSS的引用方式

了解完语法，并不是直接就可以开始写 CSS 代码并产生作用了，需要学会 HTML 如何引用 CSS，换句话讲，就是 CSS 代码要写在什么地方。主要有三种形式：

•     外部样式表

•     内部样式表

•     内联样式

3.2.1 外部样式表

外部样式表，就是我们在这个 HTML 文档之外，创建一个 CSS 文档，专门用来存放 CSS 代码。创建它的方式和 HTML 一样，通过创建一个记事本，然后将名称改成 “文档英文名.css” 即可。

而我们要让这两个独立的文档之间产生关联，就需要在 HTML 中引用这个 CSS 样式表。通常，引用样式表的代码会写在 head 标签中，比如：

这种做法的好处是，多个 HTML 文档可以共同读取一个样式表，这样当我们定义一个 CSS 文件后，整个网站的页面都可以共同遵守这个规则，而不是每个 HTML 文档定义一套单独的样式。

和我们在 Sketch、Figma 中使用的外部调用样式文档的原理是一样的。

3.2.2 内部样式表

除了独立一个 CSS 文件外，我们也可以单独在 HTML 文档内添加 CSS 代码块，那就是在页面内添加 style 标签，来开辟一个专门写 CSS 的地方。通常，我们会将内部样式表写在 head 标签内：

在我们的学习过程中主要采取这个方式来添加 CSS 代码，它的好处是添加起来在同一个文档内方便，但是每次只作用一个 HTML 文档，不能重复应用。

3.2.3 内联样式

内联样式，也叫行内样式，是一个将样式直接写进 HTML 标签中的做法，用来比较针对性的控制某个标签的样式。

使用的方法是在标签中添加 style 属性，然后在里面添加声明：

3.2.4 声明的优先级顺序

提前了解一个概念，这三种引用方法，可以单独使用，也可以共同使用，而在共同使用的时候，它们的优先级是有区别的。

内联样式 > 内部样式表 > 外部样式表

也就是你在三种模式下都声明了 h1 标签的不同颜色，那么最后显示以内联样式的为准。优先级在实际操作中有很重要的地位，在后续的操作里也会有说明。

3.3 选择器的具体认识

选择器是让 CSS 定位到具体的某个或某些元素，来修改它们的样式，是我们开始编写具体样式代码前要优先确保正确的地方，常见选择器包含：

•    标签选择器

•    Class、id 选择器

•    伪类、伪元素

3.3.1 标签选择器

前面案例中应用的选择器，都是以标签为对象的，假设我们把选择器定义成 p 标签，那么整个页面中所有的 p 标签都会共同受到影响。

3.3.2 Class、Id选择器

当我们不想同一标签样式完全保持一致的时候，于是就用到了 Class 和 id 选择器。区别是，class “类选择器” 是复数选择器，可以作用在多个标签上，而 id 则是单数选择器，只作用在一个标签上，学习中主要采用 class 选择器。

使用方式是首先在标签中添加class属性，然后在样式表中使用这个选择器，并声明样式即可：

在 class 内给的值 “iam_class ”就是它的名字，这个名字由我们自己定义，但需要了解几个主要限制：

•    只能使用英文数字

•    首字符不能是数字

•    不能和HTML标签名重复

•    除了下划线_不要使用其他符号

我们还可以指定特定的标签来实现类的功能，即 ”标签“ + ”.“ + ”类名“，即可完成选择，大家可以输入下方案例查看效果：

同时在标签中的 class，也可以添加多个命名，通过空格来分隔，那么它就可以应用两个 css 中类的样式了。

具体的应用原因和方法在后续的案例中有机会我们也会进行说明的。

3.3.2 伪类/元素

除了普通的类作为选择器，CSS 中还为类本身提供了一个特殊的概念 —— ”伪类/元素“，简单说起来，就是将对象不同的状态直接通过伪类进行选择。

比如，一个正常的链接，它包含了四种状态：未访问 link、已访问 visited、鼠标悬停 hover、点击 active ，我们就可以通过伪类来控制。

在下方案例，链接默认是黑色，鼠标悬停到上方的时候，就切换成 “red” 颜色：

伪类/元素，就是 CSS 中默认帮我们确定好的一些标签的状态，或者内部元素的一些范围，我们无需再写一个 class 命名出来，直接使用伪类/元素即可。

我们最常使用的就是对链接不同状态的声明，如果想要了解还有什么其它可以使用的内容，可以参考 CSS 手册。

3.4 CSS的盒模型

CSS 的盒模型 （box model），是实现元素排版布局的核心概念，下图就是盒模型的标准示意图：

里面标注的英文都是 CSS 可以声明的属性，我们分别解释一下：

Margin：外边距，可以撑开元素和其它元素的距离

Border：描边，约等于我们设计软件中的描边边框

Padding：内边距，从描边到元素制定的空白区域

光这么看大家肯定会觉得很难理解，我们拿个 UI 中的案例举例：

接下来，我们可以添加下列的代码，看看三个属性的对应使用情况，其中为了便于大家的理解，将内容区域背景设置成灰色，并且应用 flot 左对齐的声明（确保 margin 生效，后面再介绍这个属性）：

3.4.1 margin属性

Margin 属性是外边距，可以通过设置具体像素数来指定外边距的距离，但是，外边距也可以针对上下左右独立进行定义，它包含四个下级属性：margin-top、margin-right、marign-bottom、margin-left，对应上右下左。

我们可以单独使用这些属性来做声明，但是更简便的方法是，我们可以在 margin 一个属性中设置 4 个数值来完成不同外边距的设置，比如下面：

这四个数字就依次对应上、右、下、左四个方向，如果只设置两个数字，则对应上下、左右，三个数字则对应上、左右、下。大家可以自己再前面的代码中尝试一下，我就不具体演示了。

但是，margin 除了设置数值以外，还有个很重要的值，就是 ”auto“，它是让浏览器自己计算边距的数值，也是自适应布局里非常重要的参数，帮助元素实现居中的效果。

3.4.2 border属性

border 属性，除了一次性设置4个方向以外，也可以通过 border-top / right / bottom / left 四个方向进行独立控制。

但同学们应该发现了，它不止有设置数字而已，是因为它还有三个可以独立设置的属性：

border-color：描边的色彩，可以用特殊的色彩英文名也可以用16进制色。

border-width：描边的宽度，可以用数字和像素单位表示。

border-style：描边的风格，常用的有 solid（实线）、dotted（点）、dashed（虚线）。

我们只要将三个值分别填入属性内就可以做出定义，如果想要单独设置一个列表底部的分割虚线：

3.4.3 padding属性

padding 作为内间距，定义起来和 margin 是完全一样的，包括上右下左的定义。

它在正常效果下和 margin 效果非常接近，而我们需要注意的是在元素的实际实现过程中尽量根据实际的情形来使用，而不是无差别对待 margin 和 padding。

3.5 标签尺寸的认识

接下来，我们就要讲讲有关页面展示中，宽高的定义方式了。在 CSS 属性中，是提供了 wight、height 两个属性的，用来定义标签的宽和高尺寸。

比如我们可以定义一个 div 的宽高都是 100px，用属性 width 和 height 表示：

这是我们手动设置的一个 “固定尺寸”，但是，在 HTML 页面布局中，还有一个重要的概念 —— “自适应尺寸”。即一开始我们没办法确定它的宽或高是多少，于是采取根据内容进行伸缩的操作。

比如，在新闻详情页面的正文区域，不同文章的高度是不一样的，我们不可能一开始直接指定一个固定的高，所以，我们会将高度设置成 auto，那么这个标签的高度就会根据内容进行拉伸，比如：

在这个基础上，如果我们设置了padding为10，border为5，那么增加的数值会计算到这个元素本身的尺寸以内，p实际的尺寸就会变为：

宽 = 默认宽+ padding左/右 + border左/右

高 = 文字总高 + padding左/右+border左/右

而 magrin，只是元素外部的间距，无论我们设置了什么数值，它都对元素本身的尺寸没有影响。

通过内部元素的大小影响标签的实际尺寸，再影响标签的父级尺寸，是 CSS 排版布局中的常用方式，也是主要难点之一。

还有个抽象的概念，就是 CSS 的宽和高， 只对有 ”块“ 化的元素产生作用，比如 a 标签就无法直接通过 height、width 设置尺寸，这是一个很难简单解释清楚的问题。

所以，为了解决尺寸没有根据我们预想的方式展示出来，我们可以用一个比较通用的方式，就是通过添加 ” display:block; “ 这段声明，将标签固定转化成块。这可以帮助我们在实际的操作中避免非常多不必要的错误。

这一节中，我们来讲讲 CSS 的具体应用细则，也就是 CSS 的属性。

CSS 包含了非常多的属性和规则，学习 CSS 就是学习这些属性的用法，本篇内容中我们会挑选出最常用的属性做说明。

4.1 文字相关属性

4.1.1 文本属性

在 CSS 中，文本指的是标签中的文字内容，我们可以控制一些特定的文本属性，常用的包含：

color：标签中的文本颜色，使用颜色名或 #212131 这样的编码

line-height：每行文本的高度，用像素单位设置

text-align：文本的对齐属性，包含 left、right、center（居中）

text-decoration：文本的修饰内容，包含 none、underline（下划线）、line-through（删除线） 等设置

word-spacing：字间距，用像素单位设置

这里就不每个属性都演示一次了，大家可以自己动手试试。我们主要关注 text-align 这个属性。

text-align 这个属性有向下继承的特性，即我们在父标签中定义了对齐方向，那么子标签也会遵守这个方向。

4.1.2 字体属性

在 CSS 中，字体属性和本文属性时分开的，这是很容易搞混的东西。字体属性用的是 font 属性，而在 font 下还包含若干常用的属性：

font-family: 设置文字的字体

font-size：文字的字号，用像素表示

font-style：字体风格，包含 normal（默认）、italic（斜体）、oblique（倾斜）

font-weight：字体的字重，可以用数字也可以字体自带字种

在字体设置的规则上，并不是我们想怎么设置都可以，而是考虑用户有什么字体。

因为浏览器对文字的渲染是通过用户本地的字库来完成的，这也是为什么我们设计 UI 和网页的时候不能随心所欲用字体的原因之一。

在中文界面中，通常我们不用去设置中文字体，但可以为英文或数字文本设置一些常见的英文字体，例如 “Arial”，“Futura” 等。

并且可以设置多个字体，通过逗号隔开，如果第一个字体用户没有，那么会自动替换成下一个字体。

4.1.3  列表属性

列表在实际应用中非常的普遍，CSS 有专门针对列表的属性设置，即 list-style 属性，它还包含下面一些属性类型：

list-style-image：列表项符号替换成图片的设置；

list-style-postion：列表项符号图片所处的位置；

list-style-type：列表项符号的类型，包含none、disc（实心圆）、circle（空心圆）、suqare（方形）、decimal（数字）等；

list-style 这个属性只能作用在 ul、ol、li 标签管用，对其它标签无效。对于列表项的图像设置我们先撇开不谈，我们设置最多的数值就是采用 none，否则浏览器会自带列表项符号（很丑）。

4.2 背景设置

前面为了展示模块实际区域，我们应用过很多次 background 属性来定义背景色，相信大家已经有所了解。但是，background 的作用可不仅仅只是定义背景色而已，它包含：

background-color：定义背景色的属性

background-image：定义背景图片的属性，使用 “url ( img/logo.png )”  的方法

background-position：定义背景图片的x、y轴距离标签左上角的距离

backgorund-repeat：定义图片重复的规则

背景色我们已经知道，关键就在背景图的使用上。比如淘宝中包含了各种酷炫的图片，虽然多数图片是内容图，但是，也有少部分图片是网站本来的基础设计内容之一，也就是——切图。

比如在上图案例中，右上角个人头像卡片的底图，就是页面切图元素，这种图片的引用，并不是通过 image 标签来完成的，而是通过设置 background 属性来完成。

换句话说，我们通过长宽制定了一个矩形区域，然后对这个矩形区域采取类似 Sketch 填充中的图片填充

而如果填充图片本身的尺寸和定义的矩形尺寸不同，我们就可以通过 background-postion 属性来设置它的位置，可以是指定 x y 轴距离，也可以使用居中的方法：

除了直接定义一张完整的图片外，background 还有个特别有用的设置，就是重复属性。比如我们要定义一个整屏宽的背景，要使用渐变色，那么我们就可以调用一个1像素宽的图片背景，然后让它水平方向平铺：

在正常情况下，background 属性是默认 x、y 轴都有 repeat 的平铺效果，所以如果不想出现重复，就可以添加 no-repeat 值。

背景属性的应用，就是我们网站设计稿切图进行实现的具体步骤之一，和设计师有密切的关联，值得大家更深入的去认识。

4.3 排版定位的属性

如果我们通过浏览器的检查功能去查看界面的框架，就会发现实际上一个完整的网页是由无数矩形拼接起来的，我在自己的教学中为了方便大家理解称其为 —— 矩阵视图。

要把这些矩形框架合理搭建起来，就需要应用到定位相关的属性，来控制它们的顺序和位置，主要应用到的属性包含下面几个：

position：定位类型设置，主要有 static（默认）、 relative（相对定位）、absoulte（绝对定位）、fixed（固定定位） 属性。

z-index：页面的 z 轴层级设置，用数字表示序列。

float：元素的浮动定位设置，可以设置 left、right。

clear：清除浮动元素的属性，包含 left、right、both、none。

top/left/right/bottom：上左右下方向的偏移距离设置。

4.3.1 定位类型

我们主要在 postion 中会使用的几种定位类型，是绝对能把新手绕晕的内容，先简单介绍一下：

position:static  是定位的默认值，也就是没有定位

position:relative 相对定位，对于该元素原本的位置进行定位

position:absolute 绝对位置，对于上一级父元素的位置进行定位

position:fixed 固定定位，是对于浏览器画布区域进行定位

这么简单的解释大家肯定已经被绕晕了，所以我们换个角度，有过一定 AE 基础的同学一定都知道，一个元素的坐标轴数值，完全是由其 ”中心点“ 来确定，但是这个中心点并不是只固定在画布左上定点 （fixed），有可能是画布中任意一点（relative），也可能是关联了上级图层（absolute）。

不同中心点制定逻辑，就会造成不同的元素运动效果，但这和网页布局有什么关系？

确实在一个固定了宽高的页面中，定位没太多使用的必要，但是，有 ”响应式“ 布局的概念，我们可以拖动浏览器大小修改画布尺寸，以及类似苹果详情页这种喜欢使用大量动效的骚操作，这些都是 ”运动“ 的过程。

于是我们就必须采取定位的措施，确保元素的显示正常……

应用 static 以外的定位类型以后，z-index、top/left/right/bottom 等其它属性才能生效，这四个位置属性只是设置相对 “中心点” 的移动方向，但是 z-index 就比较有趣了。

它可以制定元素间堆叠的顺序，因为当我们使用特殊的定位类型以后，元素之间就可以相交，比如我们在 Sketch 中添加了很多图层，这些图层也能相交，但上方的图层会覆盖下方的图层，包括上面的苹果官网案例也是，安卓 MD 规范中也有应用。

Z-index 就是就是由正常的数字序号决定优先级，它可以是正数，也可以是负数（负数就处于页面水平层下方，优先级比正常标签更低）。

4.3.2 浮动元素

讲完定位方式，然后我们就要聊聊浮动属性 float 了。大家可以放心，它可没有前面的 Position 属性复杂（但也没简单到哪里去啊）。

对于网页标签来说，多数标签（具有 block 特性的）有独占一行的特征，即使它的宽度并不是100%，但它们也不会允许别的标签和自己并列，大家可以自己输入两个 h1 标签，看看它们是不是有了 “换行效果”。

而 float 属性的主要作用，就是让它们可以根据某个方向进行对齐，并且不会再排斥有别的元素和自己出现在同一行中。

比如 @花瓣中这种常见的卡片列表，我们就可以通过 float 属性来轻易实现。

而 clear 属性，则是用来清除特定方向浮动元素的属性，指定左右 left、right，或者两侧 both 都清除浮动元素。

我就不做具体演示了，这个属性妙用无穷，感兴趣的同学可以自己搜索相关的细节分享。

4.4 动画相关设置

4.4.1 过渡效果

动效在 web 2.0 以后的需求越来越强，尤其是对于交互的反馈表现，在过去，我们只能依托 JS 来实现操作的动效，但在更新到了 CSS3 以后，就为我们提供了直接操控动效的属性 —— transition。它包含了 4 个下级属性，分别是：

transition-property：需要过渡的 CSS 名称，填写属性名

transition-duration：动画执行的时长，填写秒数即可

transition-timing-function：动画缓动设置，如 ease-in、ease-out 等

transition-delay：动画延迟设置，填写秒数即可

看一个鼠标悬浮在按钮上，背景色在2秒从灰色过渡成红色的代码案例：

默认和 hover 相当于制定了两个关键帧，而我们把需要制作成补间动画的参数在起始帧（div选择器）进行声明，那么动画效果就可以实现。

当然，这个效果还可以包含宽、高、字号、边框、角度等其它属性。一条 transition 属性中可以声明多个需要执行过度动画的元素和对应参数，用逗号隔开：

在设置缓动效果上，transition 除了默认自带的几种标准缓动外，还支持创建贝塞尔曲线的函数，其输入格式为 —— cubic-bezier(n,n,n,n)，在很多动效软件中都有提供该数值方便我们直接输入。

4.4.2 动画属性

前面的过度，是通过 hover 的定制来实现两个关键帧之间的补间。但是，部分情况下我们也会希望什么操作也不做，元素自己会执行动画事件，或者出现更多的关键帧。

于是，就引入了 animation 属性，它主要包含下面几种下级属性：

animation-name：定义动画事件名

animation-duration：动画完成时间

animation-timing-function：动画的缓动效果

animation-iteration-count：动画的播放次数，可是是指定数字，也可以是 infinte （无限）

然后我们会用一个专门的动画控制指令 @keyframes 来对动画实现具体的定义，可以看看下面的代码案例：

也就是说，我们对一个需要发生动画的标签进行 animation 的设置，先声明一个动画事件的名称和执行规则，然后通过 @keyframes 来关联这个动画，并具体定义动画关键帧的开始和结束属性值。

上方案例的 from 和 to，就是起始关键帧和结束关键帧的属性值，补间的内容会自动生成。但除了只设置这两个帧以外，@keyframes 也允许我们设置一些更具体的关键帧出来，通过使用 % 的形式来制定时间线上的关键帧，比如：

这就等于在这两秒中，我们关键帧制定在了 0秒、0.5秒、1秒、1.5秒、2秒 上，补间动画就会根据这些关键帧开始执行，这就可以帮助我们制作出丰富多样的动画。

4.5 其他常用样式属性

复杂的东西告一段落，最后再整理一些基本的内容，让大家缓缓。

4.5.1 色彩设置原理

前面我们使用的 color、background-color 等属性，都是用来指定色彩的属性。但是设置色彩本身，不仅仅只是 16 进制色或者已经给出的颜色命名，还包括可以使用 RGB 和 RGBA 色值。

RGB设置：color: rgb(255,255,0);   复制软件中rgb参数到小括号内即可

RGBA设置：color: rgba(255,255,0,0.5); 在rgb后面增加了一个透明度，0.0 是完全透明，1是不透明

4.5.2 边框其它属性

boder 除了我们看到的描边设置外，还可以用来控制元素圆角的大小，虽然字面理解起来它们关联不是太大，但是 CSS3 中提供了 boder-radius 属性定义元素的四个边角，除了它本身外还包含下级：

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

我们可以通过增加对应的像素数值，来实现圆角矩形的效果，尤其在按钮的实现中。例如：

除了圆角，同属于这个类型的属性中还有一个阴影的属性，那就是 box-shadow 属性。它的设置和 XD 以及 Sketch 的阴影设置是一样的，下方案例分别是阴影的 X轴距、Y轴距离、BLUR模糊值、色彩：

4.5.3 元素透明度设置

CSS 中提供了一个 Opacity 属性专门用来控制元素的透明度，透明度的值和 RGBA 的使用方法一致，并且，这个透明度会影响下级元素，相当于我们为 Sketch 中制作的编组设置了透明度。

4.5.4 盒子属性

在页面的展示中，经常要实现一个遮罩的效果，那么我们就会用到 overflow 盒子属性，这个属性主要用来对标签内的元素状态做应对，比如下面这些设置：

hidden：元素内容超出标签盒子大小，那么就被隐藏（裁切）

scroll：为这个标签盒子提供内部滚动条的机制

auto：如果内容超出标签盒子的大小，那么自动增加内部的滚动条

4.5.5 长宽的具体设置

之前的演示我们应该都知道了，元素尺寸中宽和高的具体设置属性是 width 和 heigh，但是这两个属性的设置除了使用数值外，同时还可以设置百分比，比如：

这样子，这个 div 的宽就是整个浏览器视图区域的 50% 宽，我们变更浏览器宽度的时候，它的宽也会一起变更。也就是说，百分比设置，是根据它的上层标签宽来决定的，50%的宽即上级标签实际尺寸宽度的一半。

除了百分比外，宽和高都提供了一个最小和最大值的设定，即 min-width、max-width、min-height、max-height，它可以限定标签的长宽在一个特定的范围中。

比如上方的设置中，就是基于浏览器视图50%的情况下，最大的尺寸只到 300px，就不会再超出了。min和max两个设置也是自适应中的重要环节。

写了那么多 HTML CSS 的学习，终于，要在这篇迎来具体的案例应用了。下面，就是本节课要演示的案例图，我们要通过 HTML 和 CSS 将它实现出来：

不过用图文的方式是没法完整的讲解一遍这个页面的实现过程的，只能尽可能包含我们编写的顺序和重点，需要大家参考视频教程，以及下载我们的案例源文件进行研究，才能更好的掌握有关知识。

5.1 HTML样式的语法

在完成设计稿以后，我们着手项目的前端界面布局，首先要先建立项目有关的文件夹，然后在这个文件夹根目录中创建 ”index.html“ 文档，再创建 img、css 两个文件夹，用来存放对应文件。

然后，通过编辑器打开 index.html，优先完成页面的标签结构创建，即预判页面中包含哪些标签，以及相应的层级结构（即文档对象模型 DOM），将它们码下来。

那么什么是 HTML 的代码结构呢，前面我们有略微提及，下面用一个树状图来理解 HTML 文档中的结构：

这么做的目的，是为了先集中精力建立一个清晰的 HTML 文档，帮助我们后续在进行样式调整的时候可以更便捷，而不用一边写 HTML 又同时调整 CSS，这样效率会非常低下。

所以，下面就可以开始动手了，优先将我们前文所说的 HTML 文档标准结构填充进去，同时在 head 中添加引用外部 CSS 文件的链接。

然后我们就要在 body 标签内，添加有关的内容框架的 div 标签了，为了展示直观，下方的标签处于 body 标签内，标准文档信息我就不展示出来了。

简单描述一下上面的结构，就是我们将页面分为三个大的模块，并在每个大模块又拆分成两个子模块，用文字解释起来如下：

•    页面顶部区域：导航栏、广告图

•    页面内容区域：特点介绍、分享干货

•    页脚内容区域：站点信息、备案号

在这个过程中，为了比较好的区分代码内容，我们可以通过在开头或结尾添加 <!–注释区域–> 注释代码，提升之后的浏览效率。

并且，在通过 div 创建框架的同时，我们可以为它增加有关的 class 命名，命名的方法大家可以根据自己的习惯定，用拼音也可以，只要没有在不相关的 div 中应用到相同名称即可。下面，开始具体演示几个模块 HTML 标签的编写方式。

首先看顶部模块，对它具体的内部模块做一次拆解，然后再开始动手：

然后，我们再开始定义下一个模块特点介绍：

然后，我们再讲讲在干货分享模块中，单个卡片定义的方式：

相信通过上面几个模块的演示，大家应该能了解如何制定 HTML 标签的结构了吧，节省篇幅，页脚模块的样式我就不添加了。

我会将基础的文件框架放在素材文件夹中，大家在公众号回复 ”前端“ 即可获取。

5.2 CSS全局预设

完成了 HTML 的结构，我们就要开始创建 CSS 文档了，创建一个 style.css 样式表文件存储到 CSS 文件夹中，然后就可以在编辑器中开始添加样式了。

通常，我们在 CSS 中添加的第一个选择器，是一个特殊的选择器 ” * “ 符号，它代表了所有元素，使用这个选择器，就等于对所有元素进行了样式声明。我们会再 CSS 头部添加这个选择器，对标签的自带默认样式进行 ”格式化“，常见的设置如下：

在这个全局预设中，我们分别清除了 margin、padding、list-style 三个属性的默认数值，将所有元素设置成 block 块化，可以进行长宽的定义，以及实现整体元素左对齐，宽高自适应。

全局预设的并不代表所有参数的元素被定死了，只是我们给它们先预设了一个默认数值，只要在后续其它选择器中声明新的参数，那么浏览器最会按最后设置的声明作为标准。

比如title标签，理论上这个标签是不会出现在画布中的，但在新的特性中有些浏览器在它 block 了以后就会看见，所以我们还要添加一条隐藏声明：

然后，我们还可以对 body 标签进行定义，我们通常会将对页面文字定义的基本属性放在 body 上而不是全选择器上，比如：

这里面，我们定义了字体依次显示 helvetica （英文）、苹方、雅黑，字号使用14像素，行高默认为字号的 1.6 倍，字色为黑，整个内容区域背景色为白色，宽度和浏览器区域一致，以及最小宽度。

全局基本样式的制定，和我们的经验有关，预判这个项目中哪些需要提前设置，哪些是可以不用强调的，初期大家可以使用和我一样的设置，下面，就要展开模块样式的具体制定了。

5.3 顶部样式定义

接着，我们来完成顶部样式的制定。我们可以发现，顶部的导航栏背景实际区域的尺寸宽是 960px，高是 60px，并在画布中居中显示，那么它们的样式：

然后，我们就要定义导航栏内的元素了，包含两个部分内容，LOGO 和导航按钮文字，所以我们可以使用 float 属性来表现它们，并使用 margin 属性来增加模块间距。

然后，为导航内的列表文字链接做具体的设置。其中 ul 没啥可以做调整的，我们直接从 li 标签开始定义，将 li 设置成左浮动，并将内部的 a 标签设置成 100px*60px，等于 li 的长宽也是 100px*60px：

在 a 标签的样式中，可以注意到 line-height 这个属性，只要将它设置成模块一样的高度，就可以实现上下居中的效果，而不用使用顶部 margin 或 padding。

同时，因为 a 标签呈一个矩形模块的完整尺寸，我们就可以通过 hover 属性修改它的选中效果为背景深灰色，文字白色。

接着，看看 banner 的样式，它是一个会撑满全屏的图片，而我们完成这类效果，就一定要考虑到图片在浏览器进行伸缩时的效果。最常见的做法，就是保持图片大小不变，高度不变，左右的内容根据局浏览宽度的变动而隐藏、显示。

那么我们可以这么定义它们的样式：

这样，保持图片居中的位置，并因为上级 div 中 overflow 的值为隐藏，所以无论我们怎么拖动浏览器，图片的尺寸和位置都会居中。

但因为，我们导出的1280的宽，在分辨率 1920 宽的情况下两侧就有缺口，所以为了解决这样的问题我们通常会再添加一个背景色，保证显示的效果的合理，下方是实际显示效果。

在这里，页面上方的布局也就基本实现。

5.4 内容样式定义

然后，我们再来实现内容区域的样式，标题这些我就不说了，我们先重点讲讲卡片模块。

卡片内部实际上有内边距的存在，所以我们可以使用 padding 属性，同时因为一行有四个卡片，每个卡片间有间距，所以也要使用 float 和 margin 属性。

要记住在这个定义下，我们使用了 padding，那就等于我们设置的长宽要减去四周的 28px，如果原来是 232px 宽，就要减左右总共 56px 的尺寸，得到 176px。

当这个标签的宽为 176px ，那么下方的其它 div 设置 100% 宽度时，它们的总宽也就只能是 176px。

还要注意的是，中间的卡片总共有4个，如果我们统一制定它们占用的空间是”宽“+”右边距“，那么就会有4个卡片宽和4个右边距，但实际显示效果中只有3个间距。

所以这种情况就可以使用行内样式的方法将第四个卡片的右边距清零，保证显示的合理性：

在下方的多文本排列中，一定要重点关注原设计稿中的数值字体定义数值，包括行高、字号、字重，只要数据一致，我们就完全可以使用设计稿中的间距来定义 magin 数值。

往下的独家分享模块同理，我们要实现 3*2 的矩阵排列，就要为卡片标签设置浮动和右边距、下边距，而每一行的最后一个，我们都要清除它的右边距，才能保证的显示的正常。

在这个模块中，底部用了一个 span 标签做父标签，b、i  分别表示作者和阅读量。

这里要注意的是，b 和 i 作为调整文本样式的标签，并不是一定要遵守它原先的样式的，我们可以将它的加粗和倾斜去掉，作为不同字段标识用的标签。

并且，在阅读量上，有一个眼睛图标，我们也并不需要使用 img 标签去实现，只要在 CSS 中增加一个 padding-left，留出空白区域，然后用 background 的图片填充这个区域即可。

讲完这个模块，页脚我就也不再啰嗦下去了，大家可以自己在我们提供的源文件中查看对应的设置和属性即可。

HTML 和 CSS 的教学到这里就告一段落了，大家最后的任务，就是根据所学的内容，将本节课的案例完整的实现出来即可。

相信在实现的过程里大家肯定会碰到不少问题，所以一定要一边做一边思考，一边查看 CSS 手册或百度解决问题。相关的素材和已经完整实现好的案例在公众号中回复 ”前端“ 即可获取。

只要能把这节课案例完整实现出来，那么大家就已经掌握了前端的初级水平，没有特殊的情况也就不再需要深入学习下去了。

再提一次，学习这两门语言，并不是真的需要我们工作中写代码，而是通过了解前端样式的实现过程和思考逻辑，提升在团队中和前端工程师的协作效率，降低沟通成本，从而具备更强的职业竞争力。

写真正有用的干货不容易，如果觉得对你有帮助，那别忘记点下方的 ”在看“ 和分享！

我们下篇内容再贱！

Powered by Froala Editor