CSS 精灵图 + 字体图标

最新推荐文章于 2022-05-04 15:07:13 发布

鲸渔要加油

最新推荐文章于 2022-05-04 15:07:13 发布

阅读量262

点赞数 1

分类专栏：基础学习文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/qq_53283188/article/details/114526959

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

高级技巧

1·精灵图

1.基于设计稿明确盒子大小（宽和高）
2.使用像素大厨等工具测量图片偏移坐标；
3.布局时给盒子指定：width、height 和 background 属性：

width: 60px;
height: 60px;
background: url(./images/sprites.png) no-repeat -px -px;

2·字体图标

网站：

icomoon字库https://icomoon.io/(opens new window)
iconfont 阿里字库 https://www.iconfont.cn/

第一步：到网站下载字体图标，把下载包里面的 fonts 文件夹放入页面根目录下

第二步：字体图标引入，一定要注意字体文件路径问题

<!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?p4ssmb");
        src: url("fonts/icomoon.eot?p4ssmb#iefix") format("embedded-opentype"),
          url("fonts/icomoon.ttf?p4ssmb") format("truetype"),
          url("fonts/icomoon.woff?p4ssmb") format("woff"),
          url("fonts/icomoon.svg?p4ssmb#icomoon") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }
      /* 第三步声明字体*/
      i {
        /*font-family: "icomoon"一定要写 */
        font-family: "icomoon";
        color: red;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <!-- 第二步准备一个标签-->
    <i></i>   or    <i>'\eqie'</i>
  </body>
</html>

3·css三角形

三角形的形成就是由宽高为0的盒子的颜色边框和transparent透明边框的粗细相互构成，本质是个长方形.
设置行高和字体，以保证兼容性：line-height: 0; font-size: 0;

4·鼠标样式

cursor: default; 默认样式
cursor: pointer; 小手
cursor: move; 移动
cursor: text; 文本
cursor: not-allowed; 禁止
cursor: zoom-in; 放大（后期搭配js使用）
cursor: zoom-out; 缩小（后期搭配js使用）

5·表单轮廓

input { outline: none; } 给表单添加，可去掉默认的蓝色边框.

6·禁止表单域拖拽

textarea{ resize: none; }

7·图片文字对齐

vertical-align 属性
vertical-align: top | middle | baseline | bottom
vertical-align : 顶部 | 中部 | 基线 | 底部

图片底部空白解决方案

给图片添加vertical-align: top | middle | bottom也可以解决行内，行内块元素底部缝隙
把图片转换为块级元素 display: block;

8·溢出文字显示省略号

单行文字溢出

/* 1. 强制在一行显示文本，默认 normal 会自动换行 */
white-space: nowrap;

/*2 . 超出的部分隐藏 */
overflow: hidden;

/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

多行文字溢出

/* 1. 超出的部分隐藏 */
overflow: hidden;

/* 2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

多行文字溢出有兼容性问题，在实际工作中一般推荐后端完成，后端可以限制字数

9·margin负值解决盒子边框

float: left; margin-left: -1px;

鼠标放在盒子上显示边框

盒子没有定位

ul li:hover {
  position: relative;
  border: 1px solid color;
}

盒子有定位

ul li:hover {
  z-index: 1;
  border: 1px solid color;
}

鲸渔要加油

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
CSS 精灵图 + 字体图标

高级技巧1·精灵图1.基于设计稿明确盒子大小（宽和高）2.使用像素大厨等工具测量图片偏移坐标；3.布局时给盒子指定：width、height 和 background 属性：width: 60px;height: 60px;background: url(./images/sprites.png) no-repeat -px -px;2·字体图标网站：icomoon字库https://icomoon.io/(opens new window)iconfont 阿里字库 ht
复制链接

扫一扫

专栏目录