一、页面设计与开发
(一)首页 - index.html
1.导航
2.中间内容(分左右两边)
- 左边博客列表
content中内容:
- 右边(分类,标签,最新推荐,二维码)
分类:
标签:
最新推荐:
二维码:
3.底部footer
红色括号中是导航中m-item样式
(二)样式 - me.css
body {
background: url("../images/watercolor.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;
}
/*-------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 { /*方法论23没有间隔效果*/
margin-top: 0.3em !important;
margin-bottom: 0.3em !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;
}
/*------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;
}
}