任务9.5 应用HTML与CSS_信息技术基础与应用（下册）-QQ阅读男生科幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

任务9.5　应用HTML与CSS

9.5.1　任务要点

任务要点如下。

♦ 启动与退出Dreamweaver CS6。

♦ 应用HTML（Hyper Text Markup Language，超文本标记语言）标签。

♦ 应用CSS（Cascading Style Sheets，层叠样式表）。

9.5.2　知识准备

9.5.2.1　网站与网页的基本概念

1. 网站（Website）

网站是指在互联网上根据一定的规则，使用HTML等工具制作并用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具。人们可以通过它发布需要公开的资讯或者提供相关的网络服务，也可以获取需要的信息或者享受网络服务。

网站是在互联网上拥有域名或地址并提供一定网络服务的主机，是存储文件的空间，以服务器为载体。人们可通过浏览器等访问、查找文件，也可通过远程文件传输（FTP）方式上传或下载网站文件。

2. 网页

网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的。如果一个网站只有域名和虚拟主机而没有任何网页，那么客户仍旧无法访问该网站。

网页是一个包含HTML标签的纯文本文件，可以存放在世界某个角落的某一台计算机中。它是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为“.html”或“.htm”）。网页通常用图像档来提供图画，并且要通过网页浏览器来阅读，常用的浏览器有微软公司的IE（Internet Explorer）、Google公司的Chrome、Mozilla公司的Firefox等。

9.5.2.2　网页开发工具Dreamweaver CS6

Dreamweaver是美国Adobe公司推出的一款专业的网页编辑软件，集网页制作和网站管理于一体。它提供了网页的可视化编辑和HTML代码编辑两种操作界面，能够有效地开发和维护基于Web标准的网站和应用程序，是网页制作者的首选。

启动Dreamweaver后，默认情况下将进入起始页。选择“文件”→“新建”→“HTML”命令，弹出“新建文档”对话框，如图9-112所示。

图9-112　“新建文档”对话框

单击“创建”按钮，弹出Dreamweaver CS6主窗口，如图9-113所示。

图9-113　Dreamweaver CS6主窗口

1. 应用程序栏

应用程序栏位于工作区顶部，左侧包括常用功能区和菜单栏，右侧包括工作区切换器和程序窗口控制按钮。

菜单栏集中了Dreamweaver CS6的操作命令，利用这些命令可以编辑网页、管理站点及设置操作界面等。要执行某个命令，可单击主菜单项打开其下拉菜单，然后选择相应的命令即可。

2. 文档标签栏

文档标签栏如图9-114所示。

图9-114　文档标签栏

该栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径，以及还原按钮；下方显示当前文档中包含的文档（如CSS文档）及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换；另外，单击下方的包含文档或链接文档可打开相应文档。

3. 文档工具栏

利用文档工具栏中左侧的按钮可以在文档的不同视图之间快速切换，该工具栏如图9-115所示。

图9-115　文档工具栏

其中还包含一些与查看文档、在本地和远程站点间传输文档相关的常用命令和选项。

4. 状态栏

状态栏位于窗口底部，其中提供了与当前文档相关的一些信息。

5. “插入”面板

“插入”面板包含用于创建和插入对象（如表格、图像和链接）的按钮，这些按钮按类别组织，默认为“常用”类别。也可以单击其右侧的下拉按钮，从弹出的下拉列表中选择其他类别。该面板如图9-116所示。

图9-116　“插入”面板

例如，要在页面中插入图像。首先定位插入点，然后单击“插入”面板“常用”类别中的“图像”按钮。

6. “文件”和“CSS样式”面板

“文件”面板用于管理站点中的所有文件和文件夹，包括素材文件和网页文件，如图9-117所示。

使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等，如图9-118所示。

图9-117　“文件”面板

图9-118　“CSS样式”面板

7. 设置工作环境参数

