создание списка интерактивных элементов

0

Я пытаюсь создать панель для значков социальных сетей, которая выглядит так:

Изображение 174551

Но я действительно застрял.

Я попытался создать его так:

<div class="social-media">
<ul>
    <li class="facebook">facebook</li>
    <li class="instagram">instagram</li>
    <li class="twitter">twitter</li>
    <li class="youtube">youtube</li>
</ul>
</div>

.social-media ul li {
display: inline-block;
}

.social-media ul li.facebook:after {
content: url('../images/facebooklogo.png');
width: 21px;
height: 21px;
}

И так далее для каждого класса li.class

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

Во-вторых, я не знал, как сделать их целыми кликабельными, когда я пытался использовать тег "a", он не нацеливал изображение, указанное ли: после этого только текст внутри li

Неужели я просто ошибаюсь? лучше ли использовать кучу вложенных divs и использовать onclick, чтобы сделать все это ссылкой?

Любая помощь будет отличной, я очень смущен.

  • 0
    Почему вы пытаетесь сделать ссылку кликабельной с помощью псевдоэлемента? В любом случае ссылка будет помещена после или до нее, а не в указанный элемент списка.
  • 0
    Можете ли вы положить весь свой код в jsFiddle, пожалуйста?
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

Я бы использовал <li><a class="facebook" href="thisIsYourFacebookPage.html">My Facebook page</a></li>

И дайте изображение, которое вы хотите, с помощью

a.facebook:before { 
background: url("to/the/path/to/my/image");
width: 21px;
height: 21px;
display: inline-block;
content: " ";
}

Вот так: http://jsfiddle.net/gVp2P/1/

Поделиться
  • 0
    спасибо за это, я все еще не могу заставить это работать, но я буду продолжать это. ширина и высота не влияют на размер изображения? только размер окна, в котором изображение отображается, хотя?
  • 0
    извините, просто чтобы кто-нибудь из читателей знал, этот ответ отлично сработал, и я отрегулировал размер изображения, добавив следующее: background-size: 21px 21px;
Показать ещё 1 комментарий
0

Вы должны также рассматривать значки как шрифт вместо изображений.

Причина в том, что они масштабируются лучше, выглядят очень красиво, даже если ваши пользователи увеличивают или используют дисплеи сетчатки, и вы можете просто добавить цвета css, тени и т.д. Так же, как вы будете стилизовать свой текст.

читайте здесь: http://icomoon.io/

Поделиться
0

Насколько я знаю, вы не можете указать URL-адрес для контента. Но здесь вам не нужно использовать псевдоэлементы. Просто укажите фоновое изображение каждого <li>

.social-media ul li{
    display:inline-block;
    width: 21px;
    height: 21px;
}
.social-media ul li.facebook {
    background-image: url('../images/facebooklogo.png');
}

Если вы хотите, чтобы они были кликабельными ссылками, вам действительно даже не нужна ul li. Просто используйте <a> напрямую, дайте ему класс, facebook, linkedin и т.д., А затем следующий CSS.

.social-media a {
    display:inline-block;
    width: 21px;
    height: 21px;
}
.social-media a.facebook {
    background-image: url('../images/facebooklogo.png');
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню