web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图（有效减少服务器介绍和发送请求的次数，提高页面的加载速度）
将网页的小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了
background-position （图片往坐标左边走）右正左负 下正上负
x y
------------------------------ x轴
|
| 图片 （小图片） 取到小图片就需要图片往坐标左边走
|
|
y轴
.box1{width: 60px;height: 60px;margin:100px auto;background: url(images/sprites.png) -182px 0;}
.box2{width: 27px;height: 25px;margin:400px auto;background: url(images/sprites.png) -155px -106px;}
小练习：将自己名字排成精灵图
span{background:url("images/abcd.jpg");display: inline-block;width: 110px;height: 110px;}
.c{background-position: -240px -8px;}
.r{background-position: -138px -413px;}
.y{background-position: -366px -556px;}
.s{background-position: -257px -418px;}
.t{background-position: -367px -416px;}
.a{background-position: 3px -10px;}
.l{background-position: 1px -276px;}
2.字体图标的引入（https://icomoon.io或者阿里图标库）
流程：1.先在https://icomoon.io中选择图标并下载
2.在下载中的文件夹中找到font（字体文件）并放到网站根目录
3.在样式中引入字体
4.在标签中引用
@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;
}
span {
font-family: 'icomoon';
font-size: 400px;
color:skyblue;
}
5.字体图标的追加（选择icomoon中的selection.json选择icoMoom app=>import Icons=>重新选择图标并追加到之前的图标中，再点击下载即可）
3.css三角
（1）简单的css三角制作
.box1{
width: 0;
height: 0;
margin:0 auto;
border-left:100px solid #c00;
border-right:100px solid pink;
border-top:100px solid orange;
border-bottom:100px solid skyblue;
}
.box2{
width: 0;
height: 0;
margin:0 auto;
border: 100px solid transparent;
border-left: 100px solid #c00;
}
（2）盒子外小三角
.box1{position: relative;width: 200px;height: 100px;background: pink;margin:100px auto;}
.box1 span{position: absolute;width: 0;height: 0;/*为了兼容性*/font-size: 0;line-height: 0;border: 10px solid transparent;border-bottom-color: #c00;left: 100px;top: -20px;}
（3）课堂小案例
.box1{position: relative;width: 200px;height: 100px;background: skyblue;margin:100px auto;}
.box1 span{position: absolute;width: 0;height: 0;/*为了兼容性*/font-size: 0;line-height: 0;border: 10px solid transparent;border-left-color: #c00;right: -20px;top:40px;}
3.鼠标样式cursor
default：小白默认
pointer：小手
move：移动
text：文本
not-allowed：禁止
- 我是默认的小白鼠标样式
- 我是鼠标小手样式
- 我是鼠标移动样式
- 我是鼠标文本样式
- 我是鼠标禁止样式
4.轮廓线 outline 与 防止textarea边框拖拽
input,textarea{/*取消表单轮廓*/outline:none;}
textarea{resize:none;}
5.vertical-align（只针对行内元素或行内块元素有效）
baseline：元素放置在父元素的基线上
top：把元素的顶端与行内中最高元素的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行内最低的元素顶端对齐
img{vertical-align: baseline;vertical-align: top;vertical-align: middle;vertical-align: bottom;}
textarea{vertical-align:middle;}
野菜花田里拉钩钩
拉钩钩图片底部空白间隙的解决方案
（1）图片加vertical-align: bottom或vertical-align: top
文字
（2）把图片转换为块级元素（display:block）
6.文本溢出显示省略号
（1）单行文本溢出显示省略号
div{
width: 150px;
height: 80px;
background: #c00;
margin: 100px auto;
/*1.文字显示不开也必须强制一行内显示*/
white-space: nowrap;
/*2.溢出的部分隐藏起来*/
overflow: hidden;
/*3.文字溢出时用省略号来显示*/
text-overflow: ellipsis;
}
花非花，雾非雾。小小苗儿迎风露，将来一定成大树（2）多行文本溢出显示省略号（有较大兼容性问题，适用于webkit浏览器或移动端）
div{
width: 150px;
height: 80px;
background: #c00;
margin: 100px auto;
/*1.溢出的部分隐藏起来*/
overflow: hidden;
/*2.文字溢出时用省略号来显示*/
text-overflow: ellipsis;
/*3.弹性伸缩盒子模型显示*/
display: -webkit-box;
/*4.限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*5.设置或者检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;
}
花非花，雾非雾。小小苗儿迎风露，将来一定成大树7.margin负值的巧妙运用
ul li{
position: relative;
float: left;width: 100px;
height: 180px;
margin-left: -1px;
border: 1px solid #333;
list-style:none;
}
ul li:hover{z-index: 1;border: 1px solid blue;}
8.文字围绕浮动元素的妙用
.box{width: 400px;height: 70px;background: green;margin: 100px auto;}
.pic{float: left;width: 120px;height: 70px;}
img{width: 100%;background: yellow;height: 100%;}
![]()
桃花坞里桃花庵，桃花庵下桃
花仙。桃花仙人种桃树，又摘桃花换酒钱。桃花坞里桃花庵，桃花庵下桃
花仙。
9.行内块元素的巧妙运用（分页）
.box{text-align: center;}
.box a{width: 36px;height: 36px;line-height: 36px;background: #fff;border: 1px solid #ccc;text-align: center;font-size: 14px;display: inline-block;margin-top: 100px;}
.box a:hover{border: 1px solid #c00;color: #c00;}
.box .prev,.box .next{width: 85px;}
.box .ellipsis{border: 0;}
.box input{width: 35px;height: 36px;border: 1px solid #ccc;outline: none;margin-right: 11px;padding: 0 10px;}
.box button{width: 60px;height: 40px;background: #fff;border: 1px solid #ccc;}
10.css三角强化的巧妙运用
.box1{
width: 0;height: 0;font-size: 0;line-height: 0;
/*把上边框宽度调大*/
/* border-top: 100px solid transparent;
border-right: 50px solid pink;*/
/*左边下边边框宽度设置为0*/
/*border-bottom: 0 solid skyblue;
border-left: 0 solid orange;*/
/*1.只保留右边的边框有颜色*/
border-color: transparent #c00 transparent transparent;
/*2.样式都是solid*/
border-style: solid;
/*3.上边框宽度要大，有边框宽度稍小，其余边框宽度为0*/
border-width: 100px 50px 0 0 ;
}
.price{width: 160px;height: 24px;line-height: 24px;border: 1px solid #c00;margin: 0 auto;position: relative;}
.miaosha{float: left;width: 90px;height: 100%;background: #c00;text-align: center;color: #fff;font-weight: 700;}
.miaosha i{width: 0;height: 0;font-size: 0;line-height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 16px 0 0;position: absolute;right: 70px;}
.Aprice{text-decoration: line-through;color: #ccc;font-size: 14px;}
$1650
$26000