常用的的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 也是很重要的属性可以 动画在页面中应用的越来越多
以后会写专门的随笔介绍上面的属性