移动web基础一,css3新增标签

移动web基础一,css3新增标签

字体图标的使用

• 把iconfont的文件夹放在编辑器里,

用link引用iconfont的样式

要用时直接调用iconfont类名和iconfont在网页中的类名

要给图标设置大小需要给iconfont标签设置

• 引用在线的iconfont图标,直接进入网站,复制个人项目地址

  要用的图标直接复制粘贴

  使用类名引入字体图标（重点记住）

  如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

  <span class="iconfont icon-daohangdizhi"></span>

  • 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。

  • 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

  使用伪元素字体图标（记住）

• <div class="car1">购物车</div>

• .car {
        width: 200px;
        height: 45px;
        border: 1px solid pink;
        text-align: center;
        line-height: 45px;
        font-family: 'iconfont';
      }
  .car::before {
      content: "\e63b";
  
  }
  .car::after {
      content: "\e686";
  }

  注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

小结

字体图标是前端工程师必须具备的知识点。 开发中， 字体图标上传，选择，都是网页美工给我们准备好了。

我们重点是下载和使用。

字体图标使用可以整体分为两大步骤：

1. 复制相关文件到网站根目录下，并引入css文件到html页面中。

   • 通常都放到fonts文件夹里面。

   • 通常iconfont.css 和字体放一起。

2. 调用。

   • 开发中最常用的是使用类名来调用，所以重点记住这个就可以了。

     <span class="iconfont icon-daohangdizhi"></span>

二、变形 transform（2D）

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

平面转换

位移

简写:tfts

transform: translate(100px, 150px);

transform: translate(100%, 50%);

括号内只写一个数值是代表x轴

百分比移动是移动盒子自身尺寸的百分比

四种方法让盒子水平垂直居中

1:定位top50%,left50%,magintop负父元素高度的一半,maginleft负父元素宽度的一半

2.四周方位值设为零top0,left0,right0,bottom0,magin:auto

3.位移:left50%,top50% ,translate:(-50% -50%)

4.父盒子设置justify-content: space-around; align-items: center;

位移与magin的区别:用magin会影响周围的盒子,位移不会

旋转

语法：

transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

transform: rotate(360deg)角度

transform-origin改变旋转原点(方位名词,像素)

.使用多重转换效果必须连写,不然会被层叠掉

多属性连写,位移放前面,因为旋转可以改变坐标轴向

多形态变形小技巧

1. 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。

transform: translate(-50%, -50%) rotate(360deg);

1. 注意，多个值之前用 空格隔开。

必须采取连写的形式,位移属性在前面,旋转属性在后面,

如果盒子属性里面有transform属性,那么给盒子加hover时要再写一遍,不然会被层叠掉

二、缩放

语法：

transform: scale(1.2)；

它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

transform:scale(1)原尺寸(正数)放大(负数)缩小

opacity透明取值为0-1,默认状态下为0,hover状态下为1

三、渐变

线性渐变

基本语法：

background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))

渐变属性前面还可以加方位名词

四、单词

单词	说明	实例
transform	变形 、转换
rotate	旋转	transform: rotate(180deg)
iconfont	字体图标	icon-you
translate	位移	transform:translate(100%)
origin	改变原点	transform: origin(方位名词或像素);
opacity	透明取值	opacity:1或0
linear-gradient	渐变	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
scale	缩放	transform: scale(1.2)；或transform: scale(-0.8)
transparent	背景颜色透明
transition	过渡	transition:all .5s