博客详情页面
复制index.html更改为blog.html
修改页面,删除中间内容,其余的不变
效果图:
头部
效果
图片区域
效果
内容
效果
标签
效果
赞赏
效果
博客信息
效果
评论列表
效果
css
body{
background: url("../images/bg.png");
}
.m-padded-mini{
padding: 0.2em !important;
}
.m-padded-tiny{
padding: 0.3em !important;
}
.m-padded-tb-mini{
padding-top: 0.2em !important;
padding-bottom:0.2em !important;
}
.m-padded-tb-tiny{
padding-top: 0.3em !important;
padding-bottom:0.3em !important;
}
.m-padded-tb-small{
padding-top: 0.5em !important;
padding-bottom:0.5em !important;
}
.m-padded-tb{
padding-top: 1em !important;
padding-bottom:1em !important;
}
.m-padded-tb-large{
padding-top: 2em !important;
padding-bottom:2em !important;
}
.m-padded-tb-big{
padding-top: 3em !important;
padding-bottom:3em !important;
}
.m-padded-tb-huge{
padding-top: 4em !important;
padding-bottom:4em !important;
}
.m-padded-tb-massive{
padding-top: 5em !important;
padding-bottom:5em !important;
}
.m-padded-lr-responsive{
padding-left: 4em !important;
padding-right: 4em !important;
}
/*-----text-----*/
.m-text{
font-weight: 300 !important;
letter-spacing: 1px !important;
line-height: 1.8;
}
.m-text-thin{
font-weight: 300 !important;
}
.m-text-spaced{
letter-spacing: 1px !important;
}
.m-text-lined{
line-height: 1.8;
}
/*-----margin-----*/
.m-margin-top-small{
margin-top: 0.5em !important;
}
.m-margin-top{
margin-top: 1em !important;
}
.m-margin-top-large{
margin-top: 2em !important;
}
.m-margin-tb-tiny{
margin-top: 0.3em !important;
margin-bottom: 0.3em !important;
}
.m-margin-bottom-small{
margin-bottom: 0.5em !important;
}
/*-----opacity-----*/
.m-opacity-mini{
opacity: 0.8 !important;
}
.m-opacity-tiny{
opacity: 0.6 !important;
}
/*-----position-----*/
.m-right-top{
position: absolute;
top: 0;
right: 0;
}
/*-----display-----*/
.m-inline-block{
display: inline-block !important;
}
/*----container----*/
.m-container{
max-width: 72em !important;
margin: auto !important;
}
.m-container-small{
max-width: 60em !important;
margin: auto !important;
}
/*----color----*/
.m-black{
color: #333 !important;
}
.m-mobile-show{
display: none !important;
}
@media screen and (max-width: 768px) {
.m-mobile-hide{
display: none !important;
}
.m-mobile-show{
display: block !important;
}
.m-padded-lr-responsive{
padding-left: 0 !important ;
padding-right: 0 !important;
}
.m-mobile-wide{
width: 100% !important;
}
}