CSS：高级寄巧

news2024/11/19 16:17:13

精灵图

为什么需要精灵图呢？

4fcbf07b257b40be97eec8882f6905be.png

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

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

核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了

f13ef6cd14f54169bce1aef03bd13464.pngc927faf853324fd79dbb16ce89dc4d33.png

这是王者和淘宝的精灵图

使用精灵图的核心：

00e5fb9daa9a4a66b73f8951129d248f.png

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background:url(./IMG王者3d.png);
            background-position: -182px 0;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

91a360e173b44e99a0edda2253b5d641.png 

耶

字体图标

字体图标使用场景：网页中通用的小图标

精灵图有很多优点，但是也有很多缺点：

1.图片文件比较大

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

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

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

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

字体图标优点：

27d67f07b96842df89b4fc320ab76282.png

所以简单就用字体图标

复杂就用精灵图

字体图标是网页常见的图标，直接网上下载即可e21e0735f1ac4468abfbd70a55f54e78.png

1.字体图标的下载

2.字体图标的引入（到html页面中）

3.字体图标的追加（以后添加新的小图标）

字体图标下载推荐网站：

http://icomoon.io

http://www.iconfont.cn/

第一个是外网要挂梯子

页面长这样：

 8a02302ac48040368cd49c73ebbea612.png

选择完点右下角打包下载到本地

再解压 有很多种样式可供选择

299a0a34ebcf40ec83896b874eb98aae.png

 引入就需要把下载包里面的fonts文件夹放到页面根目录下

91c68cfe2b3e4d618c464bed90521d0b.png

字体图标可爱捏：

64b64d1ba9ce496783775f7aa5e8ee2d.png

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?b7s6ss');
            src: url('fonts/icomoon.eot?b7s6ss#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?b7s6ss') format('truetype'),
                url('fonts/icomoon.woff?b7s6ss') format('woff'),
                url('fonts/icomoon.svg?b7s6ss#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        span{
            font-size: 100px;
            color: black;
            font-family: 'icomoon';
        }
        p{
            font-size: 100px;
            color: rgb(13, 148, 13);
            font-family: 'icomoon'; 
        }
    </style>
</head>

<body>
    <span></span>
    <p></p>
</body>

</html>

11b56c8ae667412dafa9d61db89485df.png

如果之后要新增，点上面那个选择文件：

c0e26824548045e1a7febc2b77212790.png

 560ee27b10764985a727468b76f88731.png

这样就可以新增了 

字体图标加载原理：

1cf634c10ba1437da486cfe5eaba7d80.png

CSS三角

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

8edf41e123c546c1a2c352f9f841f42e.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
     div { 
        width: 0; 
        height: 0; 
        line-height: 0; 
        font-size: 0; 
        border: 50px solid transparent; 
        border-left-color: pink; 
        } 
   </style>
</head>
<body>
    <div></div>
</body>
</html>

 f84d9d3e76354559b45297275f136687.png

CSS用户界面样式

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

更改用户的鼠标样式

li {cursor: pointer; }

这是语法，可以设置或检索在对象上移动的鼠标指针采取何种系统预定义的光标形状

 8808961b404e4971a473d1eaae75634a.png

表单轮廓

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

input {outline: none; }

防止表单域拖拽

在实际开发中，文本域右下角是不可以拖拽的：

textarea{ resize: none;}

vertical-align属性应用

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

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

语法：

vertical-align : baseline | top | middle | bottom

00c9b35e52f8475c8d07436c3133a039.png 

ea0a0846ccf44c719f1b80c3a1f864f1.png 

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

d6d11081522b4c39b00f88269e87291b.png

vertical-align可以解决图片底部默认空白缝隙问题

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

主要解决方法有两种：

1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

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

add4380f509046efbc4ba67fb3c8beaf.png 

3e0d6ef2de554803aba6845d5b26b72d.png

溢出的文字省略号显示

单行文本溢出显示省略号：

99f70dceef7a4626bac59e00d3430d21.png

多行文本溢出显示省略号：

533b6a7062e94963ad96ad73bf3fef50.png

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

/*1. 先强制一行内显示文本*/ 
 white-space: nowrap; （ 默认 normal 自动换行） 
 /*2. 超出的部分隐藏*/ 
 overflow: hidden; 
 /*3. 文字用省略号替代超出的部分*/ 
 text-overflow: ellipsis; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
     div { 
        width: 100px;
        height: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: cadetblue;
    } 
   </style>
