Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

前端之CSS篇(七)——CSS高级技巧及常见布局技巧_css那些事儿:掌握网页样式与css布局核心技术

作者：Gausst松鼠会 | 2024-04-11 11:47:31

踩

css那些事儿:掌握网页样式与css布局核心技术

1.CSS高级技巧

1.1精灵图

1.1.1为什么需要精灵图？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrUI45aQ-1664763364516)(E:/frontend/html_css/Typora_image/188.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LBW5RqDf-1664763364517)(E:/frontend/html_css/Typora_image/189.png)]

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

(也称CSS Sprites、CSS雪碧)

CSS精灵技术的核心内容：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HFSY1qto-1664763364518)(E:/frontend/html_css/Typora_image/190.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6NoDKDE7-1664763364519)(E:/frontend/html_css/Typora_image/191.png)]

精灵技术的目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

举例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcyDX2NJ-1664763364520)(E:/frontend/html_css/Typora_image/192.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNVeiI0V-1664763364521)(E:/frontend/html_css/Typora_image/193.png)]

1.1.2精灵图(sprites)的使用

position	[pəˈzɪʃn]	位置; 地方; 恰当位置; 正确位置;
sprites	[spraɪts]	(传说中的)小仙子，小精灵，小妖精;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N1mHcqRC-1664763364523)(E:/frontend/html_css/Typora_image/194.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgnF5eUU-1664763364524)(E:/frontend/html_css/Typora_image/195.png)]

1.1.3 使用精灵图核心：

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

2.这个大图片也被称为sprites 精灵图或者雪碧图

3.移动背景图片位置，此时可以使用 background-position.

4.移动的距离就是这个目标图片的X和Y坐标。注意网页中的坐标有所不同

5.因为一般情况下都是往上往左移动，所以数值是负值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QY7Tkmem-1664763364526)(E:/frontend/html_css/Typora_image/196.png)]

x轴：往右走是正的，往左走是负的

y轴：往下走是正的，往上走是负的

使用精灵图核心总结：

1.精灵图主要针对于小的背景图片使用。

2.主要借助于背景位置来实现——background-position.

3.一般情况下精灵图都是负值。(千万注意网页中的坐标：X轴右走是正直，左边走是负值，y轴同理。)

(以小盒子的位置开始走)

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图使用</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            /* background:url(../access/sprite.png); */
            /* 移动小背景盒子的距离，让它显示出来 */
            /* x轴182px y轴0 */
            /* background-position: -182px 0; */
            /* 可以联写 */
            background:url(../access/sprite.png) no-repeat -182px 0;
        }
        .box2 {
            width: 27px;
            height: 25px;
            /* background-color: rgb(64, 201, 211); */
            margin: 200px;
            /* 要让这个小背景显示出来，需要向左走155px,向上走106px */
            background: url(../access/sprite.png) no-repeat -155px -106px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JD2Wdw6f-1664763364530)(E:/frontend/html_css/Typora_image/197.png)]

1.2精灵图案例

利用精灵图定位技术，写出"organge：

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用fw拼写出orange</title>
    <style>
        span {
            /* 行内元素转化成行内块元素，这样可以设置高度 */
            display: inline-block;
            background: url(../access/abcd.jpg) no-repeat;
        }
        .o {
            width: 106px;
            height: 108px;
            background-position: -372px -276px;
        }
        .r {
            width: 108px;
            height: 106px;
            background-position: -138px -419px;
        }
        .a {
            width: 107px;
            height: 110px;
            background-position: 0 -10px;
        }
        .n {
            width: 111px;
            height: 112px;
            background-position: -257px -275px;
        }
        .g {
            width: 104px;
            height: 105px;
            background-position: -98px -143px;
        }
        .e {
            width: 98px;
            height: 102px;
            background-position: -483px -11px;
        }
    </style>
</head>
<body>
    <span class="o">o</span>
    <span class="r">r</span>
    <span class="a">a</span>
    <span class="n">n</span>
    <span class="g">g</span>
    <span class="e">e</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFoLPNZl-1664763364531)(E:/frontend/html_css/Typora_image/198.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LEh7JkIv-1664763364533)(E:/frontend/html_css/Typora_image/216.png)]

