目录
精灵图
精灵图sprites的使用
1.主要针对背景图片的使用，把多个小背景图片整合到一张大图片中。
2.移动背景图片位置，此时可以使用background-position
3.移动的距离就是这个目标图片的x轴和y轴，注意网页中的坐标有所不同
4.一般情况下，都是往上，往左移动，所以数值都是负值
5.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
<style>
.box1 {
width: 60px;
height: 60px;
/* 分开写 */
/* background: url(images/jinglingtu.png);
background-position: -182px 0; */
/* 简写 */
background: url(images/jinglingtu.png) no-repeat -182px 0;
margin: 100px 100px;
}
.box2 {
width: 27px;
height: 25px;
background: url(images/jinglingtu.png) no-repeat -155px -106px;
margin: 200px 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
字体图标iconfont
可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
优点：
1.轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
2.灵活性：本质是文字，可以随意的改变颜色，产生阴影，透明效果，旋转等
3.兼容性：几乎支持所有的浏览器，请放心使用
字体图标的下载
icomoon字库 http://icomoon.io （国外）
iconfont字库 http://www.iconfont.cn/
字体图标的引入
1.把下载包里面的fonts文件夹放入页面根目录下
2.在CSS样式中全局声明字体：简单理解这些字体文件通过CSS引入到我们页面中
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?qtkmnl');
src: url('fonts/icomoon.eot?qtkmnl#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qtkmnl') format('truetype'),
url('fonts/icomoon.woff?qtkmnl') format('woff'),
url('fonts/icomoon.svg?qtkmnl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3.找到icomoon中的demo.html 打开
<span> </span>
<style>
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?qtkmnl');
src: url('fonts/icomoon.eot?qtkmnl#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qtkmnl') format('truetype'),
url('fonts/icomoon.woff?qtkmnl') format('woff'),
url('fonts/icomoon.svg?qtkmnl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color: red;
margin: 100px 100px;
}
</style>
</head>
<body>
<span></span>
</body> 
字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
做法：
把压缩包里面的selection.json 从新上传，然后选中自己想要的新的图标，从新下载压缩包，并替换原来的文件即可。
CSS三角
CSS用户界面样式
什么是界面样式
就是更改一些用户操作样式，以便提高更好的用户体验
鼠标样式 cursor
li { cursor : pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allwed | 禁止 |
fSF
轮廓线outline
给表单添加outline：0； 或者 outline: none; 样式之后，他就可以去掉默认的蓝色边框。
文本域 防止拖拽文本域 resize
textarea { resize： none；}
vertical-align属性应用
使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。
语法：
vertical-align ：baseline / top / middle / bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行内最高元素的顶端对齐 |
| middle | 把元素放置在父元素的中部 |
| bottom | 把元素的顶端与行内最低的元素的顶端对齐 |
图片底侧空白缝隙解决方案
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加vertival-align：middle / top / bottom 等（提倡使用的）
2.把图片转换为块级元素 display：block；
溢出的文字用省略号显示
单行文本溢出显示省略号
1.先强制一行内显示文本
white-space：nowrap；（normal自动换行，nowrap不自动换行）
2.超出的部分隐藏
overflow：hidden；
3.文字用省略号替代超出的部分
text-overflow ：ellipsis；（ellipsis省略号）
多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适用于webKit浏览器或移动端（移动端大部分是webKit内核）
overflow:hidden；
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display:-webkit-box;
/ * 限制在一个块元素显示的文本的行数 * /
-webkit-line-clamp:2;
/ * 设置或检索伸缩盒对象的子元素的队列方式 * /
-webkit-box-orinet:verical;
常见布局技巧
margin负值的应用
1.让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位<保留位置>，如果有定位，则加z-index）
ul li:hover {
/* 1.如果盒子没有定位，则鼠标经过添加相对定位即可 */
position: relative;
border: 1px solid blue;
}
ul li:hover {
/* 2.如果盒子都有定位，则鼠标经过添加z-index提高等级 */
z-index: 1;
border: 1px solid blue;
}
文字围绕浮动元素
巧妙的运用浮动元素不会压住文字的特性
浮动的图片不会压住旁边的文字，浮动最开始就是为了做文字环绕的效果
行内块的巧妙运用
给父级居中对齐，加上text-align:center; 那么子级也会都具有居中对齐的效果
css三角强化
<title>CSS三角强化的巧妙运用</title>
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大，并改为透明色 */
border-top: 100px solid transparent;
border-right: 50px solid blue;
/* 左边和下边的边框宽度设置为0 */
border-bottom: 0 solid red;
border-left: 0 solid pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
示例
<title>CSS三角强化的巧妙运用</title>
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大，并改为透明色 */
/* border-top: 100px solid transparent; */
/* border-right: 50px solid blue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid red; */
/* border-left: 0 solid pink; */
/* 简写为 */
/* 1.只保留右边的边框颜色 */
border-color: transparent red 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 red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
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 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
￥1650
<i></i>
</span>
<span class="origin">￥5600</span>
</div>
</body>
</html> 
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
