1.精灵图
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送
请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称
CSS Sprites、CSS 雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了
1.主要借助于背景位置来实现—先准备一个刚好装的下小图标的盒子,然后放到合适的位置,再插入背景图
background:url(插入背景图) no-repeat x y;注意插入背景图时是图片的左上角对齐盒子的左上角来放的,因此要通过x y的负值来移动到想要的精灵图标
2. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理。)
2.字体图标
字体图标 iconfont
可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为:
- 字体图标的下载
- 字体图标的引入 (引入到我们html页面中)
- 字体图标的追加 (以后添加新的小图标)
icomoon 字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn/
https://fontawesome.dashgame.com/
下载步骤:
引用
打开demo.html
追加
css三角
案例:京东三角
4.用户界面样式
- 更改鼠标样式
- 表单轮廓
- 防止表单拖拽
4.1更改鼠标样式
通过属性cursor,来设置鼠标经过的地方,光标的形状是怎样的
li{
cursor: pointer;}
/*设置当鼠标经过li时光标变成小手形状*/
属性值 | 说明 |
---|---|
default | 默认,白箭头形式 |
pointer | 小手 |
move | 移动光标 |
text | I字形的文本光标 |
not-allowed | 禁止光标 |
4.2表单控件
给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。
input {
outline: none;
}
4.3防止文本拖拽
resize属性来设置文本域textarea,防止文本域拖拽
textarea{ resize: none;}
5.vertical-align
用于设置一个元素的垂直对齐方式
,但是它只针对于行内元素或者行内块元素有效。
vertical-align : baseline | top | middle | bottom
属性使用场景
: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。
此
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐
了。
<style>
img {
vertical-align: middle;
}
</style>
<body>
<span><img src="images/adv.jpg" alt="">ddddj </span>
</body>
属性的使用场景
: 解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
- 给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
- 把图片转换为块级元素 display: block;
6.溢出文字省略号显示
单行文本溢出显示省略号–必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; ( 默认 normal 自动换行)
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
7.常见的布局技巧
1. margin负值运用
如何做到边框重叠1+1还是等于1
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框 2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如 果有定位,则加z-index) ,用相对定位,不脱标
2.文字围绕浮动元素
浮动就是为文字围绕产生的
如何设计下面的盒子?
准备一个父盒子,里面放一个子盒子装视频,设置为左浮,再设置右边距,就行了,文字就会在旁边显示,而且不会压住文字。
3. 行内块巧妙运用
页码在页面中间显示:而且有边距,用浮动还要设置边距,而用行内块不能设置,
- 把这些链接盒子转换为行内块, 之后给父级指定 text-align:center;
- 利用行内块元素中间有缝隙,并且给父级添加 text-align:center; 行内块元素会水平会居中
CSS 三角强化
css初始化
这里我们以 京东CSS初始化代码为例。
Unicode编码字体:
把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码
的问题。
比如:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1