CSS маркер за списък
Използването на изображение като маркер на списък е непозволен лукс по отношение на скоростта на зареждане на страницата, особено за млад сайт.
Затова ще ви покажа няколко примера за това как можете да създадете маркер, използвайки само html и css.
Един таг може да се използва като контейнер за маркера, тъй като той се вписва нормално в списъка и не е блоков елемент.
За да може кодът да бъде вмъкнат в стиловете на CMS, задавам директно етикетите на списъка и класовете. Размерът зависи от вас, моят е малко по-голям.
Код на символа. Всеки знак от шрифта или специален символ може да се използва като маркер.
.squar списък стил: няма; размер на шрифта: 20px; > .квадратна ширина: 10px; височина: 10px; фон: червен float: ляво; поле: 6px 5px 5px 5px ; >
ul class="squar" > hr class="square" > li >Списък /li > hr class="square" > li >Списък /li > /ul >
.circle list-style: няма; размер на шрифта: 20px; височина на линията: 1,3; > .disck width: 12px; височина: 12px; float: ляво; поле: 7px 5px 0 5px ; радиус на границата: 50%; фон: радиален градиент (кръг, бяло, червено 4px); >
ul class="кръг" > hr class="disk" > li >Списък /li > hr class="disk" > li >Списък /li > /ul >
.triangle1 стил на списък: няма; размер на шрифта: 20px; > .corner1 граница: 6px плътен прозрачен; border-right: 10px плътно зелено; float: ляво; поле: 6px 5px 5px 5px ;
> .triangle2 стил на списък: няма; размер на шрифта: 20px; > .corner2 граница: 6px плътен прозрачен; border-left: 10px плътно зелено; float: ляво; поле: 6px 5px 5px 5px ; > HTML
ul class =" triangle1" > hr class =" corner1" > li >Список /li > hr class =" corner1" > li >Список /li > /ul >
ul class =" triangle2" > hr class =" corner2" > li >Список /li > hr class =" corner2" > li >Список /li > /ul >
.daw стил на списък: няма; размер на шрифта: 20px; > .маркировка ширина: 2px; височина: 12px; поле: 2px 5px 5px 0; фон: зелен; float: ляво; трансформиране: завъртане (-25 градуса); z-индекс: 1; > .mark1 ширина: 2px; височина: 10px; фон: зелен; поле: 4px 5px 5px -5px ; float: ляво; трансформиране: завъртане (25 градуса); >
ul class =" daw "> hr class =" mark "> hr class =" mark1 "> li >Список /li > hr class =" mark "> hr class =" mark1 "> li >Список /li > /ul ">
.amur стил на списък: няма; размер на шрифта: 20px; > .love border-radius : 5px 10px 0 10px ; ширина: 10px; височина: 10px; поле: 6px -6px 5px 0; фон: червен; float: ляво; > .love1 border-radius: 10px 5px 10px 0; ширина: 10px; височина: 10px; поле: 6px 5px 5px 0; фон: червен; float: ляво; >
ul class =" amur "> hr class =" love "> hr class =" love1 "> li >Список /li > hr class =" love "> hr class =" love1 "> li ">Список /li > /ul >
.symb стил на списък: няма; размер на шрифта: 18px; височина на реда: 1,3; > .символно поле : 0 5px 0 0 ; цвят: червен; тегло на шрифта: удебелен; float: ляво;
ul class =" symb" > span class =" symbol" >® /span > li >Список /li > span class =" symbol" >® /span > li >Список /li > /ul >
Може би някой от вас ще намери грешки в кода, ще посочи как да ги поправи или ще предложи допълнения. Аз ще бъда много благодарен. И не само аз.
Пожелавам ви творчески успех.
Хайде какво още може да се нарисува в css
Добра идея. В касичка.
Клас. Снимки в пещта!
Чайникът е малък, но много полезен.
благодаря ви много ... сега ще го сменя ..)))) Дори не съм чайник в този бизнес - бойлер)))
Въпросът е следният. Вече имате зададени свойства за таговете li и ul в първия списък. Както виждам, за втория си дал клас z и това е правилната посока. Просто клас от една буква не работи, но основното е, че трябва да посочите само дадения клас в селектора, а освен него имате и ul и li в селекторите. Отведете ги.
Всъщност цветът на котвата може да се промени с атрибута style, като се вгради в html на връзката.
И не вмъквайте етикета в тези селектори, само дадения клас.
ul.hr - Това също не е правилно. Първо, имате нужда от интервал и второ, има hr таг (права линия) в html. Няма нужда да създавате класове с имена на тагове.
Здравейте, имам хоризонтален списък в същия стил (меню на уебсайта) .... Сега трябва да добавим обикновен списък с водещи символи на същата страница. Създавам нов селектор на клас (Опитах също идентификатора) Не работи... Всички списъци са в хоризонтален стил... Как да променя или нулирам... Не знам какво да правя! Хоризонтални списъци с менюта: ul.hr, li < /*горно меню*/ поле: 0; /* Нулиране на стойността на отстъпи от предишни блокове*/ text-decoration: none; пълнеж: 0; > ul.hr марж: 0; подравняване на текст: център; /* центрирано заглавие*/ >
li дисплей: inline-block /*Показване катовграден елемент */ ширина: 230px; /* ширина на границата*/ поле: 5px; подложка: 5px; /*Поле около текста */ граница: 5px solid #458B00; /* Граница около текст */ border-radius: 10px; /* okruglenie ramki*/ семейство шрифтове: Philosopher, Georgia, „Courier New“, serif; размер на шрифта: 20pt; тегло на шрифта: 600; цвят: бял; фон: #458B00; подравняване на текст: център; маржин-дясно: 5px; /* добавете подложка между абзаците */