HTML与CSS

后盾人CSS在线文档

Target

1. 区分兄弟选择器"+"，找相连的相抵元素与"~",找同级的兄弟元素？

2. max-width:XXX;配合overflow:auto;，从而，自适应滚动条。以及如何修改滚动条默认样式？

3. 清楚应用input:focus{outline: none;}，以及伪类:emtyp(代表所有的空元素)，灵活使用？

4. 帧动画： @keyframes定义动画帧，配合animation申明使用动画。其一，关于填充模式，animation-fill-mode: forwards;使用最后一帧样式，然而，animation-fill-mode: backwards;使用第一帧样式；其二，关于步进动画，轮播图关键animation-timing-function: steps(n, end);从第一张开始，分n步走。其三，animation-play-state: paused;暂停动画。

05.***关于阴影，多重阴影shadow-box的灵活使用?

6. ***Sass语法：

• _基础： $variable定义变量、#{$variable}插入变量，(val1,val2,val3……)列表、@each……in……遍历、&.class-name&表示父级、map-get($map,$key)影射已定义的变量值。
• _场景：
  a. @each……in……遍历普通列表,衍生多重赋值（键值对）
  b. map-get($map,$key)方法的使用。
  c.@mixin、@include实现换肤功能（Vue版）

Expalin

05.关于阴影，多重阴影shadow-box的灵活使用?

      button::after {
            content: '';
            display: inline-block;
            height: 3px;
            width: 3px;
            /******* 同一盒子，三个阴影 ******/
            /* box-shadow: 3px 0 currentColor, 9px 0 currentColor, 15px 0 currentColor; */
            animation: shadow 1s infinite;
        }

6. ***Sass语法：其1，@each……in……遍历普通列表，衍生多重赋值（键值对）、其2，map-get($map,$key)方法的使用、其3，@mixin、@include实现换肤功能（Vue版）。

/*
*  关于，其1，`@each……in……`遍历普通列表
*/
// 生成text-align相关的类
@each $var in (left,center,right){
    .text-#{$var}{
        text-align: $var;
    }
}

// >>>编译结果：
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/*
*  关于，其1，多重赋值（键值对）`
*/
// 生成text-align相关的类
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
        font-size: $size;
  }
}

// >>>编译结果：
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

/*
*  关于，其2，`map-get($map,$key)`方法的使用
*  实例：修改<span class="swiper-pagination-bullet swiper-pagination-bullet-active></span>样式
*/
$color:(
    'black':#303133,
    'white':#fff,
    'green':'#13ce66',
    'blue':"#409eff"
);
.swiper-pagination-bullet{
    border-radius:0;
    &.swiper-pagination-bullet-active{// &，表示父级.swiper-pagination-bullet
        background:map-get($map: $color, $key: 'white');//map-get()、映射$color变量当中的属性
    }
}

/*
*  关于，其3，`@mixin、@include`实现换肤功能（Vue版）
*  思路：定义背景色混合类
*/
//——————————首先，定义background-color相关混合类bg_color()————————————
$background-color-theme: #3f8e4d;//背景主题颜色默认
$background-color-theme1: red;//背景主题颜色1
$background-color-theme2: #652BF5;//背景主题颜色2
$background-color-theme3: deepskyblue;//背景主题颜色3
@mixin bg_color($color){
    background-color:$color;//默认颜色
    [data-theme="theme1"] & {    此处，& ，类似于并符号
        background-color:$font-color-theme1;
    }
    [data-theme="theme2"] & {
        background-color:$font-color-theme2;
    }
    [data-theme="theme3"] & {
        background-color:$font-color-theme3;
    }
}


//——————————然后，@include调用，生成动态背景类,同时，在任意组件使用————————————
.theme-bg-color{
    @include bg_color(#b3c0d1);
}

<el-container>
   <el-header class="theme-bg-color" ></el-header>
</el-container>


//——————————紧接着，完成切换主题按钮的相关组件skin.vue，存储主题————————————
<template>
    <div id="theme" class="d-flex">
        <div class="d-flex flex-colum ai-center pr-3">
            <span class="item bg-theme1" @click="changeTheme('theme1')"></span>
            <span >主题1</span>
        </div>
        <div class="d-flex flex-colum ai-center pr-3">
            <span class="item bg-theme2" @click="changeTheme('theme2')"></span>
            <span>主题2</span>
        </div>
        <div class="d-flex flex-colum ai-center">
            <span class="item bg-theme3" @click="changeTheme('theme3')"></span>
            <span>主题3</span>
        </div>
    </div>
</template>
<script>
export default {
  name: 'mine',
  methods: {
    changeTheme (theme) {
        window.document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme',theme);   
    }
  },
}
</script>

//———————————最后，在APP.vue中，判断是否存在theme——————————
<script>
export default {
    mounted:function(){
        // 不存在，theme默认样式;若是，存在就直接读取localStorage
        if(!localStorage.getItem('theme')){
            localStorage.setItem('theme','')
        }else{
            let localTheme = localStorage.getItem('theme');
            window.document.documentElement.setAttribute('data-theme', localTheme);
        }
    }
}
</script>