我的Blogger標籤雲設計 - jQuery應用 - Tag Cloud

Blogger內預設的標籤通常都是如下表示：括號內的數字就代表文章的篇數，雖很清楚但覺得很凌亂很醜...
標籤雲(Tag Cloud)就是把括號跟數字都拿掉，將數字化為標籤字型的大小，如下圖所示，你可以看到字體越大的代表文章越多，是不是既直覺又美觀?


因為正在學習使用jQuery，於是就把這個當題目來練習了一下，你可以在Blogger的版面配置上開個JavaScript組件，將下面的程式碼複製貼上使用，雖不是太炫不過也有七分像了，請大家多指教。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a ~ span").map(function(){
var w=$(this).html().replace("(","").replace(")","");
$(this).prev().css("font-size",12+parseInt(w)*1.5+"px");
$(this).html("");
});
});
</script>

P.S. 只適用於Blogger喔!! 其他部落格不支援....

利用DIV CSS排版

過去我都愛用TABLE標籤來對網頁作排版的動作，有一段時間覺得也挺好上手的很直覺也很快速，但有時候後來對於比較複雜的版面網頁就會出現很複雜的TR、TD標籤，且要相當依賴IDE工具不然會看不懂自己排什麼版面，效率方面經過搜尋發現效果也比較差，因為要解譯到最後一個才會顯示整個網頁。後來發現CSS也是一種不錯的排版方式，優點是彈性，結構清楚，缺點對我來說就是需要一段適應時間，雖然也知道CSS屬性就那些可是有時候就會忘記怎麼寫了。下面是我自己測試的結果。

假設下圖就是我要排兩個區塊的樣子...html標籤與css安排如下:
<div id="main" >
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>

#main{width:100%; display:inline-block;}
#sub1{width:50%; float:left;}
#sub2{width:30%; float:left;}
如果sub1、sub2寬度都小於外面的div，且float都設定從左至又安排，就會如上圖所示。

#main{width:100%; }
#sub1{width:50%; float:left;}
#sub2{width:30%; float:left;}

如果缺display:inline-block 就會變成上圖。


#main{width:100%; display:inline-block;}
#sub1{width:50%; float:left;}
#sub2{width:70%; float:left;}

被包含的元素寬度也很重要如上圖所示.

以上是自己測試得到的心得...