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;
}
7 comments
您好，我是一個初學者的信息所以這一切感謝。
annie, 你可能要自己新增 CSS 語法來控制 anobii 的排版。
可以參考我文章內的寫法，應該有用。
你好!
我是最近才開始用anobii
我把他給的程式碼貼到部落格
卻呈現很不整齊的狀況
請問你知道為什麼嗎?
麻煩妳了…
看是要排在哪邊，有介面會比較好調整，我這個 css 的寫法只有讓他呈現同一排而已，然後有邊框。
看看 Carrie 有沒有畫面可參考呢？
艾德，你可以幫我看看我的書櫃排版亂掉的原因嗎？
這是我的程式碼，你幫我看看有哪裏不對，所以造成版型亂掉，麻煩了，多謝！
＜style type=”text/css”＞
/* ——[ For each item in the badge ]—— */
#badge .item_cell li {float: left; list-style-type: none; margin: 0px;}
#badge .cover img {border: 1px solid #77827C !important;
margin: 2px 2px 2px 2px;}
＜/style＞
＜!– This is the HTML section of the badge –＞
＜div id=”badge”＞
＜script type=”text/javascript” src=”http://www.anobii.com/anobi/badge_generator.php?p=01a2f5c29e7ff0b26d&p_type=&tag=0,9,11,10,12,4,2,7,5,3,13,8,6&count=6&recent=1&progress=3&title=0&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id=”＞＜/script＞
＜/div＞
艾德，你可以幫我看看我的書櫃排版亂掉的原因嗎？
這是我的程式碼，你幫我看看有哪裏不對，所以造成版型亂掉，麻煩了，多謝！
/* ——[ For each item in the badge ]—— */
#badge .item_cell li {float: left; list-style-type: none; margin: 0px;}
#badge .cover img {border: 1px solid #77827C !important;
margin: 2px 2px 2px 2px;}