1.3 字体图标

1.3.1 字体图标的产生

字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqMdoWMW-1664763364534)(E:/frontend/html_css/Typora_image/199.png)]

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

(简单的小图标用字体来做，复杂的用精灵图来做)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJYuxuy8-1664763364537)(E:/frontend/html_css/Typora_image/200.png)]

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

1.字体图标的下载

2.字体图标的引入(引入到我们html页面中)

3.字体图标的追加(以后添加新的图标)

1.3.2 字体图标的下载

推荐网站：

1.https://icomoon.io/ 免费，不需要登录

2.https://www.iconfont.cn/ 需要登录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dCtLat9c-1664763364538)(E:/frontend/html_css/Typora_image/201.png)]

下载完毕之后，注意原先的文件不要删，后面会用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a5YiudK0-1664763364541)(E:/frontend/html_css/Typora_image/202.png)]

操作步骤：

(1) 把下载包里面的fonts文件夹放入页面根目录(html文件在哪，fonts就放在哪)

(路径问题，主要为了让字体和html文件在同一级)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZVPbHr6-1664763364541)(E:/frontend/html_css/Typora_image/203.png)]

fonts里面的结构：(四个不同文件，为了兼容性)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yITmbgv7-1664763364545)(E:/frontend/html_css/Typora_image/204.png)]

(2) 在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中。一定注意字体文件路径的问题。

在style.css中的字体声明：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6cm0mw');
  src:  url('fonts/icomoon.eot?6cm0mw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6cm0mw') format('truetype'),
    url('fonts/icomoon.woff?6cm0mw') format('woff'),
    url('fonts/icomoon.svg?6cm0mw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEpjTFlZ-1664763364546)(E:/frontend/html_css/Typora_image/205.png)]

(3) html标签内添加小图标。

<span></span>
1

(4) 给标签声明字体

font-family: 'icomoon';     #  一般后面的 icomoon  不做更改
1

(5) 可以更改文字的颜色大小

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标的使用</title>
    <style>
        /*  第二步 字体声明 */
        /* 从CSS文件中复制代码 */
        @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6cm0mw');
  src:  url('fonts/icomoon.eot?6cm0mw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6cm0mw') format('truetype'),
    url('fonts/icomoon.woff?6cm0mw') format('woff'),
    url('fonts/icomoon.svg?6cm0mw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


    /* 第四步，声明字体 */
    span {

        font-family: 'icomoon';
        /* 第五步，改变字体的大小颜色 */
        font-size: 100px;
        color: greenyellow;
    }
    </style>
</head>
<body>
    <!-- 第三步 使用 -->
    <span></span>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qEQpYyj9-1664763364547)(E:/frontend/html_css/Typora_image/206.png)]

1.3.3字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQbEPI0n-1664763364549)(E:/frontend/html_css/Typora_image/207.png)]

字体图片加载原理：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rErCaOiK-1664763364550)(E:/frontend/html_css/Typora_image/208.png)]

比如说，浏览器需要用到一个定位的小图标，这时候给服务器发送一个请求，让服务器返回给浏览器一个定位的图标，那服务器返回的是这四个字体文件给浏览器。浏览器拿到这个字体文件，把它渲染出来。各种各样的字体图标豆包含在这四个文件中，所以下次需要其他图标，直接拿来使用就行了，服务器也只响应了一次请求。

1.3.4 CSS三角

场景：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3nboDey-1664763364553)(E:/frontend/html_css/Typora_image/209.png)]

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

一张图，你就知道CSS三角是怎么来的了，做法如下：

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid greenyellow; */
            border-top: 10px solid gold;
            border-bottom: 10px solid rgb(223, 21, 88);
            border-left: 10px solid rgb(12, 207, 214);
            border-right: 10px solid rgb(106, 30, 206);
        }

        /* 如何制作三角形，留一个边，把其他三个边改成透明色 transparent*/
        /* 朝下的三角 */
        .box2 {
            width: 0;
            height: 0;
            /* 下面两行代码是为了照顾低版本浏览器，一般是不需要的 */
            /* line-height: 0; */
            /* font-size: 0; */
            border: 100px solid transparent;
            border-top-color: gold;
            margin: 30px auto;
           
        }
        /* 朝右的三角 */
        .box3 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: green;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6QfXYpjk-1664763364554)(E:/frontend/html_css/Typora_image/210.png)]

