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.字体图标
-
字体图标的使用方法
推荐下载网站: 阿里巴巴矢量图标库:
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; 行内块元素会水平会居中