利用“首选参数”对话框可以修改Dreamweaver的系统参数，选择菜单栏中的“编辑”→“首选参数”命令或按组合键“Ctrl+U”可打开该对话框，如图9-119所示。

图9-119　“首选参数”对话框

9.5.2.3　HTML基础知识

HTML是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言，被用来结构化信息。例如，标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。

1. HTML文档结构

打开Dreamweaver CS6，新建一个HTML文件。切换到代码视图模式，可以看如图9-120所示的代码结构。

图9-120　代码结构

说明如下。

（1）<!DOCTYPE html>为文档的声明，当前文件是一个html文档。遵循的是html 5标准，目前所有新的网站都是该标准。文档声明标签一定要有，不能省略。

（2）无论是动态还是静态页面都以“<html>”开始，然后在页面最后以“</html>”结尾。

（3）“<html>”后是“<head>”页头，“<head></head>”中的内容在浏览器中无法显示，这是给服务器、浏览器、链接外部JS、a链接CSS样式等的区域。“<title></title>”中放置的是网页标题，可在浏览器的左上角看见。

（4）“<body></body>”，即常说的“body区”，其中的内容可以通过浏览器呈现给用户。可以是table表格布局格式或div（div是层叠样式表中的定位技术，全称为“division”。即划分。有时可以称其为“图层”。）布局的内容，也可以直接是文字。这里是最主要区域，即网页的内容呈现区。

（5）以“</html>”结尾，即网页闭合。

（6）HTML标签代表整个文档结构，它只嵌套head标签和body标签。

需要注意的是网页一般根据xhtml标准要求每个标签闭合，如以<html>开始，以</html>闭合。如果没有闭合，如“<meta name=＂关键字＂ content=＂关键字＂/>”没有</meta>，就要以<meta内容….．/>来完成闭合。

此外，网页为了让搜索引擎检索到，我们会在<head>部分加入“<meta name=＂keywords＂ content=＂关键字＂ /> <meta name=＂description＂ content=＂本页描述或关键字描述＂ /> ”标签。这两个标签中的内容是给搜索引擎看的,说明本页关键字及主要内容等，SEO（Search Engine Optimization，搜索引擎优化）可以用到。

2. HTML标签

HTML标签分为页面结构标签、常用标签、格式化标签、列表标签、表格相关标签、表单相关标签、框架相关标签和容器标签等。

（1）HTML页面结构标签如表9-17所示。

表9-17　HTML页面结构标签

（2）HTML常用标签如表9-18所示。

表9-18　HTML常用标签

（续表）

（3）HTML格式化标签如表9-19所示。

表9-19　HTML格式化标签

（4）HTML列表标签如表9-20所示。

表9-20　HTML列表标签

（5）HTML表格相关标签如表9-21所示。

表9-21　HTML表格相关标签

（6）HTML表单相关标签如表9-22所示。

表9-22　HTML表单相关标签

（7）HTML框架相关标签如表9-23所示。

表9-23　HTML框架相关标签

（8）HTML容器标签如表9-24所示。

表9-24　HTML容器标签

（9）mate标签补充说明。

代码<meta http-equiv="X-UA-Compatible" content="IE=edge" />表示如果是用IE浏览器打开的当前页面，那么使用最新的IE浏览器版本打开此页面。

SEO是一种通过分析搜索引擎的排名规律了解各种搜索引擎怎样搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，以吸引更多的用户访问网站；同时提高网站的访问量，以及销售能力和宣传能力，从而提升网站的品牌效应。

网站搜索引擎优化任务主要是认识与了解其他搜索引擎怎样紧抓网页、怎样索引、怎样确定搜索关键词等相关技术后以此优化本网页内容，确保其能够与用户浏览习惯相符合。并且在不影响网民体验前提下使其搜索引擎排名得以提升，进而使该网站访问量得以提升，最终提高本网站的宣传能力或者销售能力。基于搜索引擎的优化处理其实就是为让搜索引擎更易接受本网站，搜索引擎往往会比对不同网站的内容，然后通过浏览器把内容以最完整、直接及最快的速度提供给网络用户。例如，一个关于信息技术学习网页的SEO优化设置的代码如下。

