Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Ссылка пунктиром

В веб-дизайне часто прибегают к такому решению — подчеркивание ссылок пунктирной линией или точками. Такие ссылки обычно не совершают перехода на страницу, а открывают какой-либо скрытый слой. Например: на сайте expange.ru (если пользователь не авторизован) при нажатии на ссылку «Авторизация» открывается скрытый слой, на котором форма авторизации — удобно, быстро и без перезагрузки страницы (экономия трафика).

Подчеркивание черточкой

Подчеркивание черточками

1
2
3
<a href="/" style="text-decoration:none; border-bottom:#F00 1px dashed; color:#F00;">
    Подчеркивание черточками
</a>

Подчеркивание точками

Подчеркивание точками

1
2
3
<a href="/" style="text-decoration:none; border-bottom:#F00 1px dotted; color:#F00;">
    Подчеркивание точками
</a>

Примечание: В Internet Explorer 6 подчеркнуть точками не получится, выглядеть будет как подчеркивание черточкой.

Примечание

a:hover

Если при наведении ссылка меняет цвет, то не стоит забывать, что стандартное подчеркивание text-decoration:underline;, было изменено на text-decoration:none; и была установлена нижняя граница определенного цвета и стиля, поэтому, чтобы подчеркивание пунктиром тоже меняло свой цвет нужно делать так:

1
2
3
4
5
<style type="text/css">
a {color:#F00; text-decoration:none; border-bottom:#F00 1px dashed;}
a:hover {color:#900; border-bottom-color:#900;}
</style>
<a href="http://expange.ru/">При наведении цвет изменится с #F00 на #900</a>

Свойство padding в ссылках

Если ссылка в стилях имеет свойство padding, например padding:5px 10px;, то наше нижнее подчеркивание ссылки будет на 5 пикселей отдалено от текста. Чтобы решить эту проблему нам понадобится «промежуточный тег»:

1
2
3
4
5
<style type="text/css">
a {color:#F00; text-decoration:none; padding:5px 10px;}
a ins {text-decoration:none; border-bottom:#F00 1px dashed;}
</style>
<a href="http://expange.ru/"><ins>Используем промежуточный тег</ins></a>
Опубликовано: 31 марта 2011  ·  Автор: Артём Фёдоров  ·  16762 просмотра

Категория

ГлавнаяВеб-дизайнHTMLВерсткаСсылка пунктиром

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

А ссылка на авторизацию в самой статье перекидывает на другую страницу
Anton Gorodishenin · 2 года назад
Спасибо за подсказку с промежуточным тегом. Это действительно решает проблему.
· 3 года назад
Всегда пожалуйста.
Артём Фёдоров · 6 лет назад
давно искал спс
Nik Bin · 6 лет назад
Верстка, HTML, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания