移动Web-华为实战

1.购物车字体图标

字体图标要点：

1. 类名使用更多
2. 字体图标都是使用单独的盒子
3. 字体图标我们喜欢用i标签

CSS代码：

.car {
        width: 120px;
        height: 40px;
        border: 1px solid red;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
     }

.icon-icon-test1 {
        color: red;
     }

HTML代码：

<div class="car">
    <i class="iconfont icon-icon-test1"></i>
        购物车
    <i class="iconfont icon-arrow-down-bold"></i>
</div>

效果图

2.字体图标伪类元素

在复杂嵌套标签时，可使用伪类元素插入字体图标。

CSS代码：

.options {
            width: 200px;
            height: 40px;
            padding: 0 10px;
            border: 1px solid red;
            color: red;
            font-size: 16px;
            line-height: 40px;
        }

.options::after {
            float: right;
            content: "\e687";
            font-family: "iconfont";
            color: red;
        }

HTML代码：

<div class="options">选项</div>

 效果图

3.变形之位移

margion-top会影响盒子布局，transform不会影响盒子布局。

CSS代码：

    div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        background-color: pink;
        /* margin-top: 50px; */
        /* transform: translate(x,y); */
        transform: translateY(50px);
      }

    .box2 {
        background-color: black;
      }

HTML代码：

<div class="box1"></div>
<div class="box2"></div>

 使用margin-top图

使用transfrom图 

4.盒子水平和垂直居中的三种方法

CSS代码：

        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            position: absolute;
            width: 100px;
            height: 100px;

            /* 第一种 */
            /* top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px; */

            /* 第二种 */
            /* top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto; */

            /* 第三种 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            background-color: purple;
        }

HTML代码：

<div class="father">
    <div class="son"></div>
</div>

5.border-radius属性（椭圆角）

6.多重变化

属性：transfrom:rotate(360deg);

• 当需要多个transfrom属性共存时，应采用复合写法，否则会被层叠。

    .box {
      width: 800px;
      border: 2px solid #f2ce78;
    }

    img {
      transition: all .8s;
    }

    .box:hover img {
      /* 先移动后旋转 */
      transform: translateX(500px) rotate(720deg);
    }

HTML代码：

  <div class="box">
    <img src="image/p4-tx3.png" alt="">
  </div>

• 当已有translate确定定位时，一定要在transfrom类重新添加translate属性。

CSS代码：

    .box {
      position: relative;
      width: 600px;
      height: 600px;
      background-color: pink;
    }

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all .6s;
    }

    .box:hover img {
      /* transform: rotate(360deg); */
      transform: translate(-50%, -50%) rotate(360deg);
    }

HTML代码：

  <div class="box">
    <img src="image/p4-tx3.png" alt="">
  </div>

 没有在transfrom类重新添加translate属性图

7.缩放、透明

缩放：transfrom:scale();

透明：opcity:$;

渐变：background-image: linear-gradient();

8.华为实例

通过华为实例加深对字体图标、移动、旋转、缩放、渐变知识点的了解。

CSS代码：

* {
    margin: 0;
    padding: 0;
}
.box {
    overflow: hidden;
    position: relative;
    width: 445px;
    height: 315px;
    margin: 200px auto;
}

.box img {
    width: 100%;
    height: 100%;
    transition: all .6s;
}

.info {
    position: absolute;
    z-index: 2;
    font-size: 14px;
    left: 0;
    bottom: -54px;
    padding: 25px 30px;
    color: #fff;
    transition: all .6s;
}

.info h3 {
    margin: 6px 0;
}

.info .text {
    line-height: 22px;
}

.more {
    margin-top: 16px;
}

.more .iconfont {
    color: red;
}

.box:hover .info {
    transform: translateY(-54px);
}

.box:hover img {
    transform: scale(1.2);
}

.tm {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.box:hover .tm {
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
}

HTML代码：

    <div class="box">
        <img src="image/huawei.jpg" alt="">
        <div class="info">
            <p>招聘</p>
            <h3>华为面向全球招聘</h3>
            <p class="text">诚邀东欧、中欧、亚太等全球的科学家、博士、竞赛人才、研发工程师、优秀 
            大学生加盟</p>
            <div class="more">了解更多<i class="iconfont icon-arrow-right"></i></div>
        </div>
        <div class="tm"></div>
    </div>

效果：

 

 9.总结

通过移动web第一天的学习，了解到了怎样插入字体图标、样式变形的用法，能够独立完成包含所学知识点的模块练习，下去应该多加练习，并孰练掌握所学知识。