修改Prower V6主题为固定双栏版本

Prower V6主题使用了屏幕自适应的设计,当屏幕宽度小于或等于1280px时,隐藏侧边栏内容只显示单栏,如果屏幕宽度大于1280px的话,则显示带侧边栏的双栏版本。

最近陆续的有同学从微博上问怎么固定显示双栏结构,在这里做一个统一的答复。

所有的修改,都是只在style.css这个样式表里:

1、删除以下样式代码:

@media only screen and (max-width:1280px) {
#sidebar {display:none;}
}
@media only screen and (min-width:1281px) {
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
#sidebar {float:right; width:18%; max-width:250px;}
#sidebar .widget {display:block; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
}

或是可以使用注释的方式(/**/),修改为

/*@media only screen and (max-width:1280px) {
#sidebar {display:none;}
}
@media only screen and (min-width:1281px) {
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
#sidebar {float:right; width:18%; max-width:250px;}
#sidebar .widget {display:block; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
}*/

2、修改以下代码

/*Sidebar*/
#sidebar {font-size:0.8em;}
#sidebar h2 {font-size:1.2em;}
#sidebar .widget {display:inline-table; vertical-align:top; width:30.3%; margin:3% 1.5%; padding-top:2%; border-top:1px solid #ccc; position:relative;}

/*Sidebar*/
#sidebar {float:right; width:18%; max-width:250px; font-size:0.8em;}
#sidebar h2 {font-size:1.2em;}
#sidebar .widget {display:block; border-top:1px solid #ccc; position:relative; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}

再修改代码

#header_box,.nav,#content,#footer_box {width:62.5%; margin:0 auto; max-width:800px;}

#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}

OK!大功告成!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注