Форум Сайтостроение Веб-строительство

Подскажите как в список css загнать картинку

D
На сайте с 20.09.2010
Offline
175
datum
461

Подскажите как в список вставить картинку как на этом сайте

Подсмотрел css файл этого сайта, там в списке не задается картинка.. Как они это сделали? Вот кусок стилей, которые за li отвечают:

.main-services .services ul li:hover i:after{

content:'';

position:absolute;

left:-5px;

top:-5px;

width:calc(100% + 10px);

height:calc(100% + 10px);

border:2px solid #fc3

}

.main-services .services ul li i{

position:relative;

width:16px;

height:16px;

margin-right:15px;

background-color:#fc3;

-webkit-transform:rotate(45deg);

-ms-transform:rotate(45deg);

transform:rotate(45deg)

}

jpg Untitled-3.jpg
totamon
На сайте с 12.05.2007
Offline
437
totamon
#1
datum:
как в список вставить картинку

не все что выглядит как картинка, на самом деле картинка😂

смотрите стили на <i>

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
D
На сайте с 20.09.2010
Offline
175
datum
#2

i{

position:relative;

width:16px;

height:16px;

margin-right:15px;

background-color:#fc3;

-webkit-transform:rotate(45deg);

-ms-transform:rotate(45deg);

transform:rotate(45deg)

}

Я смотрел..

<i style="position:relative; width:16px; height:16px; margin-right:15px; background-color:#fc3; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)">Пример </i>

И где здесь ромбик?

Snake
На сайте с 18.06.2004
Offline
148
Snake
#3

transform: rotate(45deg);

D
На сайте с 20.09.2010
Offline
175
datum
#4
Snake:
transform: rotate(45deg);

<i style="position:relative; width:16px; height:16px; margin-right:15px; background-color:#fc3; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)">Пример </i>

где ошибка, ткните

jpg Untitled-3.jpg
Snake
На сайте с 18.06.2004
Offline
148
Snake
#5
datum:
<i style="position:relative; width:16px; height:16px; margin-right:15px; background-color:#fc3; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)">Пример </i>

где ошибка, ткните

position: absolute; попробуйте

<i style="position:absolute; width:16px; height:16px; margin-right:15px; background-color:#fc3; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)">Пример </i>

png 2018-04-04_16-21-37.png
S
На сайте с 13.10.2014
Offline
171
silicoid
#6

юзайте

:before и :after

первым делается квадратик, вторым - рамка

если не хотите использовать псевдоклассы, можете загнать svg

пара примеров 

    	<ul class="variant1">

            <li>text</li> 

            <li>text</li> 

            <li>text</li> 

    	</ul>

        

    	<ul class="variant2">

            <li>text</li> 

            <li>text</li> 

            <li>text</li> 

            <li>text</li> 

    	</ul>        

        <style>

			/* первый вариант */

			.variant1 li{

				display:block;

				position:relative;

				list-style:none;

				padding:0 0 10px 30px;

				color:#FF6633;

				font-size:24px;

				line-height:100%;

			}

			.variant1 li:before{

				display:block;

				position:absolute;

				left:5px;

				top:7px;

				width:12px;

				height:12px;

				content:"";

				transform:rotate(45deg);

				background-color:#FF6633;

			}

			.variant1 li:after{

				display:block;

				position:absolute;

				left:2px;

				top:4px;

				width:16px;

				height:16px;

				content:"";

				transform:rotate(45deg);

				background-color:transparent;

				border:solid 1px #FF6633;;

			}

				

			/* второй вариант */			

			.variant2 li{

				display:block;

				position:relative;

				list-style:none;

				padding:0 0 10px 30px;

				color:#669966;

				font-size:24px;

				line-height:100%;

			}

						

			.variant2 li:before{

				display:block;

				position:absolute;

				margin-left:-30px;

				margin-top:5px;

				content:"";

				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23669966' width='18' height='18'%3E%3Cpath d='M18 0v18H0V0h18m-1 1H1v16h16V1z'/%3E%3Cpath d='M3.1 3.1h11.8v11.8H3.1z'/%3E%3C/svg%3E");

				background-position:left top;

				background-repeat:no-repeat;

				width:18px;

				height:18px;

				transform:rotate(45deg);

			}			

		</style>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий