精灵图
1. 为什么需要精灵图
-
网页中会使用很小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器的压力过大，这将大大降低页面的加载速度
-
因此，为了有效的减少服务器的接收和发送请求的次数，提高页面的加载速度，提出了CSS精灵技术
-
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就够了
2. 精灵图的使用
-
主要针对于背景图片的使用。把多个小图片整合到一张大图中，这个大图称为精灵图
-
移动图片背景位置，此时可以使用background-position
-
移动的距离就是这个目标图片的 x 和 y 坐标，往下往右坐标都是负值。
-
使用切片工具测出小图片的大小和坐标，不给坐标默认是左上角的位置
举个例子：
background: url(图片的位置) no-repeat -128px 0;
字体图标
使用场景：主要用于显示网页中通用、常用的一些小图标
上面说的精灵图有诸多优点，但是缺点也很明显：
- 图片文件还是比较大的
- 图片本身放大或缩小会失真
- 图片一旦制作完成要想更换非常复杂
此时，有一种技术的出现就很好的解决了以上问题。——字体图标iconfont
字体图标可以作为前端工程师提供的一种方便高效的图标使用方式，展示的是图标，本质属于字体（可以理解为不会失真，可以变大变小变漂亮...）
优点：
- 轻量级：一个字体图标要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
- 灵活性：本质其实是文字，可以随意改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有浏览器，放心使用
注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化
总结：
- 如果遇到一些样式结构比较简单的小图标，就用字体图标
- 遇到样式和结构复杂一点的图片，就用精灵图
1. 字体图标的下载
推荐下载网站：
- icomoon字库 icomoon.io
- 阿里iconfont字库 www.iconfont.cn/
2. 字体图标的引入（到HTML页面中）
- 把font文件夹放到页面根目录下（里面有多个字体文件，这样是为了浏览器的兼容）
- 在css样式中全局声明字体：把字体通过CSS引入到页面中，一定注意文字文件路径的问题
@font-face{
font-family:'icomoon';
....这个代码要从解压的文件夹的css的文件中复制到有font-display:block;的地方。
}
- 双击里面的demo的HTML文件，复制下图类似小框或者前面的编码部分放到元素标签里
<style>
span {
content：'\e900';
/*content:''*/
font-family: 'icomoon';
font-size: 5px;
color: pink;
}
</style>
<body>
<span>复制的小图标</span>
</body>
字体图标的追加（添加新的小图标）
把压缩包里的selection.josn从新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件
CSS三角
.box1 {
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
<div class="box1"></div>
实现结果：
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: pink;
}
<div class="box2"></div>
实现结果：
案例1：
<style>
div{
position:relative;
width: 100px;
height: 50px;
background-color: green;
margin: 100px auto;
}
span{
position: absolute;
left:100px;
bottom:15px;
width: 0;
height: 0;
/*为了浏览器的兼容*/
line-height: 0;
font-size: 0;
/*为了浏览器的兼容*/
border: 10px solid transparent;
border-left-color:green;
}
</style>
<div>
<span></span>
</div>
实现结果：
案例2：
<style>
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 700;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 14px 0 0;
}
.origin {
font-size: 12px;
color: grey;
text-decoration: line-through;
}
</style>
<div class="price">
<span class="miaosha">￥1650
<i></i>
</span>
<span class="origin">￥5650</span>
</div>
实现结果：
CSS用户界面样式
所谓界面样式，就是更改一些用户的操作样式，以便提高用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单被拖拽
1. 鼠标样式
li{
cursor:pointer;
}
设置或检索在对象上移动的鼠标指针 采用何种系统预定义的光标形状
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2. 轮廓线outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
input{
outline：none;
}
3. 防止文本拖拽resize
也默认有蓝色边框，右下角默认可以拖动。
textarea{
outline：none;
resize:none;
}
tip：
<textarea>这个标签写到一行上，不然光标前会有空格</textarea>
vertical-align属性应用
使用场景：经常用于设置图片或者表单元素（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是他只针对行内元素或者行内块元素有效
vertical—align: baseline | top | middle | bottom
| 标题 | 描述 |
|---|---|
| baseline | 默认，元素位置放在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素位置放在父元素的中间 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
display：inline-block;
vertical-align: middle;
1.图片、表单和文字对齐
图片、表单都属于行内块元素，默认的vertical-align是基线（baseline）对齐。
可以给图片、表单这些行内块元素的vertical-align属性设置为middle，就可以让文字和图片垂直居中对齐
2. 解决图片底部的空白缝隙
空隙是行内块元素和文字基线对齐。 发挥想象~
解决方法：
- 给图片添加vertical-align：middle | top | bottom等。（提倡使用）
- 把图片转换为块级元素 display：block;
溢出的文字用省略号显示
1. 单行文本溢出显示省略号
——必须满足三个条件
/*1.先强制一行内显示文本*/
white-space:nowrap;(默认normal自动换行)
/*2.超出部分隐藏*/
overflow:hidden;
/*3.文字用省略号来替代超出的部分*/
text-overflow:ellipsis;
2. 多行文本溢出显示省略号
多行文本溢出显示省略号有较大的兼容性问题，适合webkit浏览器或者移动端（移动端大部分是webkit内核）
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型*/
display:-webkit-box;
/*限制在一个块元素显示的文本行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;
更推荐后台人员来做这个效果，后台人员可以设置显示多少个字，操作更简单
常见布局技巧
1. margin负值运用
float: left;/*浮动会让两个盒子贴在一起*/
margin-left: -1px;/*贴在一起的盒子左移1px，就压住左边盒子的右边框*/
如果要上层的盒子在有鼠标经过时有边框，需要提高当前盒子的层级（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
1.如果盒子没有定位，则鼠标经过添加相对定位即可
ul li:hover{
position:relative;
border:1px solid blue;
}
2.如果里有定位，则用z-index提高盒子的层级
ul li:hover{
z-index:1;
border:1px solid blue;
}
2. 文字围绕浮动
利用浮动的元素不会压住文字的特性
文字会围绕浮动元素显示
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 70px;
background-color: pink;
margin: 100px auto;
padding:5px;
}
.pic {
float: left;
width: 60px;
height: 60px;
margin-right: 5px;
/* 图片和文字的距离 */
}
.pic img {
height: 100%;
}
</style>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】xxxxxxxxxxxxxx </p>
</div>
3. 行内块的巧妙应用
——页码 行内块元素和行内元素会因为text-align: center; 居中对齐，且有缝隙，行内块本身有大小
<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: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.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>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
实现结果：
