web前端进阶：＜6＞一个自我简介的小程序

学前端比较久了，但是没有好的项目练练手？那就看看我这个吧！

 后面还会有很多好玩的小程序或知识哦，大家觉得不错就关注一波吧~

 实现的功能呢就是左边是个人的简介，右边就是自己想要展示的内容，我这里贴了自己博客的一部分上去，右边就是一个图片和一些文字：

<div class="sign">
    <div class="myimg">
      <img src="./imgs/header02.jpg" alt="">
      <div class="msg">
        <h2>tony</h2>
        <p>性别：男</p>
        <p>职业：学生</p>
        <p>学校：九职</p>
      </div>
    </div>
    <div class="blog">
      <h2>如何学好vue？</h2>
      <p>vue具有很强大的响应式，更他的数据传递方式有很大关系,
        因为是声明式编程，所以我么先要知道用那些数据，然后在写到vue对象里面。
        vue的使用一般就是new vue（options）options代表参数列表，可以传入很多值，
        也可以传入很多类型，可以使字符串、方法、对象和html元素等，vue也有一个生命周期，
        所谓生命周期就是一个事务从诞生到消亡的整个过程；</p>
    </div>
  </div>

可以看到布局还是非常简单的，所以才所适合练手嘛；

一个大盒子里面包着两个小盒子，左边一个又包着两个盒子，类名的话大家乐意取啥就取啥吧！

然后右边就是一个盒子了，贴上一些自己想要的文字就可以了，当然这里的简介也是可以自己定义的；

body{
      margin:0;
      padding:0;
      box-sizing: border-box;
      background-color: rgba(100, 100, 100, .2);
    }
    .sign {
      width:800px;
      height:300px;
      display: flex;
      margin: auto;
      margin-top:100px;
      border: 2px solid black;
      border-radius: 10px;
      padding:10px;
      background-color: blueviolet;
    }
    .sign .blog{
      flex:2;
      background-color: pink;
      padding:5px;
      transition: all .5s linear;
    }
    .sign .blog:hover{
      background-color: #fff;
    }
    .sign .myimg{
      flex:1;
      text-align: center;
      background-color: aqua;
      margin-right:10px;
      overflow: hidden;
      padding:5px;
      transition: all .5s linear;
    }
    .sign .myimg img{
      width:100%;
      height: 100%;
      transition: all .5s linear;
    }
    .sign .myimg:hover img{
      width:80px;
      height: 80px;
      border-radius: 40px;
    }
    .sign .myimg:hover{
      background-color: rgba(100, 100, 100, .2);
    }

这里是样式，有点乱哈，但是逻辑还挺好理解的，主要就是布局这一方面，很多小伙伴写页面的时候不知道从何入手，到底该怎么写出自己想要的布局呢？这里我给大家建议一下，使用弹性布局就很OK哈，如果大家还有弹性不理解或者是忘记了呢，可以看看我这里的一片博文：

web前段进阶：＜3＞逐帧动画和弹性布局_编程学渣ズ的博客-CSDN博客回顾一下上一期我们讲的内容，讲了3d的一个小案例和动画的基本操作，我们要实现3d效果必须要打开透视和3d空间，一般会配合定位一起使用，而且定位和3d空间的属性一般放在一起，而透视可以加载body上；动画实现的步骤分为定义和使用，我们使用#keyframe 名称{}来定义动画，有两种方式一种是from to，一种是百分比；使用动画的属性为animation:动画名称、动画时长、速度曲线、延迟时间、循环次数、动画方向、停止状态；学完动画的基本操作之后，我们来了解一个好玩的：也就是逐帧动画，其实就是将https://blog.csdn.net/aiwanchengxu/article/details/124622816这里呢还介绍了一下逐帧动画，话说这年头的素材还真的难找，有机会给大家整理一些好用的素材哈~

分析一下弹性布局的思路，就是我们设置父盒子display为flex，然后两个子盒子就可以通过flex的占比来确定这里所占的空间，我这里就是设置的1：2；

基本的布局解决了，接下来大家就可以按照自己的喜好设置大小啊，颜色之类的样式了；

还有一点就是这个过渡效果可能有些基础不是很好的小伙伴有点问题哈，这里我也简单分析一下，就是通过鼠标悬停，我们先让图片铺满这个大盒子，然后当鼠标放上去的时候我们再将它改小就可以了，最好设置一下overflow为hidden，这样溢出取得文字就看不到了。

好了，这就是这一期的全部内容了，欢迎大家点赞、评论、转发，下期见