文章目录
- 一 、CSS技巧
- 1.1 CSS精灵（CSS Sprites）
- 1.1.1 实现步骤
- 1.1.2 例子
- 1.2 字体图标
- 1.2.1如何使用字体图标
- 1.2.2 字体图标使用总结
- 1.3 垂直对齐方式vertical-align
- 1.3.1 值
- 1.3.2 例子
- 1.4 过渡效果transition
- 1.4.1 CSS过渡效果（transition）的属性名和属性值如下：
- 1.4.2 注意
- 1.5 透明度opacity
- 1.5.1 注意事项
- 1.5.2 例子
- 1.6 光标类型cursor
- 二、扩展
- 2.1 SEO 三大标签
- 2.2 Favicon 图标
一 、CSS技巧
1.1 CSS精灵（CSS Sprites）
一种优化网页性能的技术，目的是减少HTTP请求次数，从而实现加快图片在页面中加载速度。
优点：减轻服务器的压力请求。加快了页面的加载速度，提高了用户体验
缺点：维护起来复杂，精灵图不宜将过多图标放置在同一个里面，也不宜经常性的变动
1.1.1 实现步骤
- 准备精灵图：将已知的大小的图标或者图像利用编辑软件整合在一张大图中
- 编写适宜的结构：创建出来的盒子应与小图的尺寸相同，并利用 CSS 的
background-image设置背景图为“精灵图” 和background-position属性来显示所需的图像部分（即：改变背景图位置）。
1.1.2 例子
.icon-search, .icon-cart {
display: inline-block;
width: 32px; /* 图标的宽度 */
height: 32px; /* 图标的高度 */
background-image: url('path/to/sprite.png'); /* 精灵图的路径 */
background-repeat: no-repeat;
}
.icon-search {
background-position: 0 0; /* 搜索图标的起始位置 */
}
.icon-cart {
background-position: -32px 0; /* 购物车图标的起始位置 */
}
1.2 字体图标
字体图标是一种灵活高效的网页图标解决方案，具备多种优势：可以通过CSS轻松调整大小和颜色，文件体积小加载快，兼容几乎所有主流浏览器，且只需引入相关CSS文件即可轻松使用，非常适合提升网页的视觉效果和用户体验。
1.2.1如何使用字体图标
可以从各种在线资源库中获取字体图标，例如阿里巴巴矢量图标库、Font Awesome、Ionicons等。
以阿里巴巴矢量图标库为例，当我们登录之后。
选择需要的库后，当我们来到下面的界面后，可以选择心仪的图标到“库”和“收藏”中
然后我们聚焦于右上角的购物车的那个图标，点击一下，选择添加到项目（为了项目的完整度，也方便后续的更新使用）
然后写好名称
下一步Download，我们就在本地的浏览器的设置好的下载存放地址中得到一个zip包
解压缩，点击那个html文件
我们就可以看到下面的，我们选择font class选项
就把那个底部描述信息赋值，那个就是该图标对应的class
1.2.2 字体图标使用总结
-
导入文件夹：将上述解压出的文件（仅复制全部文件进去，不包含文件夹），放置在项目名称下面的
iconfont文件夹下面。
-
引入图标库：在
<head>部分，通过<link>标签引入字体图标库的CSS文件。<link rel="stylesheet" href="./iconfont/iconfont.css"> -
定义样式：使用CSS定义图标样式，如尺寸和颜色。
<style> .iconfont { font-size: 100px; color: #00a4ff; } </style> -
使用图标：在
<body>部分，通过添加相应的类名来显示图标。<span class="iconfont icon-xiaoxi-zhihui"></span>
1.3 垂直对齐方式vertical-align
使行内元素盒模型与其行内元素容器垂直对齐。
只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。
效果:图片img的底下有空白,转块级不按基线对齐,空白就消失了
1.3.1 值
1.3.2 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
// 行内块被当作字处理
<style>
div {
border: 1px solid #000;
}
img {
//浏览器把行内块、行内标签当做文字处理,默认按基线对齐
vertical-align: text-bottom ;
/*display: block;*/
}
</style>
</head>
<body>
<div>
<p>hhh</p>
<img src="./x.png" alt="">
hhh
</div>
</body>
</html>
1.4 过渡效果transition
过渡效果是一种在特定的时间段内平滑地改变一个或多个CSS属性的方式。
元素从一种样式逐渐变为另一种样式时提供动画效果。
div {
transition: <property> <duration> <timing-function> <delay>;
}
或者
//指定过渡的属性、持续时间、延迟时间和速度曲线来控制过渡的行为
div {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
div:hover {
font-size: 36px;
}
CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个符合属性
1.4.1 CSS过渡效果（transition）的属性名和属性值如下：
-
属性名：
transition-property：指定要过渡的CSS属性的名称。transition-duration：指定过渡效果持续的时间。transition-timing-function：指定过渡效果的速度曲线。transition-delay：指定过渡效果何时开始。
-
属性值：
transition-property：可以是一个或多个CSS属性的名称，如width,height,opacity。transition-duration：可以是时间值，如0.5s,1s,2s。transition-timing-function：可以是速度曲线函数，如ease,linear,ease-in-out。transition-delay：可以是时间值，如0s,0.5s,1s。
1.4.2 注意
属性的名值长度不一致
会采用重复使用的形式匹配，若是property短的，时间将会被截取
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
为
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
1.5 透明度opacity
opacity属性用于设置元素的透明度。该属性接受一个介于0和1之间的数值，其中：
属性名：opacity
属性值：
0: 完全透明（元素不可见）
0-1之间小数：半透明
1: 不透明
1.5.1 注意事项
- opacity属性不仅影响背景颜色，还会影响元素的所有子元素的透明度。
- 如果只想改变背景色的透明度而不影响内容，可以使用rgba或hsla颜色值
<style>
.background-opacity {
background-color: rgba(255, 0, 0, 0.5); /* 红色，50%透明 */
width: 100px;
height: 100px;
}
</style>
<div class="background-opacity">半透明背景</div>
1.5.2 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>opacity</title>
<style>
.hover-opacity {
background-color: greenyellow;
width: 100px;
height: 100px;
transition: opacity 0.5s;
}
.hover-opacity:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="hover-opacity">鼠标悬停我</div>
</body>
</html>
1.6 光标类型cursor
cursor 属性用于设置鼠标指针（光标）在指定区域上的形状
default: 默认箭头光标。pointer: 手形光标，通常用于链接。text: 文本输入光标（I-beam）。help: 带问号的帮助光标。wait: 沙漏或旋转圈，表示等待。crosshair: 十字准心光标。not-allowed: 禁止操作的圆圈斜杠光标。move: 移动光标，用于拖动操作。n-resize: 向上调整大小光标。e-resize: 向右调整大小光标。s-resize: 向下调整大小光标。w-resize: 向左调整大小光标。ne-resize: 向右上方调整大小光标。nw-resize: 向左上方调整大小光标。se-resize: 向右下方调整大小光标。sw-resize: 向左下方调整大小光标。url('path/to/cursor.png'): 自定义光标图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor</title>
<style>
.default-cursor { cursor: default; }
.pointer-cursor { cursor: pointer; }
.text-cursor { cursor: text; }
.help-cursor { cursor: help; }
.wait-cursor { cursor: wait; }
.crosshair-cursor { cursor: crosshair; }
.not-allowed-cursor { cursor: not-allowed; }
.move-cursor { cursor: move; }
.n-resize-cursor { cursor: n-resize; }
.custom-cursor { cursor: url('custom-cursor.png'), auto; }
</style>
</head>
<body>
<div class="default-cursor">Default Cursor</div>
<div class="pointer-cursor">Pointer Cursor</div>
<div class="text-cursor">Text Cursor</div>
<div class="help-cursor">Help Cursor</div>
<div class="wait-cursor">Wait Cursor</div>
<div class="crosshair-cursor">Crosshair Cursor</div>
<div class="not-allowed-cursor">Not Allowed Cursor</div>
<div class="move-cursor">Move Cursor</div>
<div class="n-resize-cursor">North Resize Cursor</div>
<div class="custom-cursor">Custom Cursor</div>
</body>
</html>
二、扩展
2.1 SEO 三大标签
SEO（搜索引擎优化）是一种让网站在搜索引擎结果中更加清晰，也帮助我们将搜索结果更靠前的过程。
-
Title 标签
<title>标签定义了网页的标题，显示在浏览器标签上，是搜索引擎结果页面（SERP）中最突出的部分。它应该简洁明了，包含页面的主要关键词。 -
Meta Description 标签
<meta name="description" content="...">标签提供了页面内容的简要描述，通常显示在搜索引擎结果中标题下方。虽然它对排名的直接影响较小，但对点击率有显著影响。
<meta name="keywords" content="">是一个用于定义网页关键词的 HTML 标签。 -
Header 标签（H1、H2、H3等）
<h1> 到 <h6>标签用于定义内容的层次结构和标题。搜索引擎通过这些标签理解页面的结构和重点。
2.2 Favicon 图标
创建一个正方形的图标，通常大小为 16x16 像素或 32x32 像素。将图标保存为 .ico 格式（例如 favicon.ico）。确保保存在您项目的合适位置，比如项目根目录。
在 <head> 标签中添加以下代码，将 favicon 图标链接到您的网页：
<link rel="icon" type="image/x-icon" href="favicon.ico">