1.3.5京东三角案例

核心原理：先准备一个矩形，然后再准备一个小盒子，让小盒子成三角形，调整位置。

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS京东三角制作</title>
    <style>
        .jd {
            /* 子绝父相 */
            position: relative;
            width: 120px;
            height: 249px;
            background-color: red;
        }
        .jd span {
            /* 使用绝对定位，才能压住盒子 */
            position: absolute;
            /* 调整位置 */
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 下面两行代码，为了照顾兼容性 */
            line-height: 0;    
            font-size: 0;
             /* transparent 表示透明 */
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>
<body>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KLO7aBDn-1664763364556)(E:/frontend/html_css/Typora_image/211.png)]

1.4 CSS用户界面样式

1.4.1 界面样式的定义

所谓的用户界面，就是更改一些用户操作样式，以便提高更好的用户体验。

(1) 更改用户的鼠标样式

(2) 表单轮廓

(3) 防止表单域拖拽

1.4.2鼠标样式 cursor

li { curosr:pointer; }
1

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面样式-鼠标样式</title>
</head>
<body>
    <!-- ul>li*5 -->
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手羊身上</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.4.3轮廓线 outline

给表单添加outline: 0; 或者outline:none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }
1

1.4.4 防止拖拽文本域 resize

textarea { resoze: none; }
1

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input,textarea {
            /* 这样就可以取消表单的轮廓线 */
            /* 给文本域也取消掉了轮廓线 */
            outline: none;
        }
        textarea {
            /* 这样就防止调整文本框的大小 */
                resize: none;
        }
    </style>
</head>
<body>
    <!-- 1.取消表单轮廓 -->
    <input type="text">
    <!-- 2.防止拖拽文本域 -->
    <!-- 为了防止文本域出现空白区域，把文本域标签放在一行上写 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGelE9D9-1664763364557)(E:/frontend/html_css/Typora_image/212.png)]

1.4.5 vertical-align 属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素) 和文字垂直对齐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIt5G0X3-1664763364559)(E:/frontend/html_css/Typora_image/213.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmQYABni-1664763364561)(E:/frontend/html_css/Typora_image/214.png)]

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align: baseline |top |middle | bottom
1

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qduB9Bq8-1664763364563)(E:/frontend/html_css/Typora_image/215.png)]

图片、表单都属于行内块元素，默认的vetical-align是基线对齐。

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle 就可以让文字和图片垂直居中对齐了。

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用vertical-align实现图片文字垂直居中对齐</title>
    <style>
        img {
            /* 顶部对齐 */
            /* vertical-align: top; */
            /* 居中对齐 */
            vertical-align: middle;
            /* 沿底线对齐 */
            /* vertical-align: bottom; */
            /* 不设置，图片默认baseline对齐 */
        }
    </style>
</head>
<body>
    <img src="../access/img.jpg">大家好，我是刘德华！
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4fjWJE0w-1664763364565)(E:/frontend/html_css/Typora_image/217.png)]

verticla-align只针对于行内或行内块元素有效，如果是图片标签，不需要再转换，因为它本来就属于行内块元素。

如果你用一个盒子添加背景图片，那别忘了把这个盒子转化为行内块元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nJdOlyu-1664763364566)(E:/frontend/html_css/Typora_image/218.png)]

