精灵图,字体图标

0908 精灵图，字体图标等

1.精灵图

• 精灵图的使用

  使用 标签

  • 使用“url”引入所使用的精灵图
  • 使用-background-position 来更改图片所在的位置（一般使用的是负值）： x轴右边走是正值，左边走是负值， y轴同理

• 精灵图的主要结构

  * {
  	margin: 0;
  	padding: 0;
  	}
  i {
  	display: inline-block;
  	background-image: url(abcd.jpg);
  	}
  .one {
  	width: 109px;
  	height: 112px;
  	background-position: 0 -274px;
  	}
  .two {
  	width: 61px;
  	height: 108px;
  	background-position: -323px -138px;
  	}
  .three {
  	width: 120px;
  	height: 114px;
  	background-position: -471px -417px;
  	}
  

  注：使用精灵图是在整个图片的左上角算起

2.字体图标

• 字体图标的使用方法

  推荐下载网站： 阿里巴巴矢量图标库：

  https://www.iconfont.cn/

  ​ 1.创建项目

  ​ 2.寻找图标

  ​ 3.下载到本地并解压

  ​ 4.使用标签的“herf”属性引入刚解压的文件

  ​ 5.标签的class类名中写入刚解压文件中的自定义字体和图片所属的类名

  注：使用的字体图标是文字类型，更改时使用的是文字的属性。

3.css的三角形

• ​ 使用css属性的边框属性做三角形

  div {
  	width: 0;
  	height: 0;
  	border: 50px solid transparent;
  	border-color: red green blue black;
  	line-height:0;
  	font-size: 0;
  }
  

• 向上的三角形（其他方位的三角形同理）

  	<div class="box2"></div>
  .box2 {
  	width: 0;
  	height: 0;
  	border: 50px solid transparent;
  	border-bottom-color: pink;
  	margin: 100px auto;
  }
  

4.鼠标的样式（cursor：pointer；）

注：主要的就是 cursor：pointer；鼠标悬停时变成小手

5.轮廓线 outline

​ 轮廓线就是点击时边框所变换颜色

​ 给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。（一般使用的是标签）

input {
	outline: none;
}

6. 防止拖拽文本域 resiz

​ 实际开发中，我们文本域右下角是不可以拖拽的。

textarea{
	resize: none;
}

提示文字

7.vertical-align 属性应用

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

语法

vertical-align : baseline | top | middle | bottom

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

8.图片，表单和文字对齐

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

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

9.溢出文字的省略号

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

	/*1. 先强制一行内显示文本*/
	white-space: nowrap; （ 默认 normal 自动换行）
	/*2. 超出的部分隐藏*/
	overflow: hidden;
	/*3. 文字用省略号替代超出的部分*/
	text-overflow: ellipsis;

10.行内块的巧妙运用

​ 页码在页面中间显示:

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

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

ellipsis;

### 10.行内块的巧妙运用

​	页码在页面中间显示: 

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

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