Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
1 / 1 / 0
Регистрация: 19.08.2015
Сообщений: 93

Как сделать маркированный список на сайте?

27.02.2017, 18:08. Показов 2194. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Хочу оформить в боковой колонке сайте ( сайдбаре) список вот такими кружками:
• Ссылка в сайдбаре1
• Ссылка в сайдбаре2
Прочитал, что это делается с помощью изменения файла style.css, но не знаю как. Подскажите, что нужно делать?
Миниатюры
Как сделать маркированный список на сайте?  
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
27.02.2017, 18:08
Ответы с готовыми решениями:

Подскажите как сделать маркированный список с изображением?
<ul> <li style="list-style-image: url( images/stories/image011.gif );">Анализ имеющейся на вашем предприятии документации с полным...

Можно ли в RichTextBox сделать нумерованный или маркированный список?
не подскажите, в РТБ можно сделать нумерованный или маркированный список, как в ворде???

Как создать маркированный список в RichEdit?
пробую делать так: procedure TForm1.FormShow(Sender: TObject); begin RichEdit1.Lines.Clear; ...

7
112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452
27.02.2017, 18:22
CSS
1
2
3
ul{
list-style-type: circle;
}
0
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
28.02.2017, 02:20
Лучший ответ Сообщение было отмечено mrtoxas как решение

Решение

песочница: http://codepen.io/evgeniyproweb/pen/EWjBEW

HTML5
1
2
3
4
5
6
7
8
9
<div class="wrapper">
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.wrapper {
    width: 400px;
    margin: 30px auto;
}
 
ul {
    list-style: none;
}
 
li {
    position: relative;
    padding: 10px 20px;
}
 
li::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
}
0
1 / 1 / 0
Регистрация: 19.08.2015
Сообщений: 93
28.02.2017, 08:18  [ТС]
Evgeniy55, у меня сайт работает на Вордпресс, подскажите пожалуйста, с чего мне начать?
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
28.02.2017, 08:37
Цитата Сообщение от usit Посмотреть сообщение
с чего мне начать?
Зайдите в управление текущей темой. Там есть работа с файлами. Найдите CSS и его редактируйте.
0
1 / 1 / 0
Регистрация: 19.08.2015
Сообщений: 93
28.02.2017, 10:01  [ТС]
Para bellum, почти получилось, только кружки появились не только в сайдбаре, но и в других местах, можно ли их вывести в одном сайдбаре?
Миниатюры
Как сделать маркированный список на сайте?  
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.02.2017, 10:16
CSS
1
aside li::before {}
0
1 / 1 / 0
Регистрация: 19.08.2015
Сообщений: 93
28.02.2017, 10:58  [ТС]
Всё получилось, спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
28.02.2017, 10:58
Помогаю со студенческими работами здесь

Див перекрывает маркированный список. Как исправить?
Доброго времени суток. Помогите новичку. Проблема такая. Картинка из дива перекрывает ul с текстом, находящейся в нем. Мне...

Как из фрагмента текста получить маркированный список
макрос преобразующий фрагмент текста в маркированны список в VBA

Сделать раскрывающийся список как на сайте
Сделать раскрывающийся список как на сайте http://www.internet-technologies.ru/articles/article_907.html#subscribeCansel (находится ниже...

Маркированный список
Народ помогите вывести массив в маркированный список, а только постигаю пхп и не могу понять как правильно его в хтмл воткнуть. $Doc =...

Маркированный список
Как сделать цвет маркера и цвет заголовков разными например: &lt;ul&gt; &lt;li&gt;q&lt;ul&gt;&lt;li&gt;njnj&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru