今天是我学习css移动web的第一天
今天学习的第一个内容是字体图标
字体图标特点:其本质是文字
优点:
1.灵活性 可以让用户灵活的修改样式
2.轻量级 体积小,渲染快,降低浏览器服务器的请求次数
3.兼容性 几乎兼容所有主流浏览器
其引用方式有三种:
unicode 引用
font-class 引用
伪元素引用
在这里主要讲一下伪元素引用
1.首先给想要添加字体标签的标签添加伪元素
2.从说明书中复制编码,从e开始,放到伪元素confent内(当然要先将含有字体图标的css先引用)
3.给伪元素添加font-family属性 iconfont
就可以了
然后还学习了位移方面的知识
今天学习了transform的四个属性
1.transform:translate (水平移动距离,垂直移动距离)
距离单位可以为 px或百分比(百分比是相当于自身大小位移)
2.transform:rotate (角度) 旋转属性
rotate 这个属性值的单位是(X deg) X可以为负值,为负值时逆时针旋转
3.transform:origin 可以改变旋转的原点
4.transform:scale(X轴缩放的倍数,Y轴缩放的倍数) /设置X轴后Y轴默认和X相同/
如何同时实现旋转平移呢?
设置 transform:translate() rotate () //同时设置位移和旋转属性可以实现旋转平移 但是注意位移一定要设置在旋转前面 否则会导致运行轨迹混乱
然后 还学习了实现背景渐变
background-image:linear-gradient ( 颜色1,颜色2);可以在颜色1前加 to top,to bottom之类的方向属性 可以调整渐变的属性方向。
今天学习的东西就这么多啦 明天继续加油 !> 0 <