base标签可以让当前页面中的所有的a标签都拥有相同的属性，如target属性，代码如下。

（10）应用举例。

打开Dreamweaver CS6，新建一个HTML文件。切换到代码视图模式，输入前面举例所用的如下代码。

运行结果如图9-121所示。

图9-121　运行结果

3. HTML标签的常用属性

HTML标签需要与之对应的属性配合使用，常用属性如表9-25所示。

表9-25　HTML标签的常用属性

（续表）

打开Dreamweaver CS6，新建一个HTML文件。切换到代码视图模式，输入前面示例所用的如下代码。

运行结果如图9-122所示。

图9-122　运行结果

9.5.2.4　CSS基础知识

CSS通常称为“CSS样式表”或“层叠样式表”，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等），以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能。例如，字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。CSS控制页面布局和样式，可以让结构（html）与表现（CSS）分离，方便维护。

1. CSS基础语法

CSS语法由3个部分构成，即选择器、属性名和属性值，格式如下。

2. 引入CSS的方式

所有的标签都有一个默认样式，称为“浏览器样式”或者“默认样式”。

（1）行内样式（内联样式）。

直接在标签内部通过使用style属性添加CSS样式，代码如下。

（2）内部样式。

在head标签中嵌套一个style标签，在其中可以书写CSS的样式内容。style标签有一个type属性，默认值text/css，可以省略，代码如下。

（3）外部样式。

首先在外部新建一个外部样式表，然后在<head>标签中通过<link>标签关联，代码如下。

（4）样式优先级。

一般情况下，优先级为外部样式<内部样式<行内样式，一般通过就近原则匹配。例如，外部样式在内部样式后面，则会覆盖内部样式，代码如下。

CSS优先级法则为选择器提供一个权值，权值越大越优先。当权值相等时后出现的样式表设置要优先于先出现的样式表设置，继承的CSS样式不如后来指定的CSS样式，并且在同一组属性设置中标有“!important”规则的优先级最大。选择器的权值如下。

• 内联样式表的权值最高，为1000。

• id选择器的权值为100。

• class类选择器的权值为10。

• html标签选择器的权值为1。

3. CSS注释

CSS的注释语法为“/* 注释的内容*/”。

注释不能嵌套，如以下代码所示。

多行注释如下所示：

模块的注释一般如下。

文件头的注释如下。

9.5.2.5　CSS常见选择器

内部样式和外部样式都是通过选择器作用在html标签上面的，本节介绍CSS常见的选择器。

1. html标签选择器

html标签选择器直接通过获取标签名为相应的标签添加CSS样式，标签选择器就是所说的html代码中的标签。例如，html、span、p、div、a、img等，如以下代码所示：

2. 类（class）选择器

类选择器首先给标签一个class属性（即为标签设置一个class名），然后通过使用（.class名）的方式获取标签。class名不唯一，可以重复使用，但要注意样式的互相影响。类选择器的说明如下。

（1）使用英文圆点（.）开头。

（2）每个元素可以有多个类名，名称可以任意。但不要为中文，一般都是与内容相关的英文缩写。

（3）只会改变类下的元素样式，而不会改变其他标签的默认样式。

类选择器的代码示例如下。

3. ID选择器

先给标签一个id属性（即为标签设置一个id名），然后通过使用（#id名）的方式获取标签。id名唯一，不可重复使用，一般用于脚本中。ID选择器的说明如下。

（1）为标签设置id="id名称"，而不是class="类名称"。

（2）ID选择符的前面是井号（#），而不是英文圆点（.）。

（3）名称是唯一的，即相同名称的id选择器在一个页面只能出现一次。

ID选择器的示例代码如下。

4. 后代选择器

