Site icon Vavik96

8 различных способов красиво оформить списки

В последнее время использование HTML-списков ( <ol> для упорядоченного списка, <ul> для неупоряндоченого списка) очень популярно. Сегодня мы заглянем немного дальше, чем создание регулярных списков, показав 8 различных способов красиво оформить списки HTML с CSS. Мы будем использовать приемы на чистом CSS, чтобы сделать скучно выглядящий список интересным (и даже немного более функциональным).
Как напоминание, вот как по умолчанию выглядят упорядоченный и неупорядоченный списки:

 

  1. Нумерованный список, # 1
  2. Нумерованный список, # 2
  3. Нумерованный список, # 3
  • Ненумерованный список, # 1
  • Ненумерованный список, # 2
  • Ненумерованный список, # 3

И проверить демо, чтобы увидеть, что мы собираемся получит в итоге.

Выглядит гораздо лучше, не так ли? И вы получите все это только путем добавления пары CSS свойств. Хотите знать, как? Смотрим.

Список # 1: Простая навигация

 


Наиболее часто списки на веб-странице используют для навигации. В этом примере создадим простую, минималистичную, но красивую структуру навигации.

HTML

<div id="list1">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

CSS

/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-tpo:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }

 

Список # 2: другой шрифт для нумерации

 


Проблема списков в том, что вы не можете сделать их отличающимися от текста. Нумерация списка всегда должна иметь одинаковый цвет и шрифт с текстом.

Но, добавляя дополнительный элемент в list-item , вы можете обойти эти ограничения и создать очень интересный списк. Вот как это сделать:
HTML

<div id="list2">
   <ol>
      <li><p><em>The Netherlands</em> is a country in ...</p></li>
      <li><p><em>The United States of America</em> is a federal constitutional ...</p></li>
      <li><p><em>The Philippines</em> officially known as the Republic ...</p></li>
      <li><p><em>The United Kingdom</em> of Great Britain and ...</p></li>
   </ol>
</div>

CSS

/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1;  }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }

 

Список # 3: Графические стрелки

 


Вы можете изменить стиль маркеров из ненумерованного списка на какое нибудь другое изображение. Этот метод может сделать ваш список еще красивее. Давайте посмотрим, как это делается.

HTML

<div id="list3">
   <ul>
      <li>Java</li>
      <li>.NET</li>
      <li>C++</li>
      <li>PHP</li>
   </ul>
</div>

 

CSS

/* LIST #3 */
#list3 { }
#list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; }
#list3 ul li { line-height:30px; }

 

Список # 4: Список в стиле “iPhone”

 


Этот список похож на Contacts.app стиль, который вы могли видеть на iPhone. Просто немного больше привлекательности для вашего веб-сайта.

 

HTML

<div id="list4">
   <ul>
      <li><a href="#"><strong>Toronto</strong>2004</a></li>
      <li><a href="#"><strong>Beijing</strong>2008</a></li>
      <li><a href="#"><strong>London</strong>2012</a></li>
      <li><a href="#"><strong>Rio de Janeiro</strong>2016</a></li>
   </ul>
</div>

 

CSS

/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
  border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; }
#list4 ul li a strong { margin-right:10px; }

 

Список # 5: Вложенные списки

 


Вложенные списки (списки внутри списков) могут быть чрезвычайно полезным и красивым стилем. Используя третий метод (Графические стрелки), мы можем создать “расширенный список”. Конечно, с помощью JQuery , вы можете сделать это ещё интересней (но мы будем придерживаться только методов CSS).

HTML

<div id="list5">
   <ol>
      <li>Google
         <ol>
            <li>Picasa</li>
            <li>Feedburner</li>
            <li>Youtube</li>
         </ol>
      </li>
      <li>Microsoft
         <ol>
            <li>Corel Corporation</li>
            <li>Zignals</li>
            <li>ByteTaxi</li>
         </ol>
      </li>
      <li>Yahoo!
         <ol>
            <li>Xoopit</li>
            <li>BuzzTracker</li>
            <li>MyBlogLog</li>
         </ol>
      </li>
   </ol>
</div>

 

CSS

/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

 

Список # 6: Римская нумерация + многострочный рядный список

 


По умолчанию, упорядоченный список использует номера (1, 2, 3, 4 и т.д.), как тип стиля списка. Изменяя это значение в CSS, вы можете создать другие системы нумерации, например, римский стиль.

Также по умолчанию, список отображает цифры за пределами элементов (вы можете увидеть это очень хорошо в примере # 2 – другой шрифт для нумерации). Чтобы обойти это, мы должны будем изменить list-style-position , чтобы выводить нумерацию внутри.

 

HTML

<div id="list6">
   <ol>
      <li>Lorem ipsum dolor sit amet, ...<br />Fusce sit amet ...</li>
      <li>Aenean placerat lectus tristique...<br />Vivamus interdum ...</li>
      <li>Mauris eget sapien arcu, vitae...<br />Phasellus neque risus...</li>
      <li>Phasellus feugiat lacus ...<br />Duis rhoncus ...</li>
   </ol>
</div>

 

CSS

/* LIST #6 */
#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }
#list6 ol li { }

 

Список # 7: Разделенный запятыми встроенный список

 


Списки, в основном, используются для отображения количества элементов друг под другом, на другой строке. Но что, если вы захотели список в одну строку? Вы можете добиться этого, установив для display свойство inline . Но когда список расположен в тексте, вы можете предпочесть сделать его с запятыми. Как этого достичь? Используя  псевдо-код :after.

HTML

<div id="list7">
   <ul>
      <li>First inline item</li>
      <li>Second inline item</li>
      <li>Third inline item</li>
      <li class="last">Fourth inline item</li>
   </ul>
</div>

 

CSS

/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }

 

Список # 8:  Навигация с поворотом

 


Вот, напоследок, небольшой метод, который работает с использованием CSS3 (поддерживается в последних версиях Firefox, Safari и Chrome). При наведении, блок элемента поворачивается на определённый угол. Может быть, не очень полезно, но это может быть интересным и украсит ваш сайт.

HTML

<div id="list8">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

 

CSS

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

 

Заключение и пример

Как вы видите, можно создать необыкновенные вещи из обычного списка. И все это с помощью только CSS.

 

See the Pen 8 различных способов красиво оформить списки by vavik (@vavik96) on CodePen.


Источник

Exit mobile version