💬

Как красиво оформить списки ul, ol стилями css в html

На дворе 2020 год, но конечно, многие компании, включая нашу, захотят красиво оформить свой официальный сайт к новому 2021 году Быка. А это можно сделать, используя CSS и разметку HTML. В этой статье специально подготовленной для наших любимых читателей, мы рассмотрим, как можно красиво оформить списки, они же еще называются перечисления. В данной статье мы рассмотрим только нумерованные списки. При оформлении списков <ol> или <li> всегда можно придумать, как выделить их более красиво, используя стили оформления. Важно, перед тем, как ваять продумать заранее структуру страницы, и решить должны ли они сильно выделяться, привлекать внимание людей, посетивших сайт, или лучше, чтобы они имели неброское оформление. Конечно, не всегда получается желаемый результат и бывает, что не все идет, так гладко, как хочется при сочинении дизайна. Данный урок демонстрирует технологию, решения вопроса, как можно красиво оформить страничку своего сайта, но здесь мы не будем учить дизайну и как сделать правильно юзабилити. И так, начнем рассказ и показ, как можно сделать оформление списков при помощь CSS, не используя картинки. В качестве текста для заполнения при демонстрации итога возьмем простой гороскоп по знакам зодиаков, но сразу предупредим любителей астрологии: данная версия гороскопа – шуточная, и служит просто для демонстрации общего вида, и не несет смысловой информативности из области, называющейся астрология.

Код CSS и HTML для списка <ol> в красивом оформлении

На странице сайта нумерованный HTML-список представляет из себя набор вертикально ориентированных элементов, которые заключены в блок с прописанным стилем оформления CSS. Элементы нумерованного списка <li> могут быть оформлены красиво при помощи других элементов разметки, например, содержать тег ссылки <a>, картинки <img>, быть с абзацем <p> и прочие элементы HTML. А для реализации нашего примера давайте в файле стилей пропишем следующее:

Красивый спислк ol
Нумерованный список ol, CSS, HTML

CSS стиль:

ol {
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

Нумерованный список оформляем с цифрами в кружочках

Ниже мы разместили для наглядности пример, в котором опубликовали новый гороскоп на 1 января 2021 года по знакам зодиака, которых, как мы знаем 12 штук.

В файле стилей размещаем следующий код:

CSS код для оформления списка c цифрами в кружочках:.

circle-list li{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0 .5em .9em;
background: #cccccc;
color: #333333;
text-decoration: none;
border-radius: .3em;
}

.circle-list li:before{
color:#ffffff;
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #608b0d;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #ffffff;
text-align: center;
font-weight: bold;
border-radius: 2em;
}

HTML код для оформления списка c цифрами в кружочках:

<ol class="circle-list">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<ol>

Демонстрация оформления списка

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

  1. Гороскоп на 1 января 2021 года: Овен мужчина. Иногда вы чувствуете, что вам нужно многое сделать, чтобы вас любили и ценили, и чтобы быть в безопасности, которую вы хотите всегда. Овны склонны брать на себя большую ответственность за других людей. Особенно в этот день нового года не стоит перегружать себя. Позвольте себе опереться на близких вам людей!
  2. Астрологический прогноз на 1 января 2021 года: Телец мужчина. У Тельца есть отличный барометр настроения. Особенно в этот день нового года он реагирует на каждый шорох и звук. Но знак зодиака также может быть под влиянием настроения. Например, если с другом сидит дома, и друг может быть грустным, он берет на себя его настроение. Если знак зодиака позволит себе быть пораженным чувствами других, он может быть чрезмерно эмоциональным.
  3. Гороскоп на 1 января 2021 год Быка: Близнецы мужчина. Растущая необходимость выйти за рамки обычных дозволений имеет свои недостатки. Обратите внимание на то, где вы выпускаете пар и не переусердствуйте с этим делом. В противном случае это может иметь неприятные последствия. Можете заняться в первый день нового года 1 января освоением науки по созданию сайтов и разобраться, как делать красивые нумерованные списки при помощи CSS и HTML.
  4. Астрологический прогноз на 1 января 2021 года: Рак мужчина. У вас может быть тенденция превратить небольшой провал в мероприятиях в семейную драму. Жизнь иногда может быть несправедливой. В первый день нового года нужно очень мало, чтобы заставить вас задуматься. Там, где много тени, всегда есть много света. Вы встречаете любовную жизнь с особой глубиной и страстью.
  5. Гороскоп на 1 января 2021 года: Лев мужчина. Иногда вы чувствуете, что вам нужно многое сделать, чтобы вас любили и ценили, и чтобы получить безопасность, которую вы хотите всегда. Львы мужчины склонны брать на себя большую ответственность за других людей и стараются сделать это всегда и везде. Особенно сегодня, в этот день зимних каникул не стоит перегружать себя. Позвольте себе опереться на друзей и родню!
  6. Астрологический прогноз на 1 января 2021 года: Дева мужчина. У этого знака зодиака есть при себе всегда отличный барометр настроения. Особенно в этот 1 день нового года вы не реагируете на суету вокруг, а просто отдыхаете. Но вы также можете послушать музыку или быть под влиянием сюжета фильма, что создает для вас хорошее настроение. Например, если вы идете гулять и ваш провожатый по какой то причине грустный, Дева возьмет на себя их печаль и будет сильно переживать.
  7. Астрологический прогноз на 1 января 2021 года: Скорпион мужчина. У знака зодиака имеется склонность во время отдых сильно буянить и каждый раз все перерастает в любовную драму с любимой женщиной. Жизнь Скорпиону может казаться несправедливой. Нужно совсем мало, чтобы заставить знак зодиака задуматься о том, как жить дальше. Там, где много ярких красок, всегда есть черный цвет. Вы встречаете новый период календаря с особой глубиной и страстью.
  8. Гороскоп на 1 января 2021 года Быка: Весы женщина. У вас не обязательно должен быть новый любовник, Весы мужчина должен увидеть, как женщина реагируете на чей-то шарм и обаяние. Он сильно ревнует или чувствуете себя стесненным обстоятельствами. Любовное партнерство - это не просто четкое фактическое соглашение, но глубокий, эмоциональный вопрос сердца. На досуге займитесь освоением верстки, чтобы делать сайты красивыми, узнайте, как делать красивые нумерованные списке средствами CSS и HTML
  9. Гороскоп на 1 января 2021 года: Стрелец женщина. У тебя сегодня много энергии. События происходят стремительно и переворачивают все с ног на голову и уводят вашу жизнь в глушь. В лучшем случае у этого знака зодиака есть беспрецедентные полномочия для осуществления нового проекта, который имеет для него центральное значение. Личные амбиции могут легко быть бумерангом.
  10. Астрологический прогноз на 1 января 2021 года: Козерог мужчина. Слабые стороны ваших действий и стратегий по принуждению людей к труду теперь находятся в центре всеобщего внимания. Знак зодиака должен принять все к сведению и принять нужные решения, не пытаясь исправить их с помощью силовых воздействий. Слабые стороны в новом календаре - это общении с людьми.
  11. Гороскоп на 1 января 2021 года Быка: Водолей мужчина. Знак зодиака ненасытный днем и вечером и, вероятно, хочет слишком многого от женщины. Ваши новые ожидания, как правило, высоки и Водолей может быть легко разочарован. Не то чтобы знак зодиака совсем нерешительный, но просто не путайте щедрость с излишествами.
  12. Астрологический прогноз на 1 января 2021 года Быка: Рыбы мужчина. Чувствуете ли вы стеснение и дискомфорт сегодня днем после праздничной новогодней ночи? Используйте импульс, чтобы наслаждаться личной свободой, которую вы имеете после празднества! Особенно этим утром попытка полюбить женщину должна повысить ваше самочувствие.

Оформление списка CSS квадратиками с цифрами

В этой статье представлено второе решение, которое поможет сделать ваш сайт в 2020 году Крысы красивым и заработать с помощью него достаточно средств. И так вот, как уйти от стандартного вида нумерованного списка и реализовать красоту только средствами CSS и HTML, без картинок. Преимущество данного метода оформления заключается в том, что используется всего один класс: “name” для элемента html - li, и прописываются стили для него. Такая конструкция хорошо облегчает использование списков в самых различных шаблонах для самых разных CMS.

CSS для списка ol чтобы оформить квадратиками:

.kub-list li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #cccccc;
color: #000000;
text-decoration: none;
}

.kub-list li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 30%;
margin-top: -1em;
background: #d0e851;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}

HTML код для красивого оформления списка:

<ol class="kub-list">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<ol>

Как выглядит список на странице сайта покажем с помощью астрологического прогноза

Здесь вы найдете гороскоп 31 декабря 2020 года Крысы на все знаки зодиака для женщин. Что ваш новый гороскоп имеет для вас в этот день? Что вы должны знать сегодня, чтобы быть готовым к завтрашнему дню?

  1. Гороскоп на 31 декабря 2020 года Крысы: Овен женщина. Ваши собратья могут говорить вам сегодня, что вы пересекаете несколько границ одновременно. Не воспринимайте эту критику, как нападение, но учитесь на ней. Изучая, как создавать красивые сайты, примерно такие, как наша стадия “A nam nado” делает в Воронеже, вы должны придерживаться строгих правил и ограничений, но вы также поймете, что у вас все еще есть много свободы, в которой вы можете жить.
  2. Астрологический прогноз на 31 декабря 2020 года Крысы: Телец женщина. Какие жизненные цели особенно важны для вас? Если вы сейчас справляетесь со своим новым жизненным путем, вы можете получить в конце завершения 2020 года Крысы много ясности. Внимательно посмотрите на свою жизнь в декабре! Осознание личной жизни растет, и вы видите, каковы ваши следующие шаги уже в новом году Быка 2021.
  3. Гороскоп на 31 декабря 2020 года: Близнецы женщина. Растущая необходимость выйти за рамки обычного, также имеет свои недостатки. Обратите внимание на то, где вы выпускаете пар и не переусердствуйте в любовных отношениях с мужчинами в конце уходящего года. В противном случае это может иметь неприятные последствия.
  4. Астрологический прогноз на 31 декабря 2020 года: Рак женщина. Большая часть вашей жизни может неожиданно появиться в ином свете. Вещи, которые вы считаете частью своего окружения, внезапно исчезают и создают место для чего-то нового. Чем гибче женщина с мужчиной, тем больше позитива вы испытаете в этот, 31 декабря день. Ваше внутреннее отношение во многом определяет качество вашей жизни.
  5. Гороскоп на 31 декабря 2020 года Лев женщина. Как и все в жизни, слабости имеют две стороны. Во-первых, неудовлетворительно признавать, что одно или другое отсутствует, и что вы не можете достичь или приобрести определенные вещи. С другой стороны, именно понимание границ и недостатков приводит к пониманию других людей с аналогичными трудностями. Попробуйте осознать, что списки на сайте должны быть красиво оформлены простыми стилями CSS и разметкой HTML.
  6. Астрологический прогноз на 31 декабря 2020 года: Дева женщина. Сегодня ваши личные потребности требуют послушания и дисциплины. Так что не пытайтесь быть особенно разумной и эффективной! Что вам нужно в этот день конца 2020 года Крысы перед праздничной ночью, это несколько спокойных часов с мужчиной в знакомой обстановке. Как насчет совместной уборки? Таким образом, вы можете заряжать свои батареи новой энергией.
  7. Скорпион. Растущая необходимость находиться в рамках - обычные дела и также имеет свои преимущества. Обратите внимание, где вы ведете себя недостойно и не хулиганьте. В противном случае это может иметь неприятные последствия. Почитайте учебник по CSS, разберитесь, как делать красивые списки для своего официального сайта сегодня ночью.
  8. Гороскоп на 31 декабря 2020 года Крысы: Весы женщина. С дисциплиной и настойчивостью вы можете многого достичь вечером этого предпраздничного дня. Время особенно благоприятно, чтобы провести его с любовным партнером и отлучиться от сложной работы. Вы особенно успешны сегодня, если знак зодиака Весы выполняет свою работу тщательно, не отвлекаясь от выбранного курса, и идите в новый год весело.
  9. Гороскоп на 31 декабря 2020 года: Стрелец женщина. Этот день уходящего года - отличное время для большой работы. Вы почти готовы принять вызов от любого мужчины. Если вы не направите свою энергию на осмысленный путь по жизни, такие дела, как работа или спортивные результаты, вы будете раздражительно реагировать на любого партнера, кто встает на вашем пути в конце дня 31 декабря. Даже если вы не безжалостная эгоистка, используйте свои преимущества характера правильно.
  10. Астрологический прогноз на 31 декабря 2020 года: Козерог женщина. Сегодня хорошее настроение у знака зодиака Козерог. Куда бы вы ни пришли, вас встретят дружелюбно. В первую очередь это связано с тем, что вы подходите к другим с такой радостью и сочувствием, как к родным. День также очень подходит для встречи с любимым человеком, с которым у вас любовные отношения. Назначьте новую встречу на вечер любимому человеку! Козероги наслаждаются хорошим настроением вместе.
  11. Гороскоп на 31 декабря 2020 года: Водолей женщина. Ваши собратья могут говорить вам сегодня, чтобы вы узнали, как делать красивые списки для своего сайта при помощи CSS и HTML, что вы пересекаете несколько границ слишком быстро. Не воспринимайте эту критику, как учение, но учитесь на ней жить правильно. Вы должны придерживаться рамок и ограничений, но вы также можете понять, что у вас все еще будет много свободы в новом 2021 году Быка, в которой вы можете жить с любовным партнером другого знака зодиака.
  12. Астрологический прогноз на 31 декабря 2020 года: Рыбы женщина. Какие жизненные цели особенно важны для вас в этот день декабря перед новым годом Быка? Если вы сейчас справляетесь со своим жизненной целью, вы можете получить много ясности вечером от мужчины. Внимательно изучите свою старую жизнь! Осознание личной жизни будет расти, и Рыбы увидят, каковы следующие шаги.

Данный урок по оформлению странички был подготовлен специалистами, умеющими брать заказы на создание сайтов в Воронеже. Автор урока пожелал остаться неизвестным, тем более, что достопочтенные блогеры все растащили с сайта автора по социальным сетям, а я им помогаю. Иногда код публикуется нерабочий, потому, что многие даже не понимая ничего в вопросах создания сайта и копируя текст не понимают, что там написано, делают кучу ошибок в синтаксисе и примеры их кода получаются с браком. Этот урок создан был давно, а сегодняшняя дата: 9 апреля 2020 г.

Просмотров было совершенно на данный момент: 5106 раз.

Сегодня 9 апреля 2020 г.