文本域和文字也能实现垂直居中

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            /* 防止文本域拖拽改变形状 */
            resize: none;
            /* 去除点击之后出现的轮廓线 */
            outline: none;
            /* 文字和文本域实现垂直居中 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
        <!-- 文本域也属于行内块元素 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8tXI9h2-1664763364569)(E:/frontend/html_css/Typora_image/219.png)]

1.4.6解决图片底部默认空白缝隙问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEHD3eIh-1664763364570)(E:/frontend/html_css/Typora_image/220.png)]

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要的解决方法有两种：

1.给图片添加vertical-align:middle |top | bottom 等

2.把图片转化为块级元素 display:block;

（只有行内元素和行内块元素才有图片和文字基线对齐的问题，块级元素没有这样的问题）

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片底侧空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid orange;
        }
        img {
            /* 方法1：底线对齐 */
            /* vertical-align: bottom; */
            /* 方法2：垂直居中对齐 */
            /* vertical-align: middle; */
            /* 方法3：把图片转换成块级元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div> <img src="../access/wangxiaobo.jpg" alt="这是一个图片"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qjt8HEwp-1664763364572)(E:/frontend/html_css/Typora_image/221.png)]

1.4.7 溢出的文字省略号显示

1.单行文本溢出显示省略号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWDPZPxp-1664763364573)(E:/frontend/html_css/Typora_image/222.png)]

2.多行文本溢出显示省略号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Spv59PB4-1664763364576)(E:/frontend/html_css/Typora_image/223.png)]

1.4.7.1.单行文字溢出省略号显示

单行文本溢出显示省略号——必须满足三个条件

/* 1.如果文字显示不开，也必须一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
1
2
3
4
5
6

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background-color: rgb(147, 214, 21);
            /* 居中对齐的前提，设置了宽度 */
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开，自动换行  下面这行系统默认的，不用进行设置*/
            /* white-space: normal; */
            /* 1.如果文字显示不开，也必须一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏 */
            overflow: hidden;
            /* 3.文字用省略号替代超出的部分 */
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <div>
        梅雨季，是一个大而泛之的题材，如何抒写很考验写作者的功力。
        首先，这首诗的切入角度比较独特，“离吃饭还有一会儿/雨开始下
        我撑起黑色的伞往回走”，将时间定格于世俗生活片段，场景是开始
        下雨，行为是打着黑色的伞往回走，虽然没有交代从哪里到哪里（在
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OD48yUEB-1664763364578)(E:/frontend/html_css/Typora_image/224.png)]

1.4.7.2 多行文字溢出省略号显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bomjhuuj-1664763364579)(E:/frontend/html_css/Typora_image/226.png)]

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端(移动端大部分是webkit内核)

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文字溢出显示省略号</title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background-color: rgb(30, 118, 158);
            /* 水平居中对齐的前提，设定宽度 */
            margin: 100px auto;
            /*1. 溢出的部分隐藏 */
            overflow: hidden;
            /* 2.文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
            /* 3.弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 4.限制在一个块元素显示的文本的行数 */
            /* 要在第三行省略，可以把2改成3 */
            -webkit-line-clamp: 2;
            /* 5.设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>多行文字溢出显示省略号演示多行文字溢出显示省略号演示多</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tp6CcqT-1664763364581)(E:/frontend/html_css/Typora_image/225.png)]

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

2.常见的布局技巧

2.1 margin负值的运用

场景：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EsAT5g2n-1664763364582)(E:/frontend/html_css/Typora_image/227.png)]

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙应用</title>
    <style>
        ul li {
            /* 添加浮动，让块级元素在一行显示 */
            float: left;
            /* 取消掉li前面的小点 */
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 使用margin的负值解决重叠边框颜色过深的问题 */
            /* 值越大，向右移动 */
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <!-- 代码执行顺序，挨个执行li -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6oLOO2kH-1664763364584)(E:/frontend/html_css/Typora_image/228.png)]

实现原理，让第二个盒子的边正好压住第一个盒子的边

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSQxXiHr-1664763364586)(E:/frontend/html_css/Typora_image/229.png)]

拓展：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙应用</title>
    <style>
        ul li {
            /* 添加浮动，让块级元素在一行显示 */
            float: left;
            /* 取消掉li前面的小点 */
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 使用margin的负值解决重叠边框颜色过深的问题 */
            /* 值越大，向右移动 */
            margin-left: -1px;
        }
        /* 鼠标经过li,就让它的边框变成另外一种颜色 */
        ul li:hover {
            /* 第一种情况：如果盒子没有定位，则鼠标经过添加相对定位即可 */
            /* 相对定位占有位置，绝对定位占用位置 */
            position: relative;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <!-- 代码执行顺序，挨个执行li -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙应用</title>
    <style>
        ul li {
            /* 1.如果li因为特殊原因，需要加上相对定位 */
            position: relative;
            /* 添加浮动，让块级元素在一行显示 */
            float: left;
            /* 取消掉li前面的小点 */
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 使用margin的负值解决重叠边框颜色过深的问题 */
            /* 值越大，向右移动 */
            margin-left: -1px;
        }
        /* 鼠标经过li,就让它的边框变成另外一种颜色 */
        ul li:hover {
            /* 2. 如果li都有定位 */
            /*提高层级 来保证选中的盒子四个框都能变色 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <!-- 代码执行顺序，挨个执行li -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3tRuYmL-1664763364588)(E:/frontend/html_css/Typora_image/230.png)]

总结：

鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置)，如果有定位，则加z-index)

2.2 文字围绕浮动元素

场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WXVByNgR-1664763364589)(E:/frontend/html_css/Typora_image/231.png)]

巧妙运用浮动元素不会压住文字的特性

执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素的妙用</title>
    <style>
        /* 去除p的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: aqua;
            /* 水平居中，前提是设置了宽度 */
            margin: 0 auto;
        }
        /* 设置图片的大小 */
        .pic {
            /* 让图片盒子左浮动 */
            float: left;
            width: 70px;
            height: 60px;
            /* 让图片和文字隔断距离 */
            margin-right: 5px;
        }
        .pic img {
            /* 图片跟它父类大小一样 */
            width: 100%;
        } 
    </style>
    <!-- 浮动的本质是做环绕效果，在浮动图片的状态下，文字不会被图片遮盖 -->
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="../access/wangxiaobo.jpg" alt="这是一张图片">
        </div>
        <!-- 1.直接把文字放里面，不做处理 -->
        <p>文字围绕浮动元素的妙围绕浮动元素的妙用</p>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素的妙用</title>
    <style>
        .box {
            width: 300px;
            height: 70px;
            background-color: aqua;
            /* 水平居中，前提是设置了宽度 */
            margin: 0 auto;
        }
        /* 设置图片的大小 */
        .pic {
            /* 让图片盒子左浮动 */
            float: left;
            width: 70px;
            height: 60px;
            /* 让图片和文字隔断距离 */
            margin-right: 5px;
        }
        .pic img {
            /* 图片跟它父类大小一样 */
            width: 100%;
             /* 不设置高度100%，会让图片自适应，可能会凸出来 */
            height: 100%;
        } 
    </style>
    <!-- 浮动的本质是做环绕效果，在浮动图片的状态下，文字不会被图片遮盖 -->
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="../access/wangxiaobo.jpg" alt="这是一张图片">
        </div>
        <!-- 1.直接把文字放里面，不做处理 -->
        <p>文字围绕浮动元素的妙围绕浮动元素的妙用</p>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdtVP5q5-1664763364591)(E:/frontend/html_css/Typora_image/232.png)]

2.3 行内块的巧妙运用–布局技巧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KqgKzCVM-1664763364594)(E:/frontend/html_css/Typora_image/233.png)]

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块元素的巧妙应用</title>
    <style>
        /* 去掉所有的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 利用行内块元素，既可以设置宽度，高度，也可以在一行上，并且中间有缝隙，不需要调margin值， */
        /* 行内块元素最大的特点是在于，给父盒子添加text-alingn:center,里面所有的行内块元素都会实现水平         居中对齐 */
        /* 只要给父亲添加水平居中，那里面的行内元素和行内块元素都会跟着水平居中 */
        .box {
            text-align: center;
        }

        /* 行内块元素和块级元素才有大小 */
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            /* 让a里面的文字水平居中，垂直居中 */
            text-align: center;
            line-height: 36px;
            /* 去掉a的下划线 */
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        /* 考虑权重 */
        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            /* 去掉颜色 */
            background-color: #fff;
            /* 去掉边框 */
            border: none;
            /* 取消点击完之后的蓝色边框 */
            /* 这个input的蓝框,当你真正做项目的时候会发现,非常讨厌,你必定要去掉它!很简单:outline:none!设置之后就没啦! */
            outline: none;
        }

        /* 给输入框加样式 */
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
        }

        /* 给确定按钮加样式 */
        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- a{$}*8 -->
        <!-- 一键输入多行快捷键：Alt+Shift -->
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1cdzdpZ-1664763364596)(E:/frontend/html_css/Typora_image/234.png)]

