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

You Might Also Like

  1. 你好!
    我是最近才開始用anobii
    我把他給的程式碼貼到部落格
    卻呈現很不整齊的狀況
    請問你知道為什麼嗎?
    麻煩妳了…

  2. 看是要排在哪邊,有介面會比較好調整,我這個 css 的寫法只有讓他呈現同一排而已,然後有邊框。
    看看 Carrie 有沒有畫面可參考呢?

  3. 艾德,你可以幫我看看我的書櫃排版亂掉的原因嗎?

    這是我的程式碼,你幫我看看有哪裏不對,所以造成版型亂掉,麻煩了,多謝!

    <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>

  4. 艾德,你可以幫我看看我的書櫃排版亂掉的原因嗎?

    這是我的程式碼,你幫我看看有哪裏不對,所以造成版型亂掉,麻煩了,多謝!

    /* ——[ 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;}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *