....
嗯, 目前只是改了一下OSChina的几个主要DIV宽度而以,还是很粗糙, 以后会慢慢改进的.
------------------------------------------------------------------------------------------------------------
确实, 把一个连半成品都算不上的东西放出来, 是一种很**的行为.
而昨晚,我刚好这么做了. 哪怕我早已经声明 "目前...很粗糙".
一开始,我加载远程css, 由于缓存和延时的原因, 操作起来并不方便.
一堆的 "+=" , 那是因为我经常神经发作,用 firebug, 看哪太小, 就改哪.没有头绪,没有计划. 仅仅只是为了效果早点出来而已.
好吧, 骂声一片, 我也只好计划一下, 一步步来.
1. 先计算好宽度,再调整, 而不是随便写上 500px 之类.
2. 还是会继续使用 css+= ....
3. 宽度调整到自己满意之后, 调整配色, 以 douban 为参考.
4. 压缩 css, 保持简洁.
5. 把 css 分离出来, 放到自己的服务器上,动态加载.
js 会被压缩到3行.
声明:
它只是用来重置OSChina默认的CSS.
它只是写来自己用而已, 我不对任何人负责.
如果你用得上, 你可以拿走.
如果你有建议, 请留言.
如果你看着不爽, 请飞过.
1. [代码][JavaScript]代码
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 */
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;}';
/* 空间 */
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();
