一、精灵图
- 主要针对背景图片,插入的图片img是不需要这个技术的
- 减少服务器的接受和发送请求的次数,提高页面加载的速度
- 把小图像合成到一张大图上,每次使用时,用css背景定位让每个相应的图标显示出来
我们需要使用CSS的:
-
background-image、
-
background-repeat
-
background-position属性进行背景定位,
其中最关键的是使用background-position
属性精确地定位。
二、字体图标
1.下载
- http://icomoon.io
- http://www.iconfont.cn
2.引用
- 把解压后的font文件夹放在网页根目录下
- 复制字体声明代码到CSS中
- 打开demo网页,在里面负责所需要图标的小方框到html中
- 给标签指定同一个字体
3.追加
- 在网站导入json文件
- 添加新图标然后下载
- 去覆盖原来的文件
三、CSS三角
原理:
写一个宽高为零的盒子,把盒子的边框写大点并添加不同的颜色,就会看到
把任意三边border改为透明就会得到一个三角形
代码:
.box {
width: 0px;
height: 0px;
font-size: 0; /*照顾兼容性*/
line-height: 0; /*照顾兼容性*/
border-top: 50px solid transparent;
border-bottom-color: orange;
}
四、CSS用户界面样式
1.鼠标样式cursor
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
2.轮廓线outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。
最直接的写法是 : outline: 0; 或者 outline: none
3.防止文本域拖拽resize
<textarea style="resize: none;"></textarea>
五、垂直对齐vertical-align: middle
-
有宽度的块级元素居中对齐,是margin: 0 auto;
-
让文字居中对齐,是 text-align: center;
vertical-align 垂直对齐,它只针对于「行内元素」或者「行内块元素」
六、清除图片底部空白缝隙
空白缝隙是因为行内块元素默认与文字的基线baseline对齐
那么有两个解决方案
- 让img和底线对齐vertical-align: middle;
- 把img转换为块级元素display: block;
七、溢出的文字省略号显示
1.单行文本溢出
- white-space:nowrap; 强制一行
- overflow: hidden; 溢出隐藏
- text-overflow: ellipsis; 省略号代替
2.多行文本溢出
div {
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 显示文本的行数 */
-webkit-line-clamp: 2;
/* 排列方式为垂直居中 */
-webkit-box-orient: verical;
}
一般是用JavaScript或者后台人员来实现
八、布局技巧
1.margin负值巧妙运用
浮动的有边框的盒子中间的边框是有1+1=2的情况
用margin: -1px使盒子边框重叠从而实现1+1=1
如果要实现鼠标放上去显示边框,有一边会被压住
解决方法:
- 给盒子加相对定位
- 如果盒子本身就有定位,就提高盒子的层级
2.文字围绕浮动元素
图片和文字在同一个容器里,只给图片加上浮动,文字不会被压住
3.行内块巧妙运用
行内块每个元素中间有间隔,加一个text-align: center;就可以实现居中
主要运用在底部页码
4.三角强化
.box {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-color: transparent red transparent transparent;
border-width: 50px 100px 0 0;
border-style: solid;
}
5.CSS初始化
为了消除不同浏览器对html的影响
京东初始化代码
* {
margin: 0;
padding: 0;
}
em,
i {
/* 清除斜体 */
font-style: normal;
}
li {
list-style: none;
}
img {
/* 为了兼容低版本浏览器,否则在图片上有链接的话会出现边框(和图片周围文字一个原理) */
border: 0;
vertical-align: middle;
}
button {
/* 否则button上不会出现小手 */
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #c81623;
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* \5B8B\4F53 的意思是宋体,写汉字的话容易出现乱码 */
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
.hide,
.none {
display: none;
/* 隐藏 */
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}