Как сделать закрашенный круг в html

Маркированный список

, а каждый пункт списка начинается с тега
, как показано ниже.

В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Пример 11.1. Создание маркированного списка

Результат данного примера показан на рис. 11.1.

Рис. 11.1. Вид маркированного списка

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

. Допустимые значения приведены в табл. 11.1

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

Создание списка с квадратными маркерами показано в примере 11.2.

Пример 11.2. Вид маркеров

Результат данного примера показан на рис. 11.2.

Рис. 11.2. Вид списка с квадратными маркерами

HTML по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

Нарисовать круг, используя только CSS

Ну раз уж в вопросе сказано «используя только CSS», то так и отвечу:

html < background: white; >body < width: 10em; /* поддерживаются любые единицы, в том числе проценты */ margin: 1em auto; background: silver; border-radius: 50%; >body::before

Отслеживать
ответ дан 17 мар 2017 в 9:12
122k 24 24 золотых знака 124 124 серебряных знака 297 297 бронзовых знаков

• Создайте div с одинаковым высотой и шириной, образуя тем самым квадрат (для круга используйте те же величины).
• Добавьте border-radius 50%, что сделает квадрат круглым по форме.
• Затем вы можете поиграть с фоном-цветом / градиентами / (даже с псевдоэлементами), чтобы создать что-то вроде этого:

.red < background-color: red; >.green < background-color: green; >.blue < background-color: blue; >.yellow < background-color: yellow; >.sphere < height: 200px; width: 200px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 500%; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display: inline-block; margin: 5%; >.sphere::after

Отслеживать
ответ дан 17 мар 2017 в 9:05
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 111 111 серебряных знаков 372 372 бронзовых знака
Просили круг а не сферу.
11 авг 2018 в 9:53

А мне понравился этот ответ, он единственный из всех поддерживает IE8-, поскольку не использует border-radius :

Вместо этого вставляется символ круга, с номером unicode 25СF :

.circle:before

Отслеживать
ответ дан 17 мар 2017 в 12:04
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

А мне не понравился этот прием, потому что даже при 200px уже видны зазубрины изображения. Ловите плюс за труды.

17 мар 2017 в 12:51
Какие зазубрины? Вектор же. Можно добавить немножко text-shadow
17 мар 2017 в 13:07

@vp_arth вот не знал, что текст это вектор, спасибо, что просветили.Увеличите масштаб и увидите ступеньки, мне и так видно

17 мар 2017 в 13:09
Увеличил font-size до 500px, масштаб в браузере — до 500%. Никаких зазубрин.
17 мар 2017 в 13:13
Ну значит надо спросить кого-нибудь третьего 🙂
17 мар 2017 в 13:14

Думаю с кодом тут все понятно:

.circle

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 297 297 бронзовых знаков
ответ дан 18 мар 2017 в 10:57
GrumpyCoder GrumpyCoder
180 8 8 бронзовых знаков

конечно с кодом всё понятно — это стандартный код для получения круга свойствами css/ Для поддержки нового пользователя ловите плюс

18 мар 2017 в 11:08

Вот миксин для создания круга

@mixin circle($width, $color) < width: $width; height: $width; background: $color; border-radius: $width/2; >.circle

Отслеживать
ответ дан 17 мар 2017 в 10:34
Trofimov Zhenya Trofimov Zhenya
307 1 1 серебряный знак 8 8 бронзовых знаков
Не могу найти информацию про миксины в стандарте CSS3, не поделитесь ссылкой?
18 мар 2017 в 8:49

@andreymal, а их там и нет. По крайней мере, не в этой форме. В стандарте есть @apply , который по сути тоже миксин.

18 мар 2017 в 11:42
Кстати, с процентами работать не будет.
18 мар 2017 в 11:50

Поищите инфу про препроцессоры — sass, scss или stylus, это чудесная штука, там есть переменные, функции, вложенность и еще куча классных штук. Если хотите совсем в тренде быть — заодно и про postcss почитайте. Оно позволяет проанализировать код и указывает на ошибки и проблемы несовместимости.

19 мар 2017 в 10:18

Ещё есть вариант с использованием кругового градиента:

.circle

Отслеживать
ответ дан 17 мар 2017 в 22:06
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков

• html
• css
• html5
• css3

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать закрашенный круг в html

Для распознания данного вида списка браузером используются два вида тегов, такие как: &ltul> и &ltli> они считаться двойными тегами, так как у них есть закрывающиеся теги &lt/ul> и &lt/li>.

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста.

Но давайте посмотрим, как в коде выглядит маркированные списки:
&lthtml>
&lthead>
&lttitle>Моя первая html страница&lt/title>
&lt/head>
&ltbody>
&ltp>Фрукты&lt/p>
&ltul>
&ltli>Банан&lt/li>
&ltli>Яблоко&lt/li>
&ltli>Персик&lt/li>
&lt/ul>
&lt/body>
&lt/html>

А вот так выглядит в браузере:

2.Стандартные маркеры для маркированного списка

На изображении выше (Рис 7.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

3.Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

&lthtml>
&lthead>
&lttitle>Пример маркированного списка с маркером в виде пустого круга&lt/title>
&lt/head>
&ltbody>
&ltp>Звезды:&lt/p>
&ltul type=»circle»>
&ltli>Сириус&lt/li>
&ltli>Арктур&lt/li>
&ltli>Поллукс&lt/li>
&ltli>Бетельгейзе&lt/li>
&ltli>Солнце&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Сразу смотрим, как это выглядит в браузере:

4.Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка: &lthtml>
&lthead>
&lttitle>Пример маркированного списка с маркером в виде квадрата&lt/title>
&lt/head>
&ltbody>
&ltp>Виды птиц:&lt/p>
&ltul type=»square»>
&ltli>Ара зеленокрылый&lt/li>
&ltli>Дрозд рябинник&lt/li>
&ltli>Индейка палевая&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Обратите внимание на маркер, он стал квадратным:

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

5.Нумерованные списки в HTML (упорядоченные списки)

В отличие от предыдущего вида списков, в нумерованных списках есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно, когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега &ltol>&lt/ol>. Как это выглядит на практике:

Пример нумерованного списка:
&lthtml>
&lthead>
&lttitle>Пример стандартного нумерованного списка&lt/title>
&lt/head>
&ltbody>
&ltp>От одного до пяти:&lt/p>
&ltol>
&ltli>Первый&lt/li>
&ltli>Второй&lt/li>
&ltli>Третий&lt/li>
&ltli>Четвертый&lt/li>
&ltli>Пятый&lt/li>
&lt/ol>
&lt/body>
&lt/html>

Таким образом, выглядит нумерованный список со стандартными настройками в браузере:

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

1. Бадминтон
2. Бейсбол
3. Бокс

1. Джомолунгма
2. Чогори
3. Канченджанга

1. Summit Plummet
2. Tantrum Alley
3. Insano

1. Филиппинское море
2. Аравийское море
3. Коралловое море

1. Красный
2. Зеленый
3. Синий

6.Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз, либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

&lthtml>
&lthead>
&lttitle>Вложенный маркированный список HTML&lt/title>
&lt/head>
&ltbody>
&ltul>
&ltli>Citroen
&ltul>
&ltli>Berlingo&lt/li>
&ltli>C1&lt/li>
&ltli>C2&lt/li>
&ltli>C3 Picasso&lt/li>
&ltli>C4 Grand Picasso&lt/li>
&lt/ul>
&lt/li>
&ltli>KIA&lt/li>
&ltli>Toyota&lt/li>
&ltli>Audi&lt/li>
&ltli>Lexus&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Обратите внимание, как выглядит многоуровневый список в браузере:

Мы делали многоуровневый список с помощью маркированного (тег &ltul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры. Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
&lthtml>
&lthead>
&lttitle>Нумерованные, маркированные и многоуровневые списки в HTML&lt/title>
&lt/head>
&ltbody>
&ltul>
&ltli>Первая группа тюльпанов
&ltol>
&ltli>Первый класс
&ltul>
&ltli>Простые ранние тюльпаны&lt/li>
&lt/ul>
&lt/li>
&ltli>Второй класс
&ltul>
&ltli>Махровые тюльпаны&lt/li>
&lt/ul>
&lt/li>
&lt/ol>
&lt/li>
&lt/ul>
&lt/body>
&lt/html>

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.

Практическое задание 1

&lth4>Неупорядоченный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>

Сохраните файл под именем 18ul.html

Практическое задание 2

Упорядоченные списки
&lthtml>
&ltbody>

&lth4>Упорядоченный список:&lt/h4>
&ltol>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ol>

&lt/body>
&lt/html>
Сохраните файл под именем 19ol.html
Практическое задание 3
Списки определений
&lthtml>
&ltbody>

&ltdl>
&ltdt>элемент 1&lt/dt>
&ltdd>описание элемента 1&lt/dd>
&ltdt>элемент 2&lt/dt>
&ltdd>описание элемента 2&lt/dd>
&lt/dl>

Сохраните файл под именем 20dl.html

Дополнительное задание по спискам:
1.Различные типы упорядоченных списков

&lth4>Список проектов с цифрами:&lt/h4>
&ltol>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с буквами:&lt/h4>
&ltol type=»A»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с буквами нижнего регистра:&lt/h4>
&ltol type=»a»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с римскими цифрами:&lt/h4>
&ltol type=»I»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с римскими цифрами в нижнем регистре:&lt/h4>
&ltol type=»i»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

Сохраните файл под именем 21ol.html

2.Различные типы неупорядоченных списков

&lth4>Список со значком кругом:&lt/h4>
&ltul type=»disc»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

&lth4>Список со значком окружностью:&lt/h4>
&ltul type=»circle»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

&lth4>Список со значком квадратом:&lt/h4>
&ltul type=»square»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

Сохраните файл под именем 22ul.html

3.Вложенный список

&lth4>Вложенный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltul>
&ltli>элемент 2.1&lt/li>
&ltli>элемент 2.2&lt/li>
&lt/ul>
&ltli>элемент 3&lt/li>
&lt/ul>

&lth4>Вложенный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltul>
&ltli>элемент 2.1&lt/li>
&ltli>элемент 2.2&lt/li>
&ltul>
&ltli>элемент 2.2.1&lt/li>
&ltli>элемент 2.2.2&lt/li>
&lt/ul>
&lt/li>
&lt/ul>
&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>

Сохраните файл под именем 23vlog.html

4.Список определений

&lth4>Список определений:&lt/h4>
&ltdl>
&ltdt>элемент 1&lt/dt>
&ltdd>описание элемента 1&lt/dd>
&ltdt>элемент 2&lt/dt>
&ltdd>описание элемента 2&lt/dd>
&lt/dl>

Сохраните файл под именем 24dl.html

Задание для самостоятельной работы № 1

1.Составить HTML-кода для предложенной страницы.
2.Предусмотреть заголовки, абзацы, списки, а также горизонтальные линии.

Как нарисовать круг в HTML5 (Canvas)

Круг в канвасе рисуется при помощи функции .arc(centerX, centerY, radius, sAngle, eAngle, clockwise) , .fill() и .stroke() . При помощи параметров .fillStyle , .lineWidth и .strokeStyle меняются цвет заливки, толщина и цвет линии.

Красная линия

Нарисуем в канвасе красный круг. Смотреть пример онлайн.

function circle() В результате на экране вы красный круг (похоже на флаг Японии).

Примечание

Канвас генерирует PNG-изображения и после выполнения функции .getContext(‘2d’) изображение Канваса имеет прозрачный фон.

Объект для рисования в Канвасе

Продолжая тему объекта для рисования в Канвасе, дополним его функцией для рисования круга (файл ExpangeCanvas.js — файл будет постепенно улучшаться).

Пример использования

Нужно нарисовать 4 круга при помощи ExpangeCanvas в отдельных канвасах. Смотреть пример онлайн.

✖ ❤ Мне помогла статья нет оценок
35553 просмотра нет комментариев Артём Фёдоров 24 апреля 2012

Категории

Читайте также

• Как нарисовать линию в HTML5 (Canvas)
• div height 100 (CSS)
• Lorem Ipsum по-русски
• Как сделать ссылку (HTML)
• Min-width для IE6
• HTML одной строкой
• Ссылка без подчеркивания
• Валидный HTML-тег HR
• Размер шрифта (CSS)
• Ссылка пунктиром
• Курсор рука (CSS)
• div с прокруткой

Комментарии

Написать комментарий
© Экспэнч 2010-2023
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети: