Оформление витрины ссылок

Оформление витрины ссылок

В этой статье я расскажу, как можно легко оформить на чистом CSS блок витрины ссылок. У каждого сервиса предоставляющий витрину есть свой простой html шаблон вывода ссылок, что не много ограничивает нам возможности по оформлению блока.

За основу я возьму код сервиса «NUM-LINK» (это не тот код который выдается после создании витрины, а код который в конце получает посетитель сайта). Вы можете не пугаться так, как у всех витрин ссылок схожие коды.

Инструкция для просмотра конечного кода страницы:

Вот такой у меня конечный код витрины (будет легче оформлять видя код):

Исходный код:

Для начала нам надо всю витрину поместить в два div блока, первый с классом link-case (названия могут быть разными) и второй с классом link-case-t. Ну и конечно нужно разместить ссылку на покупку рекламы. Её мы разместим перед последним /div и сам текст поместим в блок с классом link-case-b.

Вот что получается:

Теперь займемся оформлением.
1. Избавляемся от подчеркиваний в ссылках:

2. Убираем переносы строки br:

3. Красиво оформляем ссылки:

Оформление витрины ссылок

4. Оформляем ссылку покупки рекламы:

5. Оформление главного блока

В конце у вас должно получится:

Оформление витрины ссылок

HTML

CSS

0 Comments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *