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