仿网易云网站心得

css：

设置图片背景进行虚化，其他内容正常显示：

<div class="container">

        <div class="bg">

            <img :src='playlist.coverImgUrl'/>

        </div>

        <div class="content"></div>

</div>

 css:

.container{

    .bg{

        z-index: -1;

        filter: blur(40px);

        position: fixed;//设置固定定位

    }

}

设置行内容的多余折叠：

 overflow: hidden;

 display: -webkit-box;

 -webkit-line-clamp: 2;

-webkit-box-orient: vertical;

设置盒子的内容进行横线或纵向排列：

 display: flex;

 flex-direction: column;/row//纵和横

大的模块进行position:relative,小的模块postion:absolute可以把内容进行定位，解决例如把文字显示在图片上面

justify-content:space-between可以解决内容的间距一致