程式相關 / 艾德分享 · 6 3 月, 2007 7

製作個人化的書櫃(aNobii)在Blog上

aNobii 個人化書櫃網站,這個網站可以輕鬆的建立自己的書櫃,透過書名或ISBN的新增書目的方法,快速將書本收入到自己的書櫃,並且可以立即了解還有多少讀者在閱讀同一本書,不過另一個小工具非常好用的就是建立 Blog 小貼紙,不過程式碼內附的CSS樣式並不是每個人都喜歡這樣的寫法,所以就來將程式呈現 html 的語法給拆開來看。

aNobii 的書櫃是用 ul 跟 li 來排版的,所以定義 aNobii 的 ul 及 li 就可以呈現自己喜歡的樣式,從程式碼可以知道每本書都的html規格如下

<ul class=item_cell>
<li class=cover>書本內容</l>
</ul>

只要了解 CSS 的語法就可以排列及修飾成自己想要的樣式了。以下是我自己定義的樣式,因為我沒有顯示書名跟作者,所以就不定義 author 跟 subtitle 這兩個 CSS,直接使用我的CSS 會呈現排成一列的樣式,類似的效果就跟我首頁右側一樣。當然網站上預設的圖片大小有,小型、大及方形,選擇完畢之後再定義 img 的寬跟高就可以再調整書本的大小。

.item_cell li{
float: left;
list-style-type: none;
margin: 0px;
}
.item_cell img {
border: 4px solid #77827C !important;
margin: 2px 2px 2px 2px;
width: 75px;
height: 100px;
}