# 前端每天练习

**Repository Path**: change365/practice-every-day

## Basic Information

- **Project Name**: 前端每天练习
- **Description**: 每天练习1个前端案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-04
- **Last Updated**: 2022-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CSS, 停止维护

## README

# 前端每天练习

#### 介绍
每天练习1个前端案例


#### 目录
##### day01H5邀请卡
效果
    手机滑动,可以显示下一个H5页面,滑动的时候会有动画显示![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/102447_62be6a8b_9511025.png "屏幕截图.png")
技术概要
   运用swiper库,实现滑动效果,核心代码
```javascript
var mySwiper = new Swiper("#swiper", {
            direction: "vertical",
            loop: false,
            effect: "slide",
            onTransitionEnd: change,
            onInit: change,
        });
function change(example){
            var slidesAry = example.slides,
                activeIndex = example.activeIndex;
            $.each(slidesAry,function(index,item){
                if(index === activeIndex){
                    item.id ='slide'+(activeIndex);
                    return;
                }
                item.id =null;
            });
        }

```
含义:初始时,触发onInit,当滑动页面一下,触发onTransitionEnd,其中的函数是change函数,作用给当前滑动的页面元素加上slide的id
效果:css中已经定义了 slide id名的动画样式,每个样式的时间通过css设置好,就完成了依次显示动画的特效
```css
/*动画效果*/
/*叶子*/
#slide0 .leaf{
    -webkit-animation:rotateInDownRight 1s 1.6s ease both;
}
/*绳子*/
#slide0 .rope{
    animation:fadeInLeft 1s 1.2s ease both;
}
/*纸张展开*/
#slide0 .parper{
    width: 92%;
    top: .8rem;
    left: .15rem;
    transition: all 1s linear;
}

```
##### day02小丑静态静态网站
效果
![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/102655_ea826e58_9511025.png "屏幕截图.png")
html各个控件和样式的练习

##### day03商品列表
效果![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/103017_c13d3ecd_9511025.png "屏幕截图.png")
先设置商品的前端样式,再通过php循环生成数据到前端页面上去
用到了php控制流写法,双重foreach循环


##### day04侧边栏和优惠卷
![优惠卷](https://images.gitee.com/uploads/images/2021/0806/103326_b62fecba_9511025.png "屏幕截图.png")
![侧边栏](https://images.gitee.com/uploads/images/2021/0806/103431_759dd5f5_9511025.png "屏幕截图.png")<br>
1. 侧边栏,利用了background的知识,以及文字居中的知识
2. 优惠卷通过border-image设置波浪边框
![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/155522_cd393344_9511025.png "屏幕截图.png")
3. 商品列表的布局重新升级,采用了flex居中,百分比宽度布局,让列表可以两行排列
![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/203832_ef601bfa_9511025.png "屏幕截图.png")
4. 3种列表布局方法
    - 使用列表和列表属性创建纵向菜单
    - 使用列表和display:inline样式创建横向菜单
    - 使用列表和display:inline-block样式实现图文横排

##### day05选项卡个人简历
![输入图片说明](https://images.gitee.com/uploads/images/2021/0807/095355_e7dbc526_9511025.png "屏幕截图.png")
1.选项卡个人简历,用到了js做选项卡效果,循环把所有的类名去掉,给选中的元素加类名,使用了一些动画特效,头像旋转,打字特效