看到同事发的人生最后悔25件事,内容不全,所以搜了下,最终找到了MSN的页面:http://fashion.msn.com.cn/lifestyle/emotion/25173.shtml
既然本文题目是讲利用Firefox+Stylish自定义页面样式,所以本文只单纯的用Stylish来修改页面样式,从而达到我想要的显示效果。
我的Firefox版本是19.0。本文适合有对css有一定了解的人群,如果你连css都不知道是啥,那个,你去看看个人闲谈之类的文章好了……

进入网页映入眼帘的是导航下的广告,看着很不爽,所以动手来处理下:
右键广告元素,选择查看元素,定位到最外层的DIV,如下图所示:
查看元素示意图

从图中可以看出广告的div的class是“ads_topbanner clearfix”,点击Stylish,选择编写新样式-空白样式,名称随便起,复制如下代码到最下方的编辑框中:

@-moz-document url-prefix("http://fashion.msn.com.cn/"){
}

在第二行加入

.ads_topbanner{
display:none!important;
}

点击预览,此时,发现页面里的广告消失了(其实不是消失,只是不可见了而已。)

类比,定位到广告下的div的id是hotRec,同理(class是.id是#,这个要分清),在最后一个大括号前添加:

#hotRec{
display:none!important;
}

添加完毕后的代码如下图:
添加代码后示意图

点击预览,此时上面的广告都已经消灭了。
我们往下翻,发现右侧侧边栏很占地方,我想看全屏的,定位下右侧的侧边栏,发现class是colR,继续添加:

.colR{
display:none!important;
}

此时右侧的侧边栏也消失了,现在来扩充左侧的宽度:

定位左侧的class是colL,width是658px,还有个背景(就是右边线),所以添加如下代码修改宽度并去掉背景:

.colL{
width:99%!important;
background:none!important;
}

如果觉得字有点小,就在段落右键查看元素,如下图定位到字体的class:
定位字体class
在右侧“.endText p”上右键,复制规则,粘贴到样式编辑器中,调整下大小和行高:修改后如下图:
修改字体大小后示意图

主体部分就达到我们想要的效果了,如果你想改背景色,修改上图第13行到对应的颜色既可。记得哦,每个改的属性都必须跟着“!important;”才能生效。
继续往下翻,看到这一键关注很不爽,定位发现div的id是sinaBulkFollow,根据之前的经验,自己添加

#sinaBulkFollow{
display:none!important;
}

既可隐藏掉了。
下面是最终效果图:
最终效果图

至此,页面样式已经按我们需要改变了不少。方法很简单,自己多练习就可以了。

Related Posts: Firefox+Stylish自定义页面样式 :