分類
Web 2.0 艾德分享

製作個人化的書櫃(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;
}

作者: Eduardo

在大台北地區出沒,網路愛好者,平時喜歡逛網站接收最新資訊,WordPress 13年經驗,提供WordPress客製化服務。

在〈製作個人化的書櫃(aNobii)在Blog上〉中有 7 則留言

看是要排在哪邊,有介面會比較好調整,我這個 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;}

發表迴響