CSS学习笔记之高级技巧 3.10

最新推荐文章于 2024-08-17 23:02:19 发布

Terry-98

最新推荐文章于 2024-08-17 23:02:19 发布

阅读量257

点赞数 1

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/qq_36450483/article/details/123389702

版权

1 精灵图（ sprites）

1.1 为什么需要精灵图

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

核心原理：将网页中的一些小背景图像整合到一张大图中

1.2 精灵图的使用

重点：

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

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

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

.box1 {
            width: 60px;
            height: 60px;   
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat   -182px 0;
          
        }

1.3 精灵图使用练习

原始图：

要求：根据原始图在网页中显示annk

实现效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .a {
            width: 100px;
            height: 112px;
            
           background-position:  0 0;
        }
        .n {
            width: 111px;
            height: 117px;
         
            background-position: -214px -134px;
        }
        .n {
            width: 108px;
            height: 109px;
            
            background-position: -215px -141px;
        }
        .k {
            width: 105px;
            height: 114px;
           
           background-position: -495px -142px;
        }
    </style>
</head>
<body>
    <span class="a"></span>
    <span class="n"></span>
    <span class="n"></span>
    <span class="k"></span>
</body>
</html>

2 字体图标

2.1 字体图标特点

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

精灵图的缺点：

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

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

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

字体图标 iconfont 提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标优点：

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

服务器请求

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

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

2.2 字体图标的使用

使用步骤：

1、字体图标的下载

推荐网站： icomoon 字库 http://icomoon.io 和 阿里 iconfont 字库 http://www.iconfont.cn

2、字体图标的引入

1）把下载包里面的 fonts 文件夹放入页面根目录下

2）在 CSS 样式中全局声明字体：把这些字体文件通过css引入到我们页面中。

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

3）html 标签内添加小图标

<span></span>

4）给标签定义字体。

span {
 font-family: "icomoon";
}

注意这个字体和上面@font-face里面的字体保持一致

2.3 字体图标的追加

若需要添加新的字体图标到原来的字体文件中，把压缩包里面的 selection.json 从新上传，然后选

中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

3 CSS三角

如上图所示有些广告栏会在边缘存在小三角

实现代码如下：

div {
 width: 0;
 height: 0;
 line-height: 0;
 font-size: 0;
 border: 50px solid transparent;
 border-left-color: pink;
}

4 CSS用户界面样式

目的：更改一些用户操作样式，以便提高更好的用户体验

4.1 鼠标样式 cursor

语法：li {cursor: pointer; }

4.2 轮廓线 outline

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

语法：input {outline: none; }

4.3 防止拖拽文本域 resize

目的：文本域右下角是不可以拖拽

语法：textarea{ resize: none;}

Terry-98

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS学习笔记之高级技巧 3.10

CSS学习笔记之高级技巧
复制链接

扫一扫