FreeOZ论坛

标题: firefox用stylish打造干净版网页 [打印本页]

作者: caoglish 时间: 4-2-2010 18:06
标题: firefox用stylish打造干净版网页
firefox有一个叫做stylish的扩展，允许用户重新编译css的风格，一般用于美化网页，我用于净化网页。使用stylish净化网页，必须要有一些html+css的基础知识，然后使用firefox中的webdeveloper和firebug来分析网站，然后达到净化网站的目的。一般思想就是指显示目标部分，隐藏其他部分。以下是我净化网页的结果。

著名的6park
[attach]100172[/attach]

滴答网站原版
[attach]100175[/attach]

滴答网净化版
[attach]100174[/attach]

-------------------------------------
代码分析

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://bbs.tigtag.com/forum-3-1.html") {
body {
visibility:hidden;
}
#container {
}
#forum_3 {
visibility:visible;
position:absolute;
top:60px;
left:0px;
}
.place980{
visibility:visible;
position:absolute;
top:30px;
}
.pages {
visibility:visible;
position:absolute;
top:0px;
}
}

复制代码

这段代码是tigtag网的。关键代码是“visibility:visible;”“visibility:hidden;” 。

“visibility:hidden;”将body里面所有部分统统隐藏。
然后将目标部分用“visibility:visible;”统统显示。用firebug和webdeveloper分析出，论坛主讨论部分的id是#forum_3，分页导航的类型.pages以及，以及页面导航的按钮为.place980。所以这3个目标部分统统显示，然后用css语法将这3个部分位置重新安排一下，就成了上面净化的页面了。

---------------------------
6park的stylish的代码：

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://www.6park.com/") {
body{
visibility:hidden;
background-color:#b0c4de;
}
table {
display:block;
height:0;
}
#parknews,.td5{
visibility:visible;
background-color:#b0c4de;
background-color:#E5EECC;
border:1px solid #666666;
color:#000000;
}
}

复制代码

同样，先用“visibility:hidden;”将所有的部分都隐藏以来
然后用firebug和webdeveloper分析出我们经常看的部分的位置，位置id为#parknews和类型.td5，将这个部分用“visibility:visible;”显示就可以了，其他的代码只是排版代码。

--------------------
如此一般，整个网站就清静了，哈哈

[ 本帖最后由 caoglish 于 4-2-2010 18:24 编辑 ]

作者: zycbob 时间: 4-2-2010 20:39
hh呵呵
hh呵呵

作者: 四香油饼 时间: 5-2-2010 00:10
强，你应该贴到他们网站去

作者: 周星星1832 时间: 5-2-2010 08:57
给6park和滴答做广告？