2.3.1–布局技巧–CSS三角巧妙应用(上)

练习：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPobLNYe-1664763364598)(E:/frontend/html_css/Typora_image/235.png)]

原理：一个矩形盒子加一个三角线盒子。

难点：制作三角形盒子，代码如下：

width: 0;
height: 0;
/* border 的顺序：上右下左 */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大，右边框宽度稍小，其余边框该为0 */
border-width: 100px 50px 0  0;
1
2
3
4
5
6
7
8
9

全代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角强化的巧妙应用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* transparent 透明色 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid rgb(96, 211, 20);
            border-bottom: 0px solid rgb(24, 174, 201);
            border-left: 0px solid rgb(230, 31, 236); */
            /* border 的顺序：上右下左 */
            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大，右边框宽度稍小，其余边框该为0 */
            border-width: 100px 50px 0 0;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FbwA6K3-1664763364599)(E:/frontend/html_css/Typora_image/236.png)]

2.3.2–布局技巧–CSS三角巧妙应用(下)

执行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角强化的巧妙应用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* transparent 透明色 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid rgb(96, 211, 20);
            border-bottom: 0px solid rgb(24, 174, 201);
            border-left: 0px solid rgb(230, 31, 236); */
            /* border 的顺序：上右下左 */
            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大，右边框宽度稍小，其余边框该为0 */
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            /* 居中对齐的前提，设置了宽度 */
            margin: 0 auto;
            /* 给父亲添加垂直居中，让子孩子继承 */
            line-height: 24px;
            color: #fff;
            /* 加粗 */
            font-weight: 700;
        }

        .miaosha {
            /* 子绝父相 */
            position: relative;
            /* span是行内块，没有宽高，让左边盒子浮动，右边不浮动，右边盒子就会到左边来 */
            /* 文字会围绕浮动元素 */
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            /* 水平居中 */
            text-align: center;
            margin-right: 8px;

        }

        .miaosha i {
            position: absolute;
            /* 把小三角定位到右侧 */
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            /* border-width  上右下左 */
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            /* 给文字加删除线 */
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <!-- 专门做三角 -->
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AvbCKlzp-1664763364602)(E:/frontend/html_css/Typora_image/237.png)]

3.CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式。(也称为CSSreset)

每个网页都必须首先进行CSS初始化，以保证浏览器的兼容性

以京东CSS初始化代码为例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3onQ3fM1-1664763364603)(E:/frontend/html_css/Typora_image/238.png)]

将代码复制到VScode中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东CSS初始化</title>
    <style>
        /* 把我们所有标签的内外边距清零 */
        * {
            margin: 0;
            padding: 0
        }

        /* 斜体的文字不倾斜 */
        em,
        i {
            font-style: normal
        }

        /* 去掉li前面的小圆点 */
        li {
            list-style: none
        }

        img {
            /* border: 0;为了照顾低版本浏览器 如果图片外面包含了链接，会有边框的问题 */
            border: 0;
            /* 取消图片底侧有空白缝隙的问题 */
            vertical-align: middle
        }

        button {
            /* 当鼠标经过button按钮的时候，鼠标样式变成了小手 */
            cursor: pointer
        }

        a {
            /* 设置a标签的颜色和取消下划线 */
            color: #666;
            text-decoration: none
        }

        a:hover {
            /* 鼠标经过变成红色 */
            color: #c81623
        }

        /* 设置按钮，输入框的字体 */
        button,
        input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
        }

        /* 设置body样式，背景色，字体 */
        body {
            /* 抗锯齿形  文字放大之后会有拒斥形状，让文字显示的更大清晰 CSS3的写法 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            /* 所有文字大小是12px，1.5倍行高 */
            /* "\5B8B\4F53" 是宋体   把中文字体的名称用相应的Unicode编码来代替 这样浏览器兼容比较好 */
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        /* 自定义的样式 */
        .hide,
        .none {
            display: none
        }

        /* 清除浮动的写法 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }
    </style>
</head>

<body>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题

比如：

黑体	\9ED1\4F53
宋体	\5B8B\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/404829