渐进式背景色

常用的的css属性为background-color

 

还有一个属性可以实现渐进式背景色

 background-image: linear-gradient(to bottom, #315481, #918e82 100%);

　　

最顶级的position：absolute是相对于body的   该属性脱硫文档流，适合全页面布局

下面附上一个简单的.vue单文件代码

<template>
   <section class="container">
       <section class="menu">  <!--左边的容器—-->

       </section>
       <section class="content-container">  <!--右边的容器—-->

       </section>
   </section>

</template>

<script>
export default {
    
}
</script>

<style scoped>
    
    .container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: hidden; 
    }
    @media screen and (min-width: 60em) {
    .container {
        left: 5.55555%;
        right: 5.55555%;
    }
    }
    @media screen and (min-width: 80em) {
    .container {
        left: 11.1111%;
        right: 11.1111%;
    }
    }
    .menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 270px;
    height: auto;
    /* background-color: #315481; */
    background-image: linear-gradient(to bottom, #315481, #918e82 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    .content-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    transition: all 200ms ease-out;
    transform: translate3d(0, 0, 0);
    background: #d2edf4;
    opacity: 1;
    }
   
    @media screen and (min-width: 40em) {
    .content-container {
        left: 270px;
    }
    }
    


</style>　　

成品展示

 

@media 为媒体查询         适合响应式布局 

transiton   和 transform  也是很重要的属性可以  动画在页面中应用的越来越多

以后会写随便专门介绍上面的属性

 

 

    

标签：right,container,bottom,渐进式,背景色,width,background,left
来源： https://www.cnblogs.com/monstermr/p/10590173.html