移动端第一天学习笔记
字体图标
- 如何使用字体图标?
使用字体图标:
在标签类加上iconfont,并引入CSS后缀的图标样式表(iconfont)
方法①
使用unicode编码
 /* &#字符实体 x十六进制 */
unicode编码的含义
例:
直接在标签内容里输入编码,在标签类加上iconfont,或给标签加上font-family:’iconfont’
方法②
直接加类
在标签里加入至少两个类,iconfont+icon-lishijilu(例),当成字体用,可以再加额外类标签进行修饰.
方法③
伪元素法
.box::after{
font-family:iconfont;
/*  这里应该转换成e77a */
content: 'e77a';
color: green;
}
其中,font-family也可以不写,换成在标签中加上iconfont也可
平面转换-transform
位移效果:transform:translate(水平,垂直)
–如要用百分比表示单位,参照物为盒子自身尺寸
对行内元素没有效果
※补充(后续会单独补充):
①absolute+负margin(子盒子宽高的一半)【条件是得知道子盒子的宽高】
position:absolute;
top:50%;
left:50%;
margin-left: -50px; /*top相当于高度,left相当于宽度*/
margin-top: -50px;
②absolute+margin auto
position:absolute;
left:0;
right:0;
top:0;
buttom:0;
margin:auto;
③transform
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
一些css修饰样式:
旋转–transform:rotate(角度) 单位:deg
转换圆点-transform-origin:(点水平)(点垂直)
- 转换原点不要写在hover里
- 取值一般都会写方位名词(right left)
- 多重转换技巧(也就是旋转和位移叠加) 要先写位移
缩放-transform:scale(x缩放,y缩放)
- 如果只写一个值,那么皆用于x和y值
- 值要写数字,可以是0/1/1.2等
- 有transformY/transformX 单方面取值
渐变-background-image:linear-gradient(颜色1,颜色2)
- 例如background-imga:linear-gradient(transparent, rgba(0,0,0,.8)
额外学习:
opeacity : 元素隐藏 1显示/0隐藏
transparent 透明