移动Web第1天

1字体图标

优点

灵活随时修改颜色和尺寸（color font-size）
轻量级体积小
兼容性好

Unicode图标引入法（不方便，不常用）

引入icon font。css文件
通过i标签把unicode编码复制过来
设置span标签的家族样式，font-family：‘iconfont’
修改字体颜色，尺寸大小


<title>图标</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        span{
            font-family: 'iconfont';
            font-size: 50px;
            color: darkgrey;
        }
    </style>
</head>
<body>
    <span>
        &#xe6eb;
    </span>
</body>
</html>

2.font-class

常用写法（类名方式引入图标法）

使用 font -class 类名的方式

iconfont类：基本样式，包括字体的使用等
icon-xxx：图标对应的类名
行内元素，必须加上两个类名
class：iconfont icon-（需要加上图片名称）

<title>Document</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        .s1{
           
            color: red;
            font-size: 88px;
            
        }
    </style>
</head>
<body>
    <!-- 使用font-class类名书写图标的方式 -->
    <span class="iconfont icon-electronics s1">  </span>
</body>
</html>

3-案例-购物车案例

<link rel="stylesheet" href="./font_3243710_k9ae3knprhn/iconfont.css">
    <style>
        .box{
            width: 100px;
            height: 20px;
            background-color:skyblue;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .s1{
            color:red;
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- class类名引入图标书写 iconfont必写  后面书写 -->
        <i class="iconfont icon-icon-test s1"></i>
        <span >购物车</span>
        <i class="iconfont icon-icon-test1 s2"></i>
    </div>
</body>
</html>

4-如何使用svg生成图标使用案例

思考：如果图标库没有项目所需的图标怎么办？

l 答：IconFont网站上传矢量图生成字体图标

Ø 1. 与设计师沟通，得到SVG矢量图

Ø 2. IconFont网站上传图标，下载使用

目标：使用字体图标技巧实现网页中简洁的图标效果

上传矢量图：

l 上传 → 上传SVG图标

l 浏览本地图标 → 去除颜色提交

5案例加入购物车 → 下载使用

<title>Document</title>
    <link rel="stylesheet" href="./svg图标/iconfont.css">
    <style>
        .s1{
           font-size: 50px;
           color: red; 
        }
    </style>
</head>
<body>
    <span class=" iconfont icon-time s1">

    </span>
</body>
</html>

6-链接生成图标、在线使用的字体图标

点击生成在线地址

*在页面中如何使用

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3243645_8568gh9eemr.css ">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
   <span class="iconfont icon-Dyanjing"></span> 
   <span class="iconfont icon-caidan"></span>
   <span class="iconfont icon-dianzan"></span>
</body>
</html>

平面转换

目标：使用transform属性实现元素的位移，旋转，缩放等效果

语法

transform:translate(水平移动距离，垂直移动距离)

 transform: translate(100px, 0px);

transform:translateX(移动距离) → 水平移动

transform: translateX(100px);

transform:translateY(移动距离) → 垂直移动

transform: translateY(100px);

取值

像素单位数值px
```
transform: translate(100px, 0px);
```
百分比（参照盒子自身尺寸）%
```
transform: translate(100%, 0); 
```

注意

translate()如果只给一个值，表示x轴方向移动距离

<!-- 向右移动100px,负值表示向左 -->
transform: translate(100px);
<!--向右移动移动自身宽度100%，负数表示向左  -->
transform: translate(100px, 0px);

拓展

实现盒子的水平垂直居中有两种方法：

绝对定位和位移(推荐)

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;

        }

        .sun {
            position: absolute;
            top: 50%;
            left: 50%;
            /*移动自身盒子的一半*/
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <div class="box">
        <div class="sun"></div>
    </div>

绝对定位和外边距（在实际开发中宽高可能会变化，不推荐使用）

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;

        }

        .sun {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 自身盒子宽高的一半  */
            margin-top: -100px;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
    <div class="box">
        <div class="sun"></div>
    </div>

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

平面转换的旋转

目标：使用rotate实现元素旋转效果

语法

transform:rotate(角度)

注意：角度单位是deg

技巧：取值正负即可

取值为正，顺时针旋转

取值为负，逆时针旋转

代码如下：

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            display: block;
            transition: 1s;
            margin: 100px auto;
        }

        img:hover {
        	/*顺时针旋转*/
            transform: rotate(360deg);
            /*逆时针旋转*/
            /* transform: rotate(-360deg); */
            

        }
    </style>

平面转换的旋转---转换原点

语法

默认圆点是盒子中心点

transform-origin:原点水平位置原点垂直位置；

取值

方位名词来取直(left,top,right,bottom,center)

/*右下角*/
transform-origin: right bottom;

像素单位数值

transform-origin: 100px 0;

百分比（参照盒子自身尺寸）

/*右下角*/
transform-origin: 100% 100%;

平面转换的旋转---缩放

语法

transform:scale(x轴缩放倍数，y轴缩放倍数);

注意

一般情况下，scale只设置一个值，表示x轴和y轴等比例缩放

scale的值大于1表示放大，小于1表示缩小

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            border: 10px solid pink;
            margin: 200px auto;
            overflow: hidden;
        }

        img {
            display: block;
            transition: 2s;
        }

        .box:hover img {
        	/*缩放1.5倍*/
            transform: scale(1.5);
        }
    </style>
    <div class="box">
        <img src="图片地址" alt="">
    </div>

颜色渐变

语法

background-image: linear-gradient(颜色1，颜色2);

注意

一定要给背景图片添加不是背景颜色（渐变不止是一种颜色）
```
background-image: linear-gradient(red,blue)
```

渐变可以设置多种颜色

background-image: linear-gradient(red,green,blue)

可以划分渐变的大小

/* 从上到下 红色渐变自身高度30%，绿色从30%-50%渐变，蓝色从50&-100%渐变*/
background-image: linear-gradient(red 30%,green 50%,blue 100%)

可以改变渐变方向

默认值to bottom 从上到下

background-image: linear-gradient(red,blue)

从下到上

background-image: linear-gradient(to top red,blue)

从左上角到右下角

background-image: linear-gradient(to right top red,blue)

角度

background-image: linear-gradient(0deg red,blue)

多重转换

目标：使用transform复合属性实现多形态转换

位移+旋转一定连写一定先位移再旋转

书写：

transform：translate()  rotate();

缩放

目标：使用scale改变元素尺寸大小

语法

transform:scale(x轴缩放倍数，y轴缩放的倍数)；

一般情况下scale设置一个值，表示x轴和y轴等比例缩放

scale取值大于1表示放大，取值小于1为缩小

渐变背景

目标：使用background-image属性实现渐变背景效果

书写：

移动web 第一天