Создание кнопки голосования вверх / вниз со счетчиком с использованием html / css

Question

Я довольно новичок в html / css и мне нужно создать что-то вроде следующего:

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

Где UP и DN - некоторые изображения, указывающие и повышающие и понижающие.# Является чистым результатом голосов UP и DN.Так что я достаточно хорошо разбираюсь в javascript для работы на стороне сервера ajax /.Моим навыкам в основном не хватает html / css - фактического дизайна пользовательского интерфейса для таких кнопок.

Есть ли у кого-нибудь советы по темам CSS, которые я должен изучить, или какие-то хорошие учебники в Интернете, которые могут научить меня, каксделать это шаг за шагом?Даже идея высокого уровня о том, как мне поступить, чтобы сделать это или разбить это на куски, была бы великолепна.

Answer 1

Для действительных стрелок вверх и вниз, либо выполните серьезное масштабирование с помощью символов ↑ ↓, либо используйте изображения. (С технической точки зрения вы могли бы по-настоящему полюбить вращение z-index и CSS3 и сделать это с помощью чистого CSS, но давайте не будем здесь. :) 1001 *

Есть несколько способов получить желаемую базовую раскладку. Вам понадобятся два блока: блок чисел и блок вверх / вниз. Эти блоки могут быть размечены с помощью 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;   
}

Вы можете заменить .voteUp и .voteDown изображениями и связать события щелчка с JS, а затем соответствующим образом обновить содержимое .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

Я работал над этим до того, как @Thomas опубликовал свой ответ, так что я все равно его опубликую.Он также поставляется с бесплатным, JSFiddle .

По сути, используйте display: inline-block вместе с vertical-align: middle или line-height: 30px (или любым количеством пикселей) для позиционирования.

Answer 3

Следуйте этим темам:

1. Позиционирование CSS
2. Плавающие CSS
3. Блочная модель CSS

это почти все, что вам нужно дляэто:)