重置 oschina 的CSS

嗯, 目前只是改了一下OSChina的几个主要DIV宽度而以,还是很粗糙, 以后会慢慢改进的. 
------------------------------------------------------------------------------------------------------------

确实, 把一个连半成品都算不上的东西放出来, 是一种很傻逼的行为. 
而昨晚,我刚好这么做了. 哪怕我早已经声明 "目前...很粗糙".

一开始,我加载远程css, 由于缓存和延时的原因, 操作起来并不方便. 
一堆的 "+=" , 那是因为我经常神经发作,用 firebug, 看哪太小, 就改哪.没有头绪,没有计划. 仅仅只是为了效果早点出来而已.

好吧, 骂声一片, 我也只好计划一下, 一步步来. 
1. 先计算好宽度,再调整, 而不是随便写上 500px 之类. 
2. 还是会继续使用 css+= .... 
3. 宽度调整到自己满意之后, 调整配色, 以 douban 为参考. 
4. 压缩 css, 保持简洁. 
5. 把 css 分离出来, 放到自己的服务器上,动态加载. 
   js 会被压缩到3行.

声明: 
它只是用来重置OSChina默认的CSS. 
它只是写来自己用而已, 我不对任何人负责. 
如果你用得上, 你可以拿走. 
如果你有建议, 请留言. 
如果你看着不爽, 请飞过. 
​1. [代码][JavaScript]代码     http://www.huiyi8.com/ppt/​
// ==UserScript==
// @name           OSC
// @namespace      osc
// @include        http://www.oschina.net/question*
// @include        http://www.oschina.net/news/*
// @include        http://www.oschina.net/
// @include        http://my.oschina.net/*
// ==/UserScript==
 
