Оригинал.
Я до сих пор помню день, когда открыл тэг li. Это не то, чтобы я не использовал этот тег раньше - я строил хорошие списки с “кнопками”. В тот день я узнал немножко CSS, тэг li стал наиболее мощным и разносторонним тэгом в арсенале веб-дизайнера. Фактически Вы можете построить весь сайт на одних тегах ul li. Конечно, это не будет семантически правильно, но Вы это можете сделать. Эта статья - небольшое руководство и дань волшебному тегу li.
Использование li для горизонтальной навигации
Вы можете использовать неупорядоченный список, чтобы создать горизонтально расположенные кнопочки и другие горизонтальные списки. Для меня было большим шоком, когда я впервые ушел от табличного дизайна к дизайну с CSS. CSS открывает мир возможностей и делает Ваш код прекрасным и легким для чтения. Вот пример пятикнопочной навигационной панельки, сделанной с помощью списка.
<!-- The CSS -->
ul{
margin: 0 auto;
}
ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;
}
<!-- The HTML -->
<ul class="horizontal_list">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>
Вот как должно это выглядеть:
Многоколоночный список с li
Создавать список, который будет на нескольких колонках, легко и просто с помощью li. Скажите пока tr, потому что он больше Вам никогда не понадобится. Когда Вы используете список вместо таблицы, вам будет легче пересортировать содержимое без переноса каждого блока. Вот как это работает:
<!-- Here's the HTML -->
<div id="list_wrapper">
<ul class="multiple_columns">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
<pre>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
}
/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
width: 200px
}
/* The wider this li is, the fewer columns there will be */
ul.multiple_columns li{
text-align: left;
float: left;
list-style: none;
height: 30px;
width: 50px;
}
Вот как это выглядит:
Прикольные эффекты бэкграунда li
Хотите списки с красивыми “кнопочками” вместо обычных черных точек? CSS делает это возможным с некоторыми простыми изменениями свойств бэкграунда вашего li. Например, мы расширим наш код от первого примера.
<!-- Here's the HTML -->
<ul class="cool_background">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
}
ul.cool_background li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 25px;
margin: 5px;
background: url(cool_background.gif) 5px 5px no-repeat;
}
Важно: Не забудьте сделать свой файл “cool_background.gif” и положить его в эту же директорию вашей странички.
Вот как это выглядит:
Анимируем li эффектом rollover
Комбинация li и a тегов и немного CSS могут сделать хороший эффект. Использование CSS, чтобы создать это гораздо быстрее и легче, чем использование javascript. Также это легко поменять в будущем. Вот пример:
<!-- Here's the HTML -->
<ul class="rollover">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Mission</a></li>
</ul>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
}
ul.rollover li{
text-align: left;
float: left;
list-style: none;
}
ul.rollover a{
display: block;
text-decoration: none;
background: url(cool_background.gif) 5px 5px no-repeat;
padding: 3px 10px 3px 25px;
margin: 5px;
}
ul.rollover a:hover{
background-image: url(cool_background2.gif);
text-decoration: none;
}
Важно: Не забудьте сделать свой файл “cool_background.gif” и положить его в эту же директорию вашей странички.
Вот как это будет выглядеть:
Я уверен, что это руководство будет полезно для новичков в CSS. Если Вы CSS ветеран и Вы знаете лучший вариант, чем я написал здесь, пожалуйста, расскажите это в комментариях. Я специально оставил детализированные объяснения в этом руководстве, чтобы это послужило местом старта и дало Вам досаточно кода, чтобы поиграться с li.
Популярность: 25%
RSS комментариев.
29.07.2008 от 
ROM 
RSS Записей 
Поддержи сайт!
