HTML + CSS

一、相对定位 元素按照标准流布局，可以通过 top/right/bottom/left 四个位移属性进行定位，定位的参照对象是元素原来自己的位置， top/right/bottom/left 用来设置

一、元素定位-标准流 CSS 布局当中最简单的方式就是定位，定位包含了以下几种定位方式，分别是： 相对定位 固定定位 绝对定位 粘性定位 在学习各种定位之前我们先来了解一下标准流。 默认情况下，元素都

一、CSS Sprite CSS Sprite 即 CSS 精灵图，是一种 CSS 图像合成技术，将各种小的图片合并到一张图片上，然后利用 CSS 的背景定位来显示对应的图片部分。 使用 CSS 精灵

一、字体图标 字体可以设计成各种各样的形状，当然也可以直接将字体设置成图标来使用，这就是字体图标。 字体图标在放大时不会失真，并且可以随意切换颜色，在用到很多个图标时，文件相对图片较小。 阿里icon

一、Web Fonts 在之前的 CSS 属性当中有讲到字体 font-family，该属性可以设置一个或者多个字体名称，渲染时浏览器会在字体列表中寻找，直到找到它运行系统上的可用的字体。 当时系统本

一、border 图形实现 实际开发中 border 属性主要是用来给盒子添加边框的，但是在开发中我们也可以利用边框的一些特性来实现一些形状，比如一些页面中常用到的三角形等。 接下来我们可以使用 bo

一、Emmet 语法 (Emmet)[https://docs.emmet.io/abbreviations/]（前身为 Zen Coding）是一个能大幅度提高前端开发效率的一个工具。 在前端开发过

一、结构伪类 - :nth-of-type() :nth-of-type() 的用法与 :nth-child() 用法类似，不同的是 :nth-of-type() 在计数时只计算同种类型的元素。 创建

一、结构伪类 结构伪类是 CSS3 新设计的选择器，我们在前面的 HTML 表格中也是用到了结构伪类作为选择器来选择列表中的一些项，使用结构伪类我们就不用再去给列表中的项去单独添加 class 属性了

一、select 选项列表 下拉列表也是一种选择类型的元素，下拉列表可以节省网页的空间，默认状态下只显示一个选项，只有在点击下拉按钮的时候才会显示多个选项，比如下面这里选择地址的时候就是使用的下拉列表

一、input 元素实现 radio 单选框 单选框在实际开发中应用非常广泛，比如在选择页面的模式的时候，只能选择一种，如下图所示： input 元素可以实现单选框的效果，结合 lable 元素，只需

一、input 元素实现表单按钮 通过给定 type 不同的值可以使得 input 元素实现表单按钮的效果，具体的 type 值及可实现的按钮的效果如下： 普通按钮(type="button")：使用

一、HTML 表单 HTML 表单是和用户交互最重要的方式之一，很多网站都要使用到表单，比如登录页面就是一个表单： HTML 中常见的表单元素有： form：表单元素，一般情况下，其他表单相关元素都是

一、单元格合并与结构伪类 基本结构搭建与样式设置 跨行合并 第二行的第一列与第三四五行的第一列合并 第七行的第一列与第八九十行的第一列合并 第六行的第一二三四五六列合并 第十一行的第二三四五六列合并

一、表格的单元格合并 在某些特殊的情况下，每个单元格所占据的大小可能并不是固定的，会出现单元格合并的情况，如下图所示： 表格合并分为两种情况，行合并和列合并： 跨列合并：使用 colspan，在最左边

一、HTML 表格元素 在网页中对于某些内容的展示使用表格元素或更加合适，比如 HTML 中编写表格的是 table 元素，该元素中包含 tr(table row) 元素，也就是表格中的行；td(ta

一、列表案例-今日头条 上一节内容中我们已经基本完成了今日头条新闻列表的开发，但关于新闻标题右边的图标都是一样的，通过查看原样式，还有很多其他的图标，因此我们可以尝试使用其他的图标。 其他图标设置 先

一、列表案例-今日头条 上一节中我们已经完成了基本结构的搭建，接下来我们就可以一个个的设置样式了。 设置新闻标题序号的样式 首先来设置新闻标题的序号的样式，可以通过浏览器的检查工具查看原样式有哪些，具

一、无序列表 ul ul(unordered list) 为无序列表，直接子元素只能是 li，li 表示列表中的每一项。 创建一个 HTML 页面，使用无序列表来展示数据，具体 HTML 代码如下：

一、元素的居中方法总结 在前面的案例中多次设置了居中的样式，现在我们可以对各种元素的居中做一个总结，大概可以分为行内级元素居中和块级元素居中两部分。 创建一个 HTML 页面，对该页面中的行内级元素和