使用HTML/CSS

Question

創建一個計數器向上/向下投票按鈕，我是相當新的HTML/CSS和需要建立類似如下：

----------------- 
| |  UP | 
| # | foobar | 
| |  DN | 
----------------- 

是UP和DN是一些圖像的顯示和upvote和downvote。 ＃是UP和DN投票的最終結果。所以我相當精通javascript來處理ajax /服務器端。我的技能主要缺乏html/css - 這些按鈕的實際UI設計。

有沒有人有關於CSS主題的建議我應該看看或者在網上有一些很好的教程，可以教會我如何一步一步做出來？即使是我應該如何着手製作或將其分解成碎片的高層次想法也會很棒。

Answer 1

對於實際了和downvote箭頭，或者用↑↓字符做一些嚴重的縮放或者使用圖像。 （你可以在技術上真正喜歡Z指數和CSS3旋轉，並使其與純CSS，但我們不要去那裏:)

有幾種方法可以得到你想要的基本佈局。您需要兩個塊：一個數字塊和一個上/下塊。這些塊可以用CSS的display:inline-block進行佈局，其中元素的行爲與塊級元素相似（這意味着您可以設置寬度/高度等），但顯示在相同的行上。請記住，inline-block不支持IE7及更低版本，儘管您可以使用display:inline; zoom:1設置爲低於IE7。 或者你可以將這兩個元素左右浮動。雖然這經常會有一些奇怪的副作用。

一些實際的標記可能看起來像：

<div class="votesBox"> 
    <div class="votes">5</div> 
    <div class="vote"> 
     <div class="voteUp">UpVote</div> 
     <div class="voteDown">DownVote</div> 
    </div> 
</div> 

CSS：

.votes, .vote { 
display:inline-block; 
} 
.vote { 
vertical-align:middle; 
} 

您可以用圖像和線點擊事件JS更換.voteUp和.voteDown，然後更新.votes內容因此。

http://jsfiddle.net/WpxAm/1/

https://developer.mozilla.org/en/CSS/display

https://developer.mozilla.org/en/CSS/float

https://developer.mozilla.org/en/CSS/box_model

Answer 2

按照以下主題：

1. CSS定位
2. CSS花車
3. CSS盒子模型

這是幾乎所有你需要的:)

Answer 3

我工作的這個@Thomas張貼了他的答案之前，所以無論如何，我會張貼。還提供免費的免費JSFiddle。

實質上，使用display: inline-block以及vertical-align: middle或line-height: 30px（或多個px）來定位事物。