Таблица пиктограмм HTML, содержит более 100 популярных иконок для оформления контента веб-страниц, рассылок и текстов. Воспользуйтесь удобной навигацией по категориям или перейдите сразу к таблице символов.
Специальные пиктограммы HTML позволяют оформить текст письма или тему рассылки. Помогают использовать иконки для кнопок и ссылок на сайте. Чтобы разместить символ на странице, необходимо скопировать код символа и вставить в исходный HTML-код страницы.
Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице.
Оформление текста
| ✓ | Символ галочка | |
| ✔ | Жирная галочка | |
| ☑ | Галочка в квадрате | |
| ☒ | Крестик в квадрате | |
| ☓ | Крест | |
| ✅ | Жирная незакрашенная галочка | |
| ✕ | Крестик | |
| ✖ | Жирный крестик | |
| ✗ | Изогнутый кретик | |
| ✘ | Жирный изогнутый крестик |
Офисные предметы
| ✆ | Знак телефона с проводом | |
| Телефонная трубка | ||
| Телефонная трубка левосторонняя | ||
| Телефонная трубка правосторонняя | ||
| ☎ | Телефон закрашенный | |
| ☏ | Телефон прозрачный | |
| Черный кнопочный телефон | ||
| Мобильный телефон | ||
| ☕ | Чашка чая / кофе | |
| ✄ | Ножницы | |
| ✃ | Ножницы | |
| ✉ | Конверт или письмо | |
| ✍ | Рука с ручкой | |
| Дискета | ||
| Лупа (наклонённая влево) | ||
| Лупа (наклонённая вправо) | ||
| Отрывной календарь | ||
| Портфель |
Источник: konstantinbulgakov.com
HTML & CSS практика | Верстаем меню сайта
Коды HTML для блоков, рамок, картинок, ссылок
Коды html, рассмотренные ниже, пригодятся в работе с сайтом. С их помощью можно вставить изображения в нужном положении, рекламные коды, правильно оформить анкорные ссылки, сделать обтекаемые картинки и блоки рекламы, оформить текст рамкой.
Как выделить абзац в html
Если при написании текста нужно каждый абзац начинать с красной строки, то это можно сделать двумя способами – правильным и неправильным.
Неправильный – в визуальном редакторе сделать это кнопкой “пробел”, но в этом случае в общий код страницы попадает много ненужных знаков, которые считаются мусором.
Топ-7 фишек HTML/CSS верстки сайта которые ты должен знать
Правильный – сделать специальным кодом в текстовом редакторе. Этот код выглядит так:
< p style = «text-indent: 25px;» >тут ваш текст < / p >
Вставляете это код в начале каждого абзаца, и он получается именно с таким отступом, как этот абзац. 25 – это расстояние от края в пикселях, которое можно менять. И не забывайте закрывать абзац тегом .
А вот как это выглядит в тестовом редакторе:
Код активной ссылки
Теперь рассмотрим код активной ссылки. Такая ссылка нужна для перенаправления посетителя на какую-то страницу сайта, или на другой сайт, или еще куда-то. Ссылка выглядит так:
< a href = «http://адрес направления» >название ссылки < / a >
https:// – здесь вставляете адрес нужной страницы или адрес сайта. Название ссылки – тут можно вставить нужное слово (перейти, посмотреть, ознакомиться и т.д.). Это слово называется “анкор”.
Пример готовой активной ссылки:
В итоге вся конструкция будет выглядеть так: перейти.
Чтобы активная ссылка открывалась в новом окне, при этом и ваш сайт оставался открытым, в этот код необходимо добавить:
тогда код активной ссылки будет выглядеть следующим образом:
< a href = «https://адрес направления» target = «_blank» >название ссылки < / a >
Вместо “название ссылки” можно вставить не только ссылку, но и какую-нибудь картинку, то есть вписывается полный пусть изображения, взятый из файлового менеджера или из медиабиблиотеки. В итоге получается кликабельная картинка. Пример:
Например, если нажать на картинку ниже, вас перенаправит на главную страницу сайта – она откроется в новой вкладке.
Обтекание блока рекламы текстом в CSS
При установке на страницы сайта небольших блоков рекламы остаётся пустое пространство. Чтобы заполнить его текстом, который будет обтекать блок рекламы, можно воспользоваться следующим кодом:
< div style = «float:left; margin:5px 5px 5px 5px;» >сюда вставляете код рекламного блока < / div >
Теперь разберем, что это значит. Обтекание мы назначили слева, поскольку:
float: left; – это обтекание текстом слева,
float: right; – справа.
Значение margin – это свободный отступ, чтобы текст не прилипал к объявлению. В примере выше мы сделали везде по 5 пикселей. Этот параметр можно изменить по своему желанию.
Так же можно вставить вместо рекламного блока любую картинку. Эта картинка будет обтекаться текстом вот так. Здесь я задала обтекание справа.
Обтекание изображения текстом в html
Чтобы сделать обтекание какого-то кода или изображения текстом в html, потребуется такой код:
У нас получается
обтекаемое изображение такого вида.
Вместо left – обтекания слева, как и в случае с рекламным блоком, можно использовать right – справа, а также:
- bottom — выравнивание по первой строке текста,
- top — по верхней строке,
- middle — по базовой строке текста.
Теперь пример обтекания
с отступами, которых явно не хватало в примере выше.
Чтобы текст не прилипал к изображению, добавляем значение hspace и vspace – это задаст отступы. Атрибут hspace задает горизонтальный отступ в пикселях, vspace – вертикальный.
Код уже получится таким:
То же самое можно сделать через значения margin или padding:
со значением padding.
Получились такие же аккуратные отступы.
Как сделать код HTML видимым на странице сайта
Иногда при создании страницы возникает необходимость выложить на странице какой-то скрипт для того, чтобы посетители могли его скопировать. Чтобы этот скрипт был виден на странице и не занимал много места, можно воспользоваться такими тегами:
В результате получится рамочка, в которой будет расположен скрипт или какая-то другая информация. Размер рамки корректируется с помощью мышки – просто потяните за нижний правый угол. Для примера размещу скрипт календаря с моего сайта:
Кнопка “Вернуться”
Иногда возникает необходимость вернуться с одной страницы на ту с которой попали на эту страницу. Есть несколько вариантов для этого. Можно поставить код активной ссылки, а можно установить внизу посередине страницы кнопочку “Вернуться”.
Ниже два кода такой кнопки и один код якорной ссылки:
Источник: mehelps.ru
Полезные решения на CSS
Сборник из простых решений на CSS, которые пригодятся при оформлении сайта.
Данная заметка дополняемая
- Адаптивное видео (шириной 100%)
- Изменение фона выделенного текста
- Запрет выделения текста
- Разделение текста на несколько колонок
- Удаление пробелов между блочно-строчными элементами
- Подключение нужного стиля в зависимости от разрешения экрана
- Показ адреса ссылки при печати
- Запрет события мыши
- Прокрутка фонового изображения вверх
- Деление блока на равные колонки
- Тень для изображений на прозрачном фоне
- Якоря для ссылок при фиксированном хедере
- Регулярные выражения
1. Адаптивное видео (шириной 100%)
Данный способ подходит для вставки видео через фрейм, как например, с ВК или Youtube.
position : relative ;
padding-bottom : 56.25% ; /* Для формата 16:9, а для формата 4:3 ставим 75% */
padding-top : 25px ;
.video iframe <
position : absolute ;
width : 100% ;
height : 100% ;
2. Изменение фона выделенного текста
К примеру, если у вас красный или зеленый сайт, то стандартное синее выделение лучше заменить.
background : #BFE2FF ;
::-moz-selection <
background : #BFE2FF ;
3. Запрет выделения текста
Данным способом можно не только мешать посетителю выделять текст, но и помогать выделять только нужное
-webkit-user-select : none ;
-moz-user-select : none ;
-ms-user-select : none ;
user-select : none ;
4. Разделение текста на несколько колонок
Чтобы разделить текст или список элементов на несколько колонок, используется свойство column-count
— moz — column — count : 3 ;
— webkit — column — count : 3 ;
column — count : 3 ;
5. Удаление пробелов между блочно-строчными элементами
Между блочно-строчными элементами в браузере появляются пробелы, если HTML-код форматируется как обычно. Как вариант, можно написать код в одну строку, но многие CMS сами отформатируют код, сделая переносы.
Для решения проблемы, нужно установить нулевой шрифт для списка и нужного размера для его элементов.
font-size : 0 ;
display : inline-block ;
font-size : 16px ;
6. Подключение нужного стиля в зависимости от разрешения экрана
Для удобства работы со стилями, можно для каждого устройства подключать свои
7. Показ адреса ссылки при печати
Для того, чтобы видеть адреса ссылок в распечатанном документе, нужно добавить стиль:
content : » [» attr ( href ) «] » ;
8. Запрет события мыши
Чтобы запретить мыши реагировать на элементе используется свойство:
pointer-events : none ;
Например, чтобы не цеплялись и не перетаскивались картинки.
9. Прокрутка фонового изображения вверх
Если изображение имеет большой размер по вертикали, а его нужно уместить в небольшой по высоте блок, то его можно прокручивать при наведении мыши:
height : 300px ;
position : relative ;
.image-bg .image-scroll <
background-position : center 0 ;
background-repeat : no-repeat ;
background-size : cover ;
height : 300px ;
margin : 0 auto ;
position : absolute ;
width : 100% ;
transition : all 5s ease-out 0s ;
.image-bg:hover .image-scroll <
background-position : center 100% ;
10. Деление блока на равные колонки
Чтобы разделить блок на произвольное кол-во равных по ширине колонок, используем:
display : flex ;
.container .block <
Нужное кол-во блоков с классом block помещаем в контейнер container и получим:
Текст, текст, текст, текст
Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
11. Тень для изображений на прозрачном фоне
Чтобы добавить правильную тень к изображению на прозрачном фоне используем фильтр drop-shadow вместо box-shadow:
filter : drop-shadow ( 0 8px 10px rgba ( 0,0,0,0.5 ) ) ;
box-shadow
filter: drop-shadow
12. Якоря для ссылок при фиксированном хедере
Если на сайте присутствует фиксированный хедер, то при переходе по ссылке на закладку часть нужного нам контента будет им перекрыта. Для того чтобы сдвинуть контент немного вниз используем такой якорь:
и стиль для него:
position : relative ;
top : -100px ;
13. Регулярные выражения
Если нужно задать стиль ко всем элементам с классами, которые содержат определенный набор символов, то используется регулярное выражение вида: [class*=atuin] <> , при котором стили будут применены ко всем классам с именами, которые содержат atuin
и стиль для него:
Операторы:
*= — определенное значение где-то в атрибуте.
^= — определенное значение в начале атрибута
$= — определенное значение в конце атрибута
Источник: atuin.ru