Блог

Я читал статью и просто удивлялся, как вставляются стрелки, как показано на рисунке ниже. Я просмотрел исходный код html, и там ничего не было.

Как вставить стрелки просто так?

Это фоновые изображения.

 #content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
  

Они используют этот CSS

 #content .bodytext a.external {
    background: url("/img/extlink.gif") no-repeat scroll right top transparent;
    padding-right: 7px;
}
  

И ссылка такая

 <a href="http://www.informationweek.com/news/windows/operatingsystems/showArticle.jhtml?articleID=208800494" target="_blank" rel="nofollow" class="external">http://www.informationweek.c<wbr></wbr>om/news/windows/operatingsys<wbr></wbr>tems/showArticle.jhtml?articleID=208800494</a>
  

CSS — это поиск элемента с id="content" помощью . Затем найдите его дочерние class="bodytext" элементы. Теперь для каждого дочернего элемента найдите тег привязки с class="external" и примените к нему фоновое изображение.

Они устанавливаются с помощью CSS фоновых изображений и классов на элементах.

Например, серая стрелка для внешних ссылок связана с классом external на якорях. Вы должны иметь возможность проверять другие стрелки, проверяя элементы с помощью инструментов разработчика в вашем браузере, например, FireBug в FireFox.

Что касается приведенной выше ссылки из Duniyadnd, которую я нашел очень интересной, быстрым решением для внутренних ссылок может быть:

a[href*=»здесь»] {отступ справа: 7 пикселей; фон: прозрачный URL(/img/intlink.gif ) нет-повтор вверху справа; }

Приведенный выше код выполняет поиск любых ссылок со словом «здесь» в них, а затем вставляет стрелку, указывающую «внутренний». Это, конечно, означало бы, что вам нужно будет ссылаться на все внутренние ссылки как «здесь» или выполнить еще пару правил. Затем вы можете изменить правило, чтобы оно соответствовало и внешним ссылкам:

a[href ^=’http’] { отступ справа: 7 пикселей; фон: прозрачный URL(/img/extlink.gif ) нет-повтор вверху справа; }

Это изображение, стилизованное таким образом с помощью css. Как вы можете видеть, гиперссылка имеет class='external' и class='internal'

http://forums.whirlpool.net.au//img/exteml.gif

http://forums.whirlpool.net.au//img/extlink.gif

 #content .bodytext a.internal { padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }
#content .bodytext a.internal,
#content .bodytext a.internal:link,
#content .bodytext a.internal:active,
#content .bodytext a.internal:visited { color: #730; text-decoration: none; }
#content .bodytext a.internal:hover { color: #A50; text-decoration: underline; }
#content .bodytext a.internal img { display: none; }

/* inter-links */
#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
#content .bodytext a.external img { display: none; }

/* inter-links */
#content .bodytext a.email { padding-right: 7px; background: transparent url(/img/exteml.gif) no-repeat top right; }
#content .bodytext a.email img { display: none; }