</head>
<body>
    <div>西安邮电你是杀不死我的哈哈哈哈哈哈哈哈</div>
</body>
</html>

a3644a3844f247928e8a61f117b021ce.png

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

overflow: hidden; 
text-overflow: ellipsis; 
/* 弹性伸缩盒子模型显示 */ 
display: -webkit-box; 
/* 限制在一个块元素显示的文本的行数 */ 
-webkit-line-clamp: 2; 
/* 设置或检索伸缩盒对象的子元素的排列方式 */ 
-webkit-box-orient: vertical; 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 43px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div>西安邮电你是杀不死我的哈哈哈哈哈哈哈哈</div>
</body>

</html>

 4498b74ca3994556948cdd77c59a0826.png

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

又有我们的事了么

我补药

 有一些东西可以帮我们进行技术更快更好的布局

常见布局寄巧

margin负值的运用

9b23b64656c64417a0ad5da81db08cb4.png

这是为了让1+1=1

 d956cec10b6c4c2381ad9d0e47d50383.png

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

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

文字围绕浮动元素

b67043edb5c54d369b6b4fd23e407688.png

文字围绕浮动元素就是在巧妙运用浮动元素不会压住文字的特性

行内块的巧妙运用

8671392c739f4f649011454826f19b43.png

页码在页面的中间显示：

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center

