Чтобы получилось нечто подобное:
< div class = "tile2" >
< div class = "icons_left" > < img height = "32px" src = "/images/list.png" > < / div >
< div class = "icons_right" > < img height = "32px" src = "/images/heart.png" > < / div >
< / div >
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
. tile2 {
grid - template - columns : 50 % 50 % ;
display : flex ;
height : 100 % ;
}
. tile2 > . icons _ left {
color : #003264;
font - weight : bold ;
font - size : xx - large ;
text - align : end ;
margin : auto ;
cursor : pointer ;
}
. tile2 > . icons _ right {
color : #003264;
font - weight : bold ;
font - size : xx - large ;
text - align : left ;
margin : auto ;
cursor : pointer ;
}
Шел конец 2020 года, а мы всё еще не умеем штатно отображать символ рубля. Вот одно из решений:
1) Устанавливаем вот этот шрифт в css:
@ font - face {
font - family : "rouble" ;
src : url ( "/fonts/rouble.otf" ) format ( "opentype" ) ;
}
. rub { font - family : "rouble" ; }
2) В коде прописываем:
< span class = "rub" > i < / span >
Каждый аз гуглю, когда нужно. Решил таки уж у себя сохранить 😉
body {
background - image : url ( "../images/fone.jpg" ) ;
background - repeat : no - repeat ;
background - size : cover ;
background - position : center ;
height : 100 % ;
}
. round
{
border : 1px ;
border - style : solid ;
border - radius : 5px ;
- webkit - border - radius : 5px ;
}
После чего, в HTML добавляем class=»round» для того элемента углы которого хотим «скруглить», например:
< img width = 200 class = "round" src = "foto.jpg" >
Пришлось помучатся сегодня с одинаковым отображением текста с подключаемыми шрифтами в IE, FireFox,Chrome. Очень пригодились онлайн конвертеры ttf2svg, ttf2eot и ttf2woff . Ниже приведен пример стиля ccs, который является кроссбраузерным:
@ font - face {
font - family : 'PTSansBold' ;
src : url ( '../fonts/9125527.eot' ) ;
src : local ( '☺' ) , url ( '../fonts/9125527.ttf' ) format ( 'woff' ) , url ( '../fonts/9125527.ttf' ) format ( 'truetype' ) , url ( '../fonts/9125527.svg#PTSansBold' ) format ( 'svg' ) ;
font - weight : bold ;
font - style : normal ;
}
Навигация по записям
Жизнь замечательных грибов