必须含有两个标签以上并且存在层级关系才能使用后代选择器，标签与标签之间用（空格）连接。

在后代选择器中左边的选择器一端包括两个或多个用空格分隔的选择器，选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“…在…找到”“…作为…的一部分”“…作为…的后代”，但是要求必须从右向左读选择器。

后代选择器的示例代码如下。

上面代码中的“p em”选择器可以解释为“作为p元素后代的任何em元素”。如果要从左向右读选择器，可以换成的说法是“包含em的所有p会把以下样式应用到该em”。

5. 子元素选择器

子元素选择器必须含有两个标签以上并且存在父与子关系，标签与标签之间用“>”连接，示例代码如下。

6. 属性选择器

属性选择器通过获取标签的属性来获取相对应的标签，示例代码如下。

9.5.2.6　CSS常用属性

在CSS样式中通过相应的属性设置控制标签样式。

1. CSS背景属性

背景属性主要包含背景颜色、背景图片、位置等。

（1）background-color：背景颜色。

语法：background-color: transparent/color;。

取值如下。

• transparent：默认值（背景色透明）。

• color：指定颜色。

示例代码如下。

（2）background-image：背景图片。

语法：background-image:none/url( )。

取值如下。

• none：默认值（无背景图片）。

• url（地址）：使用绝对或相对url地址指定背景图片。

示例代码如下。

注意：引进的背景图片无法撑开盒子的宽高。如要引进背景，必须确保盒子存在宽度和高度。

（3）background-repeat：背景图像铺排。

语法：background-repeat:repeat/no-repeat/repeat-x/repeat-y。

取值如下。

• repeat：默认值（背景图像在纵向和横向上平铺）。

• no-repeat：背景图像不平铺。

• repeat-x：背景图像仅在横向上平铺。

• repeat-y：背景图像仅在纵向上平铺。

示例代码如下。

（4）background-position：背景位置。

定义：用来控制背景图片在元素中的位置，图片左上角相对于元素左上角的位置。

语法：background-position：x y。

取值如下。

• x y：第1个值表示X轴（水平方向）位置，第2个值表示Y轴（垂直方向）位置。

• 粗略定位：left（左）、right（右）、center（中）、top（上）、bottom（下）。

示例代码如下。

（5）background：背景属性。

定义：background属性是新增属性，它把background-color、background-image、background-repeat、background-position整合在同一个属性中显示，大大减少了代码量。

语法如下。

取值如下。

• 第1个值：背景图像地址。

• 第2个值：背景图像铺排。

• 第3个值：背景水平方向位置。

• 第4个值：背景垂直方向位置。

2. 字体属性

CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

（1）font-style：字体样式。

语法：font-style:normal/italic/oblique。

取值如下。

• normal：默认值，浏览器显示一个标准的字体样式。

• italic：浏览器显示一个斜体的字体样式。

• oblique：浏览器显示一个倾斜的字体样式。

示例代码如下。

（2）font-weight：字体粗细。

语法：font-weight：normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900。

取值如下。

• normal：默认值，正常字体。

• bold：粗体，相当于700或<b>标签的作用效果。

• bolder：比normal样式粗。

• lighter：比normal样式细。

• 数字：设置字体粗细，100～900代表由细到粗。

示例代码如下。

（3）font-size：字体大小。

语法：font-size：像素值。

取值：字体的像素值。

示例代码如下。

（4）color：字体颜色。

语法：colo：color。

取值：指定颜色。

示例代码如下。

（5）line-height：字体行高。

语法：line-height：像素值。

取值：取行高的像素值，如果设置文本垂直居中，可以将line-height的值与盒子height的值一致。

示例代码如下。

（6）font-family：字体名称。

语法：font-family:name。

取值：字体名称（常用字体名称如“微软雅黑”及“宋体”等）。

示例代码如下。

（7）text-decoration：字体装饰。

语法：text-decoration：none / underline / blink / overline / line-through。

取值如下。

