CSS3选择器-- 伪元素选择器
伪元素选择器
01
伪元素选择器
所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器
:before选择器
:after选择器
:before选择器
描述
:before伪元素选择器用于在被选元素的内容前面插入内容。
语法格式
E:before{ content:文字/url(); }
说明
设置在对象前（依据对象树的逻辑结构）发生的内容必须配合content属性来指定要插入的具体内容。
:after选择器
描述
:after伪元素选择器用于在某个元素之后插入一些内容。
语法格式
E:after{ content:文字/url(); }
说明
:after选择器的使用方法与:before选择器相同。
总结
02
通过本小节知识了解
:before和:after选择器
掌握伪元素选择器的语法格式
能够熟练运用伪元素选择器
总结
THANKS
2022-06-01 11:04:24
197KB
相对定位
相对定位
01
元素的定位
定位
属性
相对
定位
绝对
定位
固定
定位
静态
定位
描述
在CSS中，通过定位属性可以实现网页中元素的精确定位，元素的定位属性主要包括定位模式和边偏移两部分。
相对定位
描述
相对定位是将元素相对于自身原本的位置，通过偏移指定的距离，到达新的位置,元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
说明
水平方向的偏移量由left或right属性指定
竖直方向的偏移量由top和bottom属性指定
语法格式
position： relative ;
相对定位
示例
定位前
定位后
相对定位
示例
top:150px
left:260px
在文档流中的位置仍然保留着
/*设置相对定位*/
position: relative;
top: 150px;
left: 260px;
相对定位
实战：对“相对定位2”设置left: 150px ; top: 50px;
top:50px
left:150px
定位前
定位后
总结
02
熟知元素的相对定位是相对于自身原来的位置进行一定量的偏移
熟知掌握相对定位的语法格式能熟练运用
总结
THANK
2022-06-01 11:04:22
287KB
页面交互元素
页面交互元素简介
01
页面交互元素
HTML5是一些独立特性的集合，它不仅增加了许多Web页面特性，而且本身也是一个应用程序。对于应用程序而言，表现最为突出的就是交互操作。
details元素和summary元素
定义
details元素规定了用户可见的或者隐藏的需求的补充细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。
语法格式
details元素和summary元素
示例：实现如下效果
定义
progress元素
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比）。
语法格式
progress元素
说明
value：已经完成的工
...
...
2022-06-01 11:04:22
793KB
嵌入视频和音频
音视频中的source元素;什么是source元素;什么是source元素;什么是source元素;用法示例;用法示例;总结;;小任务
;THANKS
2022-06-01 11:04:21
216KB
CSS核心基础--引入CSS样式;;引入CSS样式方式;引入CSS样式方式;引入CSS样式方式;;引入CSS样式 【内联方式】;引入CSS样式 【内联方式】;引入CSS样式 【链接方式】;引入CSS样式 【链接方式】;引入CSS样式 【嵌入方式】;引入CSS样式 【嵌入方式】;引入CSS样式 【导入方式】;;总结;谢
2022-06-01 11:04:21
709KB
HTML5基础--语法简介;语法简介;语法简介;HTML5新增结构元素;HTML5新增结构元素示例;HTML5新增网页元素;HTML5新增网页元素示例;HTML5废除的元素;HTML5新增网页元素;HTML5新增网页元素示例;HTML5废除的属性;需求说明
使用HTML5新增的结构元素搭建网易邮箱页面结构
每块内容的高为200px，边框为颜色为红色的1像素的实线;;感
2022-06-01 11:04:20
240KB
元素的类型
元素的类型
01
元素的类型
每一个HTML元素都有一个默认的显示值，它都取决于元素的类型。在CSS中，根据它的分类我们可以把HTML元素分为三种类型：
HTML 元素类型
块状元素（block）
内联元素（inline）
内联块状元素（inline-block）
块状元素
标签独自占据一行，相邻块状元素不会并列显示，且它的顺序是自上而下的排列；
在网页中以块的形式显示为矩形区域；
所有块状元素都可以定义自己的宽度和高度；
作为其他元素的容器，可以容纳其他内联和块状元素。
描述
示例
- 1
- 2
- 3
-
常见的块状元素
-
其中标记是最典型的块状元素。 内联元素 标签在一行内，宽度和高度由内容决定，只有在内容超过HTML的宽度时，才会换行； 表现形式始终以行内逐个进行显示； 没有自己的形状，不能定义宽高，最小内容单元也呈现矩形形状； 遵循盒子模型基本规则。 描述 示例2022-06-01 11:04:19 271KB