改了一下Blogger的页面配置

默认的模板是按照像素固定宽度的，语句大致是这样
#outer-wrapper {
position:relative;
top:4px;
left:4px;
background: #999;
width:？？？px;
margin:10px auto;
text-align:left;
font: $bodyFont;
}

估计当时作这个模板的人是针对1024 768的屏幕分辨率作的设定。在我这里的显示结果就是东西都挤在中间，两边全都空出来。显然很没效率。至于效果嘛...



可是我也不方便把这个东西按照我这里的尺寸设置，所以首先去查了些文章，尝试改成按照固定的比率进行分割，大概是这样

#outer-wrapper {
position:relative;
top:4px;
left:4px;
background: #999;
width:？？？%;
margin:10px auto;
text-align:left;
font: $bodyFont;
}

可是这样造成另外一个小问题：右边侧栏的宽度是如果随着分辨率改变，右边那张插图就变得很麻烦了（我不知道怎么能让图片尺寸也跟着变）


没办法，只好暂时把插图给删掉了。今天一怒，又折腾了一会儿，找到这么一个办法：
把右侧sidebar的尺寸固定到300个像素（这样插图就不会有问题了）；然后左边尺寸就按照显示器尺寸来设置－－这件事情可以通过下面Javascript来实现（从http://singpolyma.net/2006/12/singpolyma-templates-for-new-blogger/借鉴来的）

<type="'text/javascript'">
//<![CDATA[
document.writeln("<type="\">#main-wrapper {width:" + (window.innerWidth*0.92 - 350) + "px;} </style>");//set main width
//]]>
</script>

加到</head> 之前

恩，最后的效果吗


不过还是有个小问题的：如果是改变浏览器尺寸以后，需要刷新一次。不过好在一般人的分辨率是定死的，也不会没事把浏览器拖大拖小玩。
当然，不太完美，不过对于一个Java没有任何实战经验，CSS临时抱佛脚的人来说，这个结果还算是可以容忍了~~~哈哈。