一、精灵图
1.精灵图(sprites)的使用
- 主要针对背景图使用,把多个小背景图正和岛一张大图片中。
- 大图即为精灵图(雪碧图)
- 移动背景图位置可用background -position
- 移动的距离就是目标图片的x,y轴(y轴是向下为正)
- 要精确测量
二、字体图标
iconfont
1.优点
2.网站下载
3.字体图标引入
(1)下载好之后先把fonts文件夹移到和页面相同的文件夹里
(2)
(3)
3.字体图标的追加
三、CSS三角
四、CSS用户界面样式
1.更改鼠标样式
li {cursor:pointer} 设置或检索对象上移动的鼠标指针采用何种系统预一定的光标形状
default | 小白(默认) |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
2.轮廓线
给表单添加outline:0;或者outline:none;样式之后可以去掉默认的蓝色边框
3.防止拖拽文本域 resize
resize:none;
五、vertical-align属性应用
1.设置图片或者表单(行内块元素)和文字垂直对齐,只针对行内元素或者行内块元素有效
vertical-align:baseline | top | middle | bottom
baseline | 默认,元素放在父元素的基线上 |
top | 元素的顶端与行中最高元素的顶端对齐 |
middle | 元素放在父元素的中部 |
bottom | 元素的低端与行中最低元素的顶端对齐 |
2.解决图片底部默认空白缝隙问题
图片默认和文字基线对齐,所以下面会有空白
- 个图片添加vertical-align:middle | top | bottom等(不与基线对齐就行)
- 把图片转换为块级元素display:block;
六、溢出的文字省略号显示
1.单行文本溢出显示省略号
- 先强制一行内显示文本 white-space:nowrap;
- 超出部分隐藏 overflow:hidden;
- 文字用省略号代替超出部分 text-overflow:ellipsis;
2.多行文本溢出显示省略号
有较大的兼容性问题,适合于webKit浏览器或移动端
七、常见布局技巧
1.margin负值
1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
2.鼠标经过某个盒子的时候,提高当前盒子的层级(如果没有定位则添加相对定位(保留位置),如果有定位则添加z-index)
2.文字围绕浮动元素
浮动之后文字会自动环绕
3.行内块运用
页码