html 加载占位,前端优化之页面加载占位布局

占位样式

html代码

css代码

body{

color:#333;

font-family: -apple-system,PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Helvetica Neue,sans-serif

}

*{

box-sizing: border-box;

margin:0;

padding:0;

}

.container{

max-width:960px;

margin:0 auto;

}

.entries{

list-style:none;

}

.entry-masker{

position: relative;

padding: 0 1.5em;

min-height: 92px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align:center;

-ms-flex-align:center;

align-items:center;

-moz-box-align:center;

}

.screenshot{

border-radius: 2px;

height: 82px;

margin-right:1.5em;

width:82px;

}

.entry-info{

-webkit-box-flex:1;

-ms-flex:1 1 auto;

flex:1 1 auto;

font-size: 0.7em;

}

.info-row{

-webkit-box-align:center;

-ms-flex-align:center;

align-items:center;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

min-height: 2.8em;

}

.entry-title-box{

-webkit-box-flex:1;

-ms-flex:1 1 auto;

flex:1 1 auto;

position: relative;

}

.entry-title-box .entry-title{

height: 1.8em;

width: 60%;

}

.entry-date{

-webkit-box-flex:0;

-ms-flex:0 0 auto;

flex:0 0 auto;

height: 1em;

margin-left: 1.5em;

width:3em;

}

.meta-badge{

box-align:center;

box-pack:center;

-webkit-box-align:center;

-ms-flex-align:center;

align-items:center;

border:1px solid;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

height: 15px;

-webkit-box-pack:center;

-ms-flex-pack:center;

justify-content:center;

padding: 0 0.8em;

position: relative;

width:3em;

}

.masker{

border-color:hsla(0, 0%, 95%, 0.1);

background-color:hsla(0, 0%, 95%, 0.5);

}