使用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）来定位事物。