Href li как удалить

Как удалить, заменить или оформить маркеры списка с помощью CSS

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

Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.

Можете также установить класс к любому элементу списка ( ), не меняя остальные маркеры.

Пример

html> html> head> title>Заголовок документа title> style> .nolist < list-style: none ; > style> head> body> h2>Неупорядоченный список h2> ul> li>Элемент списка 1 li> li class="nolist">Элемент списка 2 li> li>Элемент списка 3 li> ul> h2>Упорядоченный список strong> h2> ol class="nolist"> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> ol> body> html>

Как заменить маркеры списка на изображения

CSS может быть использован, чтобы превратить маркеры в квадраты или круги, но таким образом мы не имеем полного контроля над их внешним видом или положением. Замена стандартных HTML маркеров на изображения — отличный способ, чтобы сделать ваш сайт более привлекательным.

Есть два способа установления изображений для элементов списка:

1. Используйте list-style-image, чтобы заменить HTML маркеры на графические изображения. В большинстве современных браузеров применение этих изображений несовместимо. А также нет полного контроля над положением маркеров.

HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.

Нет полного контроля над тем, как будут отображаться маркеры перед элементами списка.

Пример

html> html> head> title>Заголовок документа title> style> ul < list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png"); > style> head> body> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> ul> body> html>

1. Использование фоновых изображений для маркеров будет лучшим вариантом. Давайте пошагово увидим, как применить этот метод:

• Создайте простой неупорядоченный список
• Удалите маркеры с помощью list-style-type: none none
• Удалите поля и отступы

Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) — поля.

, как в данном примере:

ul < padding: 0; margin: 0; >

• Добавьте отступ сами

В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.

margin-left: 1em;

• Добавьте фоновое изображение

• Задайте no-repeat

Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.

li < background-image: url(star.png); background-repeat: no-repeat; >

• Измените положение фонового изображения

Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.

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

background-position: 1px;

• Переместите контент

padding-left: 20px;

А сейчас увидим каким будет полный пример:

Пример

html> html> head> title>Заголовок документа title> style> ul < list-style-type: none; padding: 0; margin: 0; > li < background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png"); background-repeat: no-repeat; background-position: 1px; padding-left: 20px; > style> head> body> ul> li>Зеленый li> li>Синий li> li>Желтый li> li>Красный li> ul> body> html>

Также возможно установить разные фоновые изображения для каждого элемента списка. Просто добавьте классы и установите фоновое изображение для каждого из них.

Как создать горизонтальные списки

Пример

html> html> head> title>Заголовок документа title> style> #container ul < margin: 0; padding: 0; list-style-type: none; text-align: center; > #container ul li < display: inline; > #container ul li a < text-decoration: none; padding: 5px 20px; color: #fff; background-color: #1c87c9; > #container ul li a:hover < color: #fff; background-color: #369; > style> head> body> div id="container"> ul> li>a href="#">Home a> li> li>a href="#">Blog a> li> li>a href="#">Contact a> li> li>a href="#">About a> li> ul> div> body> html>

Как оформить списки

Добавьте стиль к спискам с помощью свойств color и background-color:

Пример

html> html> head> style> ol < background: #1c87c9; padding: 20px; color: cyan; > ul < background: #8ebf42; padding: 20px; > ol li < background: #666; padding: 5px; margin-left: 35px; > ul li < background: #eee; margin: 5px; > style> head> body> ol> li>Кофе li> li>Чай li> li>Молоко li> ol> ul> li>Кофе li> li>Чай li> li>Молоко li> ul> body> html>

Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:

Пример

html> html> head> title>Заголовок документа title> style> ul < border: 1px solid #ddd; background-color: #eee; list-style-type: none; padding: 0; > ul li < padding: 8px 10px; border-bottom: 1px solid #ddd; > ul li:last-child < border-bottom: none; > style> head> body> ul> li>Кофе li> li>Чай li> li>Молоко li> ul> body> html>

Добавьте границу к элементам вашего списка, используя CSS свойство border-left:

Пример

html> html> head> title>Заголовок документа title> style> ul < border-left: 5px solid #8ebf42; background-color: #eee; list-style-type: none; padding: 10px 20px; > style> head> body> div id="container"> ul> li>Кофе li> li>Чай li> li>Молоко li> ul> div> body> html>

Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.

Пример

html> html> head> title>Заголовок документа title> style> .disc < list-style: disc; > .square < list-style: square; > .armenian < list-style: armenian; > .lower-greek < list-style: lower-greek; > style> head> body> ul> li class="disc">Круглый маркер li> li class="square">Квадратный маркер li> li class="armenian">Армянский маркер li> li class="lower-greek">Греческий маркер li> ul> body> html>

Пример со всеми видами маркеров

) и неупорядоченных (
) списков:

Пример

html> html> head> title>Заголовок документа title> style> ul.a list-style-type: circle;> ul.b list-style-type: square;> ol.c list-style-type: upper-roman;> ol.d list-style-type: lower-alpha;> ol.e list-style-type: armenian;> ol.f list-style-type: decimal;> ol.g list-style-type: cjk-ideographic;> ol.h list-style-type: decimal-leading-zero;> ol.i list-style-type: georgian;> ol.j list-style-type: hebrew;> ol.k list-style-type: hiragana;> ol.l list-style-type: hiragana-iroha;> ol.m list-style-type: katakana;> ol.n list-style-type: katakana-iroha;> ol.o list-style-type: lower-greek;> ol.p list-style-type: lower-latin;> ol.q list-style-type: lower-roman;> ol.r list-style-type: none;> ol.s list-style-type: upper-alpha;> ol.t list-style-type: upper-latin;> style> head> body> h2>Примеры неупорядоченных списков h2> h3>Circle h3> ul class="a"> li>Нью-Йорк li> li>Лас-Вегас li> li>Вашингтон li> ul> h3>Square h3> ul class="b"> li>Сан-Франциско li> li>Лос-Анджелес li> li>Майами li> ul> h2>Примеры упорядоченных списков: h2> h3>Upper-roman h3> ol class="c"> li>Барселона li> li>Мадрид li> li>Лондон li> ol> h3>Lower-alpha h3> ol class="d"> li>Дубай li> li>Абу-Даби li> li>Катар li> ol> h3>Armenian h3> ol class="e"> li>Ереван li> li>Париж li> li>Рим li> ol> h3>Decimal h3> ol class="f"> li>Сидней li> li>Гонк Конг li> li>Москва li> ol> h3>Cjk-ideographic h3> ol class="g"> li>Киев li> li>Санкт-Петербург li> li>Тула li> ol> h3>Decimal-leading-zero h3> ol class="h"> li>Бангкок li> li>Гюмри li> li>Валенсия li> ol> h3>Georgian h3> ol class="i"> li>Мадрид li> li>Барселона li> li>Прага li> ol> h3>Hebrew h3> ol class="j"> li>Иерусалим li> li>Торонто li> li>Прага li> ol> h3>Hiragana h3> ol class="k"> li>Каир li> li>Токио li> li>Афины li> ol> h3>Hiragana-iroha h3> ol class="l"> li>Тегеран li> li>Тебриз li> li>Тель-Авив li> ol> h3>Katakana h3> ol class="m"> li>Мюнхен li> li>Берлин li> li>Бавария li> ol> h3>Katakana-iroha h3> ol class="n"> li>Брюссель li> li>Стамбул li> li>Сидней li> ol> h3>Lower-greek h3> ol class="o"> li>Севилья li> li>Гранада li> li>Венеция li> ol> h3>Lower-latin h3> ol class="p"> li>Будапешт li> li>Виенна li> li>Амстердам li> ol> h3>Lower-roman h3> ol class="q"> li>Буэнос-Айрес li> li>Рио-де-Жанейро li> li>Сан-Паоло li> ol> h3>None h3> ol class="r"> li>Вильнюс li> li>Таллинн li> li>Рига li> ol> h3>Upper-alpha h3> ol class="s"> li>Монреаль li> li>Мельбурн li> li>Эдинбург li> ol> h3>Upper-latin h3> ol class="t"> li>Дублин li> li>Мексика li> li>Флоренция li> ol> body> html>

Как убрать маркеры в маркированном списке?

Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.

Пример 1. Список без маркеров

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 1. Список без маркеров

Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.

CSS по теме

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

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

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

Как удалить ссылки в заголовке сайта?

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.

Posted: 11 years ago

Снова здравствуйте. Столкнулся с еще одной проблемой: не получается удалить текстовые ссылки в заголовке сайта, сразу под картинкой шапки. Нужно из строки с текстовыми ссылками удалить 2 пункта: корзина и список пожеланий. Подскажите, где это находится?

Team Member
Posted: 11 years ago
\Views\Common\HeaderLinks.cshtml (проект Nop.Web)

Interested in the dedicated Premium support services provided by core developers? Please visit https://www.nopcommerce.com/nopcommerce-premium-support-services

Regards,
Andrei Mazulnitsyn
nopCommerce team

Posted: 11 years ago

Андрей, у меня в файле \Views\Common\HeaderLinks.cshtml находится следующий код:

я выделил жирным шрифтом, те пункты которые хотел удалить. Никакого эффекта это не дало.

P.S. а что такое (проект Nop.Web)?

Posted: 11 years ago

Стоп, вопрос снимается. Чето я протупил 🙂 . Если открыть сайт например в экспрешн студии, и в ней кликнуть на файл, он откроется в вижуал студии, но изменения почему-то не принимаются. видимо работает с копией в локальном кеше. нужно подключиться к сайту из вижуал студии напрямую, тогда все работает..
Спасибо за помощь 🙂

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.

Still have questions or need help?

Product

• Get started
• Store demo
• Showcase
• Case studies
• Features
• Why for developers
• Why for store owners

Download

• Download nopCommerce
• Marketplace
• Translations
• Release notes
• Copyright removal key
• Web API
• Mobile application
• License

Support & services

• Training
• Documentation
• Community forums
• Premium support services
• Request a quote

Community

• Contribute
• Certified developer program
• MVP program
• Blog

Partners

• Solution partners
• Technology partners
• Recommended hosting
• Become a partner

Как убрать точки от

Как можно убрать это (в неупорядоченном списке
):

Отслеживать
задан 12 апр 2018 в 16:01
Иван Репин Иван Репин
341 1 1 золотой знак 9 9 серебряных знаков 21 21 бронзовый знак
12 апр 2018 в 16:05

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Для этой цели применяется стилевое свойство list-style-type со значением none :

li < list-style-type: none; /* Убираем маркеры */ >ul < margin-left: 0; /* Отступ слева в браузере IE и Opera */ padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */ >

Отслеживать
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
ответ дан 12 апр 2018 в 16:04
755 1 1 золотой знак 10 10 серебряных знаков 28 28 бронзовых знаков

Можно сделать изящней то же самое:

Это будет строчно-блочное отображение, маркеры уйдут. Можно просто inline применить.

А можно и блоком оставить список и убрать маркеры:

Отслеживать
51.6k 200 200 золотых знаков 59 59 серебряных знаков 242 242 бронзовых знака
ответ дан 25 мар 2019 в 11:25
13 2 2 бронзовых знака

• html
• css

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

Похожие

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

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

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

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

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