function addOscStyle() {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.id = 'zhi';
    var css = '';
    css += 'body{font-size:14px;}';
    css += '.QuestionList ul li.question .qstat ul li.answer{color:#000;background:none;}';
    css += '#OSC_Screen{min-width:1000px;width:98%;}';
    css += '.QuestionList{min-width:770px;width:1200px;}';
    css += '.QuestionListRight{width:500px;}';
    css += 'a.tag{background-color:none;border:none;}';
    css += '.QuestionList ul li.question h2{font-size:18px;}';
    css += '.QuestionList ul li.question a.user{width:55px;height:55px;margin:auto 10px;}';
    css += '.QuestionList ul li.question a.user img{width:50px;height:50px;border-radius:8px;}';
    css += '.QuestionList ul li.question .Tags{width: auto; float: right;}';
    css += '.QuestionList ul li.question .qbody{width:940px;}';
    css += '#CatalogTags ul li a{border-radius:5px;}';
    css += '.QuestionList ul li.question .Date{float:left;font-size:14px;width:auto;}';
    css += '.QuestionList ul li.question h2 a{color:#333;}';
    css += '.QuestionListRight .TopUsers ul li{font-size:14px;width:90px;height:76px;}';
    css += '.QuestionListRight .TopUsers ul li img{width:53px;height:53px;border-radius:8px;}';
    css += '.QuestionListRight #QuestionWizard{float:left;display:block;}';
    css += '.QuestionListRight #TopUsers{display:block;float:left;}';
    css += '.QuestionListRight #PopularTags{float:right;display:block;width:248px;display:none;}';
    css += '.Question .Body{width:1200px;font-size:16px;}';
    css += '.Question .Body .Content{width:1200px;}';
    css += '.Question .Body .Content .detail{font-size:16px;}';
    css += '.Question .Body .Vote{width:202px;}';
    css += '.Question .Body .Vote a{width:200px;float:left;}';
    css += '.Question .Body .Vote .vote-count-post{width:50px;float:left;width:120px;}';
    css += '.QuestionReplies .Answer .user{width:55px;height:55px;margin:auto 10px;}';
    css += '.QuestionReplies .Answer .user img{width:50px;height:50px;border-radius:8px;}';
    css += '.QuestionReplies .Answer .body{width:1120px;margin-top:10px;}';
    css += '.Question .QuestionRelations{width:500px;}';
    css += '.Question .QuestionRelations #Similarity ul li a{font-size:18px;}';
    css += '.Question .Title .QTitle{width:1000px;}';
    css += '.Question .Title .QTitle h1{width:900px;}';
    css += '.Question .Title .Asker{width:55px;height:55px;margin:auto 10px;}';
    css += '.Question .Title .Asker img{width:50px;height:50px;border-radius:8px;}';
    css += '.QuestionReplies .Best{background: url("../img/2011/best.gif") no-repeat scroll 80px 10px #EEFFEE}';
    css += '.QuestionList ul li.question{padding:10px 0;margin:0px;}';
    css += '.QuestionList ul li.question:nth-child(2n){background-color:#DDD;}';
    css += '.QuestionReplies .Answer .replies ul li{padding-left:5px;}';
    css += '.QuestionReplies .Answer .replies ul li:nth-child(2n-1){background-color:#DDD;border-radius:3px;}';
    css += '.QuestionReplies .Answer .replies ul li a.p{font-size:14px;width:60px;height:60px;margin:10px;padding-right:10px;border-right:1px solid #555;}';
    css += '.QuestionReplies .Answer .replies ul li a.p img{width:53px;height:53px;border-radius:8px;}';
    css += '.QuestionReplies .Answer .replies ul li .b{padding-top:10px;width: 1000px;}';
    /* news */http://www.huiyi8.com/ppt/​
    css += '#OSC_Content td.left{width:1200px;}';
    css += '.Comments ul li .portrait{padding:10px 0 0 10px;width:80px;height:80px;}';
    css += '.Comments ul li .portrait img{width:50px;height:50px;border-radius:8px;}';
    css += '.Comments ul li.row_0 {background-color:#DDD;border-radius:8px;}';
    /* 空间 */ppt模板
    css += '#LSpace{width:450px;background-color:#DDD;border-left-width:5px;padding:10px;border-radius:8px;}';
    css += '#MSpace{width:800px;}';
    css += '#RSpace{width:440px;}'
    css += '#Logs .Log .post{width:700px;font-size:16px;line-height:20px;}';
    css += '#Logs .userlogs li.Tweet{margin-bottom:30px;}';
    css += '#Logs .portrait{width:80px;height:80px;}';
    css += '#Logs .portrait img{width:50px;height:50px;border-radius:8px;}';
    css += '#Owner #img img{border-radius:8px;}';
    css += '#Owner #oimg img{border-radius:8px;}';
    css += '.Users ul li{width:80px;height:75px;}';
    css += '.Users ul li img{width:50px;height:50px;border-radius:8px;}';
    css += '.Users ul li a em{font-size:14px;}';
    css += '.TweetRpls .p{width:80px;}';
    css += '.TweetRpls .p a{width:80px;height:80px;}';
    css += '.TweetRpls .p img{width:50px;height:50px;border-radius:8px;}';
    css += '.TweetRpls .m{width:580px;}';
    /* 首页 */
    css += '.TodayNews{width:700px;}';
    css += '.mod,.mod h2{border-radius:8px;}';
    //css += '#DynaInfo{width:400px;}';
    css += 'td[width="280"] {width:400px;}';
    css += '#DynaInfo ul li .portrait{width:80px;height:80px;}';
    css += '#DynaInfo ul li .portrait img{width:50px;height:50px;border-radius:5px;}';
    /* 默认字体大小 */
    css += '#OSC_Screen{font-size:16px;line-height:20px;}';
    css += '#DynaInfo ul li .user a,#DynaInfo ul li .log{font-size:16px;line-height:20px;}';
 
    style.innerHTML = css;
    head.appendChild(style);
}
addOscStyle();
​