2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            text-align: center;
        }
        .box a{
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 16px;
        }
        .box .prev,
        .box .next{
            width: 85px;
        }
        .box .current,
        .box .elp{
            border: 0;
            background-color: white;
        }
        .box input{
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button{
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
    <a href="#" class="prev">&lt;&lt;上一页</a>
    <a href="#">1</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="#">7</a>
    <a href="#">8</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next">&gt;&gt;下一页</a>
    到第
    <input type="text">
    页
    <button>确定</button>
    </div>
</body>
</html>

f6fcce10089c4762a08afed485d26c90.png 

CSS三角强化

我们来实现这样的布局吧：

e62b4b0924eb4b8d8e4784754c74f658.png

它的原理也是三角

26826b3d55b54a82a6b559b946a856ac.png

width: 0; 
height: 0; 
border-color: transparent red transparent transparent; 
border-style: solid; 
border-width: 22px 8px 0 0; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 0;
            height: 0;
            /* 上边框宽度调大 */
            border-top: 100px solid transparent;
            border-right: 50px solid skyblue;
            /* 左下的边框宽度设置为0 */
            border-bottom: 0;
            border-left: 0;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>

然后实现京东的那个图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .price{
            width: 160px;
            height: 24px;
            border: 1px solid red;
            text-align: center;
            line-height: 24px;
            margin: 0 auto;
        }
        .left{
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            font-size: 16px;
            color: white;
            font-weight: 700;
            margin-right: 8px;
        }
        .left i{
            position: absolute;
            right: 0;
            height: 0;
            border-style: solid;
            border-top: 24px solid transparent;
            border-right: 10px solid white;
            border-bottom: 0;
            border-left: 0;
        }
        .right{
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="price">
        <span class="left">
            $1449
            <i></i>
        </span>
        <span class="right">
            $1650
        </span>
    </div>
</body>
</html>

fd9e5c798f1048468587a4108f7905c5.png

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

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

每个网页都必须首先进行 CSS初始化。

Unicode编码字体：

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

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2243490.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【原创】如何备份和还原Ubuntu系统，非常详细！！

【原创】如何备份和还原Ubuntu系统，非常详细！！

前言 我在虚拟机装了一个xfce4的Ubuntu桌面版&#xff0c;外加输入法、IDEA等&#xff0c;我想将这个虚拟机里的系统直接搬到物理机中&#xff0c;那我可以省的再重新装一遍、配置xfce4桌面、修改一堆快捷键还有配置idea了&#xff0c;那直接说干就干。 本教程基于Ubuntu24.0…
阅读更多...
SAM_Med2D 训练完成后boxes_prompt没有生成mask的问题

SAM_Med2D 训练完成后boxes_prompt没有生成mask的问题

之前对着这这篇文章去微调SAM_Med2D(windows环境),发现boxes_prompt空空如也。查找了好长时间问题SAM-Med2D 大模型学习笔记&#xff08;续&#xff09;&#xff1a;训练自己数据集_sam训练自己数据集-CSDN博客 今天在看label2image_test.json文件的时候发现了一些端倪: 官方…
阅读更多...
数据结构-二叉搜索树（Java语言）

数据结构-二叉搜索树（Java语言）

目录 1.概念 2.查找search 3.插入insert ​编辑4.删除remove&#xff08;难点&#xff09; 5.性能分析 1.概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树 : 1.若它的左子树不为空&#xff0c;则左子树上所有节点的值都…
阅读更多...
【蓝桥杯备赛】深秋的苹果

【蓝桥杯备赛】深秋的苹果

# 4.1.1. 题目解析 要求某个区间内的数字两两相乘的总和想到前缀和&#xff0c;但是这题重点在于两两相乘先硬算&#xff0c;找找规律&#xff1a; 比如要算这串数字的两两相乘的积之和&#xff1a; 1, 2, 3 1*2 1*3 2*3 1*(23) 2*3 前缀和数组&#xff1a; 1 3 6 发现…
阅读更多...
go-zero(一) 介绍和使用

go-zero(一) 介绍和使用

go-zero 介绍和使用 一、什么是 go-zero&#xff1f; go-zero 是一个基于 Go 语言的微服务框架&#xff0c;提供了高效、简单并易于扩展的 API 设计和开发模式。它主要目的是为开发者提供一种简单的方式来构建和管理云原生应用。 1.go-zero 的核心特性 高性能&#xff1a; g…
阅读更多...
3. Sharding-Jdbc核⼼流 程+多种分⽚策略

3. Sharding-Jdbc核⼼流 程+多种分⽚策略

1. Sharding-Jdbc 分库分表执⾏核⼼流程 Sharding-JDBC执行流程 1. SQL解析 -> SQL优化 -> SQL路由 -> SQL改写 -> SQL执⾏-> 结果归并 ->返回结果简写为&#xff1a;解析->路由->改写->执⾏->结果归并1.1 SQL解析 1. SQL解析过程分为词法解析…
阅读更多...
编程之路，从0开始：结构体详解

编程之路，从0开始：结构体详解

目录 前言 正文 1、结构体引入 2、结构体的声明 3、typedef 4、结构体的匿名声明 5、结构的自引用 &#xff08;1&#xff09;链表 &#xff08;2&#xff09;自引用 6、结构体内存对齐 &#xff08;1&#xff09;对齐规则 &#xff08;2&#xff09;题目 &#x…
阅读更多...
01_MinIO部署（Windows单节点部署/Docker化部署）

01_MinIO部署（Windows单节点部署/Docker化部署）

单节点-Windows环境安装部署 在Windows环境安装MinIO&#xff0c;主要包含两个东西&#xff1a; MinIO Server&#xff08;minio.exe&#xff09;&#xff1a;应用服务本身MinIO Client&#xff08;mc.exe&#xff09;&#xff1a;MinIO客户端工具&#xff08;mc&#xff09;…
阅读更多...
qt5半成品飞机大战小游戏

qt5半成品飞机大战小游戏

最近在学Qt&#xff0c;心血来潮做了个飞机大战小游戏&#xff0c;由于一些资源比较难找&#xff0c;就做了个半成品。效果图如下&#xff1a; 目前已做功能&#xff1a;人物飞机的自由移动&#xff0c;子弹的发射&#xff0c;子弹与敌机的物体碰撞,碰撞特效。 缺少功能&#x…
阅读更多...
html 图片转svg 并使用svg路径来裁剪html元素

html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址: Vectorizer – 免费图像矢量化 打开svg图片,复制其中的path中的d标签的路径 查看生成的svg路径是否正确 在线SVG路径预览工具 - UU在线工具 2.在html中使用svg路径 <svg xmlns"http://www.w3.org/2000/svg" width"318px" height…
阅读更多...
Android OpenGL ES详解——几何着色器

Android OpenGL ES详解——几何着色器

目录 一、概念 1、图元 2、几何着色器 1、输入类型 2、输出类型 3、输出顶点数量最大值限制 二、使用几何着色器 三、应用举例——造几个房子 四、应用举例——爆破物体 1、获取法向量 2、显示法线 五、应用举例——细分三角形 六、应用举例——广告牌技术 一、概…
阅读更多...
基因组之全局互作热图可视化

基因组之全局互作热图可视化

引言 PlotHiC 是一个专为 Hi-C 数据可视化分析而设计的 Python 包。Hi-C 技术是一种能够检测染色体三维结构的实验方法&#xff0c;它能揭示 DNA 在细胞核内的三维组织结构。为了更好地展示和解释这些复杂的数据&#xff0c;PlotHiC[1] 可以帮助用户方便地绘制Hi-C 数据的热图。…
阅读更多...
JVM详解：类的加载过程

JVM详解：类的加载过程

JVM中类的加载主要分为三个部分&#xff0c;分别为加载&#xff08;loading&#xff09;&#xff0c;链接&#xff08;linking&#xff09;&#xff0c;初始化&#xff08;initing&#xff09;。其中加载负责的主要是讲类文件加载到内存中变为类对象&#xff0c;不过此时只有基…
阅读更多...
FPGA开发流程

FPGA开发流程

注&#xff1a;开发板&#xff1a;小梅哥的ACX720。本实验可直接运行在小梅哥的ACX720开发板上&#xff0c;后续的实验都可直接运行在小梅哥的ACX720上。 一、打开VIVADO并创建工程 1、双击VIVADO图标&#xff0c;打开vivado。 2、打开vivado界面打&#xff0c;点击有 Create …
阅读更多...
免费开源！DBdoctor推出开源版系统诊断工具systool

免费开源！DBdoctor推出开源版系统诊断工具systool

​前言 在开发和运维过程中&#xff0c;经常会遇到难以定位的应用问题&#xff0c;我们通常需要借助Linux系统资源监控工具来辅助诊断。然而&#xff0c;系统的IO、网络、CPU使用率以及文件句柄等信息通常需要通过多个独立的命令工具来获取。在没有部署如Prometheus这样的综合…
阅读更多...
Restful API接⼝简介及为什么要进⾏接⼝压测

Restful API接⼝简介及为什么要进⾏接⼝压测

一、RESTful API简介 在现代Web开发中&#xff0c;RESTful API已经成为一种标准的设计模式&#xff0c;用于构建和交互网络应用程序。本文将详细介绍RESTful API的基本概念、特点以及如何使用它来设计高效的API接口。 1. 基于协议 HTTP 或 HTTPS RESTful API通常使用HTTP&am…
阅读更多...
R语言统计分析与MATLAB数学建模书籍推荐

R语言统计分析与MATLAB数学建模书籍推荐

文章目录 一、《R语言统计分析与可视化》1.1 内容核心1.2 内容简介 二、《MATLAB数学建模从入门到精通》2.1 关键点2.2 内容简介2.3 作者简介 一、《R语言统计分析与可视化》 R语言统计分析与可视化从入门到精通。学R语言、练语法、取数据、预处理、可视化、回归分析、方差分析…
阅读更多...
智慧社区平台系统提升物业管理效率与居民生活质量

智慧社区平台系统提升物业管理效率与居民生活质量

内容概要 智慧社区平台系统是为应对现代城市管理挑战而诞生的重要工具。随着城市化进程的加快&#xff0c;传统的物业管理方式已经难以满足日益增长的居民需求和管理复杂性。因此&#xff0c;引入智能化管理手段显得尤为重要。这个系统不仅仅是一个简单的软件&#xff0c;它是…
阅读更多...
【ASR技术】WhisperX安装使用

【ASR技术】WhisperX安装使用

介绍 WhisperX 是一个开源的自动语音识别&#xff08;ASR&#xff09;项目&#xff0c;由 m-bain 开发。该项目基于 OpenAI 的 Whisper 模型&#xff0c;通过引入批量推理、强制音素对齐和语音活动检测等技术。提供快速自动语音识别&#xff08;large-v2 为 70 倍实时&#xf…
阅读更多...
STM32CUBEIDE FreeRTOS操作教程（九）：eventgroup事件标志组

STM32CUBEIDE FreeRTOS操作教程（九）：eventgroup事件标志组

STM32CUBEIDE FreeRTOS操作教程&#xff08;九&#xff09;&#xff1a;eventgroup事件标志组 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件&#xff0c;不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发板为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023