Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » » Красивые нумерованные списки с помощью CSS

Красивые нумерованные списки с помощью CSS

galina2601 16-01-2021, 16:59 570 Уроки по CSS / Списки
На сайте уже есть несколько статей про оформление списков. 
К примеру:
 - анимированный маркер,
 - маркеры в виде картинок,
 - список с вращающимися номерами...

Сегодня покажу еще один красивый нумерованный список с большими числами перед пунктами списка.
Для начала создадим список, каждый пункт которого занимает несколько строк.
<ol>
  <li>Разделение слов в url. Разделять слова в адресе странице необходимо не подчеркиванием, как это делают многие, а дефисом. Url, разделенный дефисами, более легок для чтения и запоминания людьми</li>
  <li>Заголовки должны содержать тег H1. Несмотря на то, что о необходимости использовать тег H1 для написания заголовков страниц существует очень много информации, многие web-мастера продолжают игнорировать эту мелочь.</li>
  <li> Ключевые слова в заголовке страницы. Заголовок страницы должен обязательно содержать ее ключевые слова. В процессе ранжирования документов поисковые системы особое внимание уделяют заголовкам и словам, которые в них содержаться. </li>
</ol>

Зададим необходимые стили:
 ol {
list-style-type: none;
counter-reset: num;
margin: 0 0 0 60px;
padding: 15px 0 5px 0;
font-size: 16px;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
}
ol li:before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0px;
left: -60px;
width: 50px;
color: #ef6780;
text-align: center;
font-size: 40px;
font-weight: bold;
}

Получим вот такой замечательный результат:
  1. Разделение слов в url. Разделять слова в адресе странице необходимо не подчеркиванием, как это делают многие, а дефисом. Url, разделенный дефисами, более легок для чтения и запоминания людьми
  2. Заголовки должны содержать тег H1. Несмотря на то, что о необходимости использовать тег H1 для написания заголовков страниц существует очень много информации, многие web-мастера продолжают игнорировать эту мелочь.
  3. Ключевые слова в заголовке страницы. Заголовок страницы должен обязательно содержать ее ключевые слова. В процессе ранжирования документов поисковые системы особое внимание уделяют заголовкам и словам, которые в них содержаться.

Похожие новости

  • Мелочи в SEO, которые необходимо учитывать
  • Красивый список с помощью CSS
  • Многоуровневые списки с помощью html и css
  • Как сделать красивый маркер в списке
  • Урок 4. Создание списков

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив