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

三月 6, 2007

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

廣告

5 Responses to “製作個人化的書櫃(aNobii)在Blog上”

  1. Carrie Says:

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

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

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

  2. Carrie Says:

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

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

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

  3. Ed Says:

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

  4. annie Says:

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

  5. Eduardo Says:

    annie, 你可能要自己新增 CSS 語法來控制 anobii 的排版。
    可以參考我文章內的寫法,應該有用。


發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: