- 博客(35)
- 收藏
- 关注
RSS订阅原创 CSS2.0层叠样式表—CSS高级技巧
CSS高级技巧包括伪类、伪元素、CSS变量等。伪类是用来表示元素特殊状态，如:hover :active等。伪元素则是用来添加元素特定的内容,如::before, ::after等。CSS变量可以使代码易于维护和修改，实现动态样式。同时，使用CSS布局属性像display: flex，可以使布局更加灵活和响应。另外，像CSS网格布局，CSS动画和过渡等高级技巧也可以使页面设计更加炫酷和生动。掌握这些技巧可以帮助你你成为一名高级的CSS开发人员。
2023-08-07 09:39:06
93
原创 CSS2.0层叠样式表—CSS Hack
Hack知识点是指通过特殊的CSS语法或条件注释来实现在不同浏览器或版本下的样式兼容。Hack可以用于解决不同浏览器对于某些属性或属性值的解析差异问题，以及实现特定样式在特定浏览器中的兼容性。然而，随着浏览器的发展和标准的统一，Hack的使用已经不再推荐，而应使用更现代的解决方案，如CSS前缀和媒体查询等。
2023-08-06 11:33:24
64
原创 CSS2.0层叠样式表—CSS继承和优先级
继承是CSS的一个主要特征，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。示例：可以被继承的css属性1.字体系列属性:font、font-family、font-weight、font-size、fontstyle;2.文本系列属性:2.1 内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符
2023-08-06 11:20:02
111
原创 CSS层叠样式表-CSS元素显示和隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。display 属性用于设置一个元素应如何显示。display 隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配 JS 可以做很多的网页特效。类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。visibility 可见性visibility 属性用于指定一个元素应可见还是隐藏。visibility 隐藏元素后，继续占
2023-08-04 16:48:11
62
原创 CSS层叠样式表—CSS定位属性
以下情况使用标准流或者浮动能实现吗？某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。当我们滚动窗口的时候，盒子是固定在屏幕某个位置的。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否 (占有位置)相对于自身位置移动常用absolute绝对定位是（不占有位置）带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用。
2023-08-03 07:59:55
127
原创 CSS层叠样式表—CSS浮动属性
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 {float : 属性值;属性值描述none元素不浮动left元素向左浮动right元素向右浮动。
2023-08-03 07:56:59
74
原创 CSS层叠样式表—CSS盒子阴影文字阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影语法：值描述h-shadow必须，水平阴影位置，允许负值。v-shadow必须，垂直阴影位置，允许负值。blur可选，模糊距离。spread可选，阴影的尺寸。color可选，阴影的颜色。inset可选，将外部阴影改为内部阴影。注意：文字阴影在 CSS中，我们可以使用 text-shadow 属性将阴影应用于文本。语法：值描述h-sh
2023-08-03 07:49:00
211
原创 CSS层叠样式表—CSS盒模型
网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里面装内容。利用 CSS 摆盒子。 在HTML中，我们学习了一个很重要的理论：块元素和行内元素。在这一节中，我们介绍CSS中极其重要的一个理论——CSS盒子模型。 在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。下图所示为一个CSS盒子模型的具体结构。 一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两
2023-08-02 11:26:10
52
原创 CSS层叠样式表—CSS内外边距属性
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。语法：属性作用padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距padding属性简写形式跟border属性
2023-08-02 11:12:52
778
原创 CSS层叠样式表—CSS边框属性
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。语法：属性作用border-width边框宽度(粗细)border-style边框样式border-color边框颜色边框样式边框样式 border-style 可以设置如下值：边框样式的不同写法边框样式的出现可以有1个值，2个值，3个值，4个值，它们分别代表不同方向的边框属性的变化。圆角边框通过对边框的圆角属性的改变，可以完成圆形div的效果。课程总结
2023-08-02 11:01:57
64
原创 CSS层叠样式表—CSS背景属性
在CSS中，我们可以使用background-color属性来定义元素的背景颜色。语法：一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。背景图片 background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置。语法：说明： 跟引入图片（即img标签）一样，引入背景图片也需要给出图片路径才可以显示。背景图片后面的地址，千万不要忘记加 URL，同时里面
2023-07-31 19:06:12
66
原创 CSS层叠样式表—CSS超链接样式
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。语法：说明：注意：如果在使用的时候没有展示未访问时的样式，这时候我们去清空我们的浏览器历史记录就可以实现效果了。深入了解：hoverhover应用在其他标签上的效果。语法：举例：“:hover”用于div举例：:hover用于img鼠标样式MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor在CSS中，我们可以使用cursor属性来定义鼠标样式。语法：
2023-07-31 19:03:21
272
原创 CSS层叠样式表—CSS表格样式
默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？在CSS中，我们可以使用caption-side属性来定义表格标题的位置。语法：说明：caption-side属性取值只有2个，如下表所示。表格边框合并 从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
2023-07-30 10:12:04
153
原创 CSS层叠样式表—CSS列表项符号
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。list-style-type : 取值;说明：list-style-type属性是针对ol或者ul元素的，而不是li元素。其中，list-style-type属性取值如下表所示。 在HTML中，对于有序列表和无序列表这两个的列表项符号，都是使用type属性来定义的。使用type属性来定义列表项符号，那是在HTML的“元素属性”中定义的。但是之前说过，结构和样式应该是分离的。有序列表列表值。
2023-07-30 10:06:08
422
原创 CSS层叠样式表—CSS元素显示模式
了解元素显示模式的作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。 HTML 元素一般分为块元素和行内元素两种类型。常见的块元素有、、、、、等，其中标签是最典型的块元素。块级元素的特点：注意： 常见的行内元素有 、、、、、等，其中 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。行内元素的特点：注意： 在行内元素中有几个特殊的标签 —、、，它们同时具
2023-07-30 10:03:32
96
1
原创 CSS层叠样式表—CSS组合选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和组合选择器，组合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。组合选择器的优点： 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。语法：元素1 和 元素2 中间用空格隔开。元素1 是父级，元素2 是子级，最终选择的是元素2 。元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可。元素1 和 元
2023-07-29 15:48:47
146
原创 CSS层叠样式表—CSS文本属性
p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个来实现首行缩进两个字的空格。但是这种方式冗余代码很多。那么有没有更好的解决方法呢？在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。语法：水平对齐在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。语法：属性值描述left左对齐（默认值）right右对齐center居中对齐文本修饰在CSS中，我们可以使用text-decoratio
2023-07-29 15:22:56
63
原创 CSS层叠样式表—CSS文本属性
在CSS中，我们可以使用hsl属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。语法：说明：hsl属性取值如下表所示。HSLA颜色 在CSS中，我们可以使用hsla属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)、透明度（A）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。语法：说明：hsl属性取值如下表所示。HSLA颜色:色调(H)、饱和度(S)、亮度(L)、透明度(A)。RGB颜色
2023-07-29 15:19:55
18
原创 CSS层叠样式表—CSS字体属性
在Word中，我们往往会使用不同的字体，例如宋体、微软雅黑等。在CSS中，我们可以使用font-family属性来定义字体类型。语法：说明： font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器默认字体类型一般是“微软雅黑”。字体类型使用注意点各种字体之间必须使用英文状态下的逗号隔开。一般情况下,如果有空格隔开的多个单词组成的字体,加引号。尽量使用系统默认自带字体，保证在任何用户的浏览器中
2023-07-29 15:17:39
312
原创 CSS2.0层叠样式表——CSS基础选择器
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。选择到需要修改的标签，然后添加对应的样式。 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。语法：作用： 标签选择器可以把某一类标签全部选择出来，比如所有的 标签和所有的 标签。优点： 能快速为页面中同类型的标签统一设置样式。缺点： 不能设计差异化样式，只能选择全部的当前标签。ID选择器 id 选择器可
2023-07-27 18:35:43
47
1
原创 CSS2.0层叠样式表——CSS概述
CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0，2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
2023-07-27 18:31:22
236
1
原创 HTML4.01超文本标记语言-HTML区块元素和字符实体
常见的能够换行的标签都是块级元素例如:常见的不能换行的标签都是行级元素例如:字符实体使用HTML 中的预留字符必须被替换为字符实体。如：在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
2023-07-15 11:11:19
21
1
原创 HTML4.01超文本标记语言-HTML表单标签
表单是HTML中重要组成部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息。
2023-07-15 11:09:04
42
1
原创 HTML4.01超文本标记语言-HTML表格标签
在网页中定义了宽度为400像素的表格，边框粗细为1像素，颜色为蓝色，第一行第一个单元格的宽度为200像素。表格合并演示：课程总结
2023-07-13 12:57:47
29
2
原创 HTML4.01超文本标记语言-HTML图像标签
img 元素向网页中嵌入一幅图像，注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。
2023-07-13 12:55:44
53
1
原创 HTML4.01超文本标记语言-HTML绝对路径和相对路径
**绝对路径：**是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，“D:\web\img\logo.gif”或者完整的网络地址https://img.meituan.net/phoenix/d681fd63f884f6f5fd9fd5493e65f86c4428480.jpg**相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，HTML页面相对于 HTML 页面的位置
2023-07-13 12:52:48
36
1
原创 HTML4.01超文本标记语言-HTML标题和段落标签
HTML 标题（Heading）是通过标签来定义的。功能：HTML标题标签的功能就是将网页上的重点部分标出来。标题很重要确保将 HTML 标题标签只用于标题。
2023-07-13 12:43:33
51
1
原创 HTML4.01超文本标记语言-HTML头部标签
HTML头部标签head中可以包裹很多的标签，它更像是一个容器，可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。
2023-07-13 12:38:42
150
1
原创 HTML4.01超文本标记语言-HTML基础标签
DOCTYPE是document type (文档类型) 的缩写。 声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
2023-07-13 12:33:23
146
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人