• Главная»
  • Уроки»
  • CSS»
  • 8 способов сделать списки привлекательными при помощи стилей

8 способов сделать списки привлекательными при помощи стилей

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

А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.

demosourse

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

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

Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.

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-top: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 : Использование различного шрифта при нумерации

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

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-стиль

Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на 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:

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 свойства на inside.

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; }

Заключение

Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.marcofolio.net
Перевел: Максим Шкурупий
Урок создан: 30 Октября 2009
Просмотров: 91975
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^