Как я могу получить макет вкладки, как это

Question

Так что я пытаюсь выяснить, как лучше всего создать макет Tab, как это http://reversl.net/tests/, но я не уверен в правильном подходе к нему. Первоначально я думал о создании UL и плавающих элементов списка перед добавлением цвета фона и отступов для создания больших фонов. Но я не был уверен, как добиться расположения текста (большое число поверх маленького текста)

Я бы также хотел, чтобы на активных вкладках был указатель (как показано), и это заставило меня задуматься о том, что, возможно, вместо UL мне следует выполнить 3 погружения и сделать каждую ссылку ссылкой. Однако я думаю, что этот подход не будет очень семантическим. А теперь я в замешательстве: - / какие-нибудь советы?

Answer 1

Вы можете попробовать следующий HTML:

<ul id="tabs">
    <li>01</li>
    <li>02</li>
    <li>03</li>
</ul>

И CSS:

#tabs li:after {
    content: " tab";
    font-size: ...;
}

При необходимости добавьте другие элементы.

Answer 2

Используется псевдоэлемент: after для индикатора 'active', который будет нуждаться в shiv или полностью меняться, если вы хотите, чтобы он работал в дрянных браузерах, но он довольно близок к изображению:

http://jsfiddle.net/BzSVL/

Для более крупного текста выше, я думаю, что самая семантическая, которую вы получите, это em или strong, так как это выделенная часть текста ссылки?

Answer 3

Предоставленная ссылка является просто изображением.

попробуйте вкладки с помощью css