• none：默认值（无装饰）。

• blink：闪烁（只有Firefox浏览器支持这个效果）。

• underline：下画线。

• line-through：贯穿线。

• overline：上画线。

示例代码如下。

（8）text-shadow：字体阴影效果。

语法：text-shadow:color length length opacity。

取值如下。

• color：指定颜色。

• length：指定阴影的水平延伸距离（用具体像素取值）。

• length：指定阴影的垂直延伸距离（用具体像素取值）。

• opacity：指定模糊效果的作用距离（用具体像素取值）。

示例代码如下。

（9）text-align：文本对齐。

语法：text-align:left / right / center。

取值如下。

• left：左对齐（默认值）。

• right：右对齐。

• center：居中对齐。

示例代码如下。

（10）text-transform：字体转换。

语法：text-transform:none / capitalize / uppercase / lowercase。

取值如下。

• none：默认值（无转换发生）。

• capitalize：将每个单词的第1个字母转换成大写。

• uppercase：转换成大写。

• lowercase：转换成小写。

示例代码如下。

（11）letter-spacing：字体间隔。

语法：letter-spacing:normal / length。

取值：

• normal：默认间隔。

• length：指定字体间隔（用具体像素取值）。

示例代码如下。

（12）text-indent首行缩进。

语法：text-indent：em值。

取值：设定对应的缩进值，以em为单位。em是相对长度单位，1 em=16 px。

示例代码如下。

9.5.2.7　CSS盒模型

网页中所有的元素都是矩形的，所以可以看成一个个盒子。网页由多个盒子组成，盒子由边框+内边距+内容区域+外边距组成，CSS盒模型如图9-123所示。

图9-123　CSS盒模型

CSS盒模型相关参数说明如下。

（1）padding（内边距）：表示内容与盒子之间的间距（盒子对内容作用，即盒子对内作用）。

（2）margin（外边距）：表示盒子与盒子之间的间距（盒子对盒子作用，即盒子对外作用。注意行元素只能实现左右外边距）。

（3）border（边框线）：表示盒子的边线。

paddding/margin参数值的添加规范如下。

（1）padding：像素值，代表盒子上下左右内边距为指定像素值。

（2）padding：像素值1 像素值2，代表盒子顶部和底部内边距为像素值1，左边和右边内边距为像素值2。

（3）padding：像素值1 像素值2 像素值3，代表盒子顶部内边距为像素值1，左边和右边内边距为像素值2，底部内边距为像素值3。

（4）padding：像素值1 像素值2 像素值3 像素值4，代表盒子顶部内边距为像素值1，右边内边距为像素值2，底部内边距为像素值3，左边内边距为像素值4。

（5）padding-top：像素值，代表盒子顶部内边距为指定像素值。

（6）padding-right：像素值，代表盒子右边内边距为指定像素值。

（7）padding-bottom：像素值，代表盒子底部内边距为指定像素值。

（8）padding-left：像素值。代表盒子左部内边距为指定像素值。

border参数值的添加规范如下：

（1）border：1px solid/dashed #fff;，第1个属性值代表边框线粗细，第2个属性值代表实线或虚线，第3个属性值代表颜色。

（2）border-top：1px solid/dashed #fff;，代表顶部边框线。

（3）边框圆角属性：border-radius:50%;。

注意CSS外边距合并指的是当两个垂直外边距相遇时将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

CSS盒模型的示例代码如下。

上述代码的运行结果如图9-124所示。

图9-124　运行结果

9.5.2.8　CSS定位机制

CSS的定位机制有3种，即普通流、浮动流（float）和定位流（position）。

1. 普通流

普通流即文档流，在HTML中的写法是从上到下和从左到右的排版布局，其定位方式如图9-125所示。

图9-125　普通流的定位方式

2. 浮动流

