一.文字图标的使用:
使用阿里巴巴矢量图库来下载上传字体图标(www.iconfont.cn/)
二.文字图标的使用方法;
1.类名字体图标步骤:
1.link引入iconfont.css , iconfont.tff,iconfont.woff,iconfont.woff2;
2.给标签设置类名:iconfont+icon-xxx:
3.给icon-xxx设置属性
2.Unicode编码的使用:
语法:
html:
css :
.iconfont{
font-size: 30px;
color:red;
}
3.伪元素文字图标使用步骤:
1.link引入iconfont.css , iconfont.tff,iconfont.woff,iconfont.woff2;
2.设置伪元素:"\e63b" 必须在前面加
3.伪元素图标的使用必须声明字体(font-family:"iconfont")
4.在伪元素里设置文字标签属性
三.位移的学习:
语法:transform: translate (水平移动距离,垂直移动距离); margin会影响其他的盒子,位移不会对其他盒子产生影响; X轴向右为正,Y轴向下为正;
translate()如果只给一个值的时候表示X轴方向移动;
单独设置某个方向的移动:translateX() & translateY();
注意:移动时,设置移动参数为百分比,则是参照的自身宽高
四.盒子垂直居中的三种方法:
1.定位后使用margin值来调整位置
position: absolute; left: 50%; bottom: 50%; margin-left: -50px; margin-bottom: -50px;
2.定位后使用transform: translate 来调整位置
position: absolute; left: 50%; bottom: 50%; transform: translate(-50%,50%);
3.
position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100px; height: 100px; background-color: pink; /* 左侧全部充满 */ /*margin-left: auto;*/ /* 右侧全部充满 */ /*margin-right: auto;*/ margin: auto;
五.旋转
1.语法:transform: rotate(xx deg) 2.transform: rotate(xx deg)的使用可配合过渡 (transition)使用
六. 改变旋转中心点
语法:transform-origin:方位词(left right top bottom center)或像素或百分比;
七.多重转化书写
1.语法: transform: translate(xxpx) rotate(xxxdeg); 2.连写书写时,位移translate必须书写在旋转前.旋转后会影响页面元素的X和y轴的方向;
八.缩放
1.语法:transform:scale(X) X为缩放的倍数 2.当X大于1时,则是放大.当X小于1时,则是缩小.X等于1时原属性不变;
九.渐变色
1.语法: background-image: linear-gradient(颜色值A,颜色值B); 2.颜色值与颜色值之间用逗号(,)隔开 3.默认的渐变方向是180deg(从上往下) 4.渐变方向的取值: to left(270deg); to right(90deg); to top(0deg); to bottom(180deg);