浮动流能让块元素在不改变类型的前提下在同一行排版布局，并且能让块元素在不改变类型的前提下在同一行排版布局。其不足之处是脱离标准文档流，不占用空间而导致父级布局高度塌陷。在CSS中任何元素都可以浮动，浮动元素会生成一个块级框，而不论其本身是何种元素。

语法：float:left/right。

取值如下。

（1）left：左浮动，元素向左对齐排版。

（2）right：右浮动，元素向右对齐排版。

示例代码如下。

浮动流的特性如下。

（1）脱离标准文档流，不占位置。但会影响标准文档流，并且只有左右浮动。

（2）浮动元素A的排列位置与上一个元素（块级）有关系，如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

（3）一个父盒子里面的子盒子，如果其中一个子盒子是浮动流，则其他子盒子都必须为浮动流，这样才能一行对齐显示。

（4）浮动根据元素书写的位置来显示相应的浮动。

（5）元素添加浮动后，如果没有设置宽高，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认内容的多少，即具有包裹性。

（6）浮动具有破坏性，元素浮动后破坏来原来的正常流布局，造成内容塌陷。

注意如果一个标准流的父盒子没有设置高且所有子盒子进行了浮动，那么父盒子的高度会塌陷成0，解决方法就是使用overflow。

在父盒子上设置overflow:hidden; 之后，父盒子具有的包裹性，不会出现高度塌陷的问题。overflow的属性值如下。

（1）visible：内容不会被修剪，会呈现在元素框之外（默认值）。

（2）hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。

（3）auto：在需要时产生滚动条，即自适应所要显示的内容。

（4）scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。

overflow的示例代码如下。

清除浮动就是让当前元素左右两边都不存在浮动元素时才把元素放到标准文档流中显示。清除浮动的示例如下。

（1）clear:left;：清除左浮动。

（2）clear:right;：清除右浮动。

（3）clear:both;：清除左右浮动。

在讲解清除浮动之前参看如下代码。

运行结果如图9-126所示。

图9-126　运行结果

可以看到，子元素div1～div3没有被父元素box包裹住，这不是想要的效果。为了达到子元素div1～div3被父元素box包裹的效果，需要清除浮动。

（1）添加新元素，应用clear:both。

在head部分的style中添加如下代码。

在body部分添加如下代码。

运行结果如图9-127所示。

图9-127　运行结果

如果清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。添加新元素清除浮动的优点是易懂且方便；不足是添加无意义标签且语义化差，所以不建议使用。

（2）父级div定义overflow:auto。

通过触发BFC（Block Formatting Context）方式，实现清除浮动，使用此种方式清除浮动在Style样式中的代码如下。

此方法的优点是代码简洁；不足是内容增多时容易造成不会自动换行导致内容被隐藏，无法显示要溢出的元素，因此不推荐使用。

（3）在父级样式添加伪元素after或者before。

通常称这种方法为“clearfix”，示例代码如下。

before或after方式为空元素的升级版，优点是不用单独加标签。并且符合闭合浮动思想，结构语义化正确，因此推荐使用。

3. 定位流

默认的标准文档流的布局方式决定了元素的位置就是静态（static）的定位方式，可以通过position属性来改变元素的定位的方式，其取值如下。

（1）static：HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top、bottom、left、right影响。

（2）relative：相对定位，元素的定位相对其正常位置。

（3）fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。需要注意的是fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持。

（4）absolute：相对定位元素的位置最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>标签。

（5）sticky：粘性定位，position:sticky;基于用户的滚动位置来定位。粘性定位的元素依赖于用户的滚动，在position:relative与position:fixed定位之间切换，就像position:relative;。当页面滚动超出目标区域时，表现就像position:fixed;，会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是top、right、bottom或left之一。换言之，指定top、right、bottom或left其中之一阈值，才可使粘性定位生效；否则其行为与相对定位相同。注意Internet Explorer、Edge 15及更早IE版本不支持sticky定位，Safari需要使用-webkit- prefix才支持。

几种定位方式的示例代码如下。

（1）static定位。