megascript.ucoz.org - Это качественный архив материалов и современных загрузок по теме всё для Ucoz. На сайте вы найдёте множество скриптов, шаблонов для uCoz.
Меню
Облако тегов
кино онлайн Смотреть онлайн online Американский Пирог архив хаарп Иконки скачать с сервера 2010 кино анимация как установить шаблон на ucoz Quantum of Solace супер качество Download снежные псы снежный гонщик на телефон баги hd качество скрипт часы супер Скотт Пилигрим против всех Bienvenue chez les Ch'tis Скачать шаблон рип футурама 6 сезон Сезон 6 футурамы 1 серия сайт советую Сезон 1 футурамы 1 сезон укоз Сезон 2 футурамы 2 сезон 2 серия 3 серия Онлайн 4 серия статистика 5 серия Ucoz 6 серия новости 7 серия 8 серия новые серии 9 серия 10 серия бесплатно скрипты накрутка скачать бесплатно новый с сервера futurama s1e8 бест юкоз форум 13 серия вконтакте нью для тебя облако тегов в контакте вконтакт ВК как уроки фотошопа для ucoz без смс Need For Speed java jar авто переход на новый сайт jad новый вид quote и code скрипт на ucoz Жалоба на материал (отправка на фор срипт статистики ucoz Мини чат для uCoz уроки css free для на Script прямую ссылку вейлер ВИДЕО смотреть 50 раз Похожие материалы для каталога файл megascript.net.ru Скрипт мини-чата для uCoz
» Оформление списков с помощью одного пикселя


В сегодняшнем уроке будет рассказано, как с помощью 1 пикселя преобразить любой список.

Однопиксельный фон способен многое изменить. К примеру с помощью repeat-x он может стать горизонтальной линией, с помощью repeat-y - вертикальной, repeat - полностью заполнит вашу страницу одним цветом.

Мы будем использовать тот самый пиксель для красивого оформления неупорядоченных списков.


Code
Код HTML очень прост - только неупорядоченный список:
<ul id="project-list">
<li><a href="#">Civil Engineering</a>
<ul>
<li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
<li><a href="#">Culver’s Home Office</a></li>
<li><a href="#">First Addition to Highland Addition</a></li>
<li><a href="#">Fox Point Apartments</a>
<ul>
<li><a href="#">East Side</a></li>
<li><a href="#">West Side</a></li>
</ul>
</li>
<li><a href="#">Metropolitan Place Phase II</a></li>
<li><a href="#">Oak Park Place of Baraboo</a></li>
<li><a href="#">Premier Coop</a></li>
<li><a href="#">Sleep Inn & Suites</a></li>
<li><a href="#">Tradewinds Business Center</a></li>
<li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
</ul>
</li>
<li><a href="#">Environmental Engineering</a></li>
<li><a href="#">Telecommunications Engineering</a>
<ul>
<li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
<li><a href="#">Oakland County/Radian Communications Michigan</a></li>
<li><a href="#">T-Mobile Site Deployment</a></li>
<li><a href="#">U.S. Cellular Network Development</a></li>
<li><a href="#">Western Wireless South Dakota</a></li>
</ul>
</li>
</ul>

В CSS мы будем применять однопиксельное PNG изображение к списку, повторяя вертикально, и к элементам списка, повторяя горизонтально. Чтобы горизонтальная линия останавливалась перед элементом списка, якорю ссылки мы присваиваем белый фон.
Code
<style type="text/css">
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 16px Georgia, serif; }
a { text-decoration: none; }
ul { list-style: none; }
#page-wrap { width: 500px; margin: 0 auto; }
#project-list {
background:transparent url(images/graypixel.png) repeat-y scroll 15px 0;
width:340px;
}
#project-list li {
font-size:16px;
margin:15px 0 20px;
padding:0 0 0 10px;
}
#project-list li a {
background:white none repeat scroll 0 0;
color:#1F6DD9;
display:block;

padding:3px;
}
#project-list li a:hover {
color:#84B8FF;
}
#project-list li ul li {
background:transparent url(images/graypixel.png) repeat-x scroll 0 8px;
font-size:13px;
margin:4px 0 4px 5px;
padding:0 0 0 20px;
}
#project-list li ul li a {
padding:0 0 0 3px;
}
#project-list li ul li ul {
background:transparent url(images/graypixel.png) repeat-y scroll 15px 0;
margin-bottom:10px;
}
#project-list li ul li ul li {
margin-left:16px;
padding-left:10px;
}
</style>





HTML
BB-Code
Ссылка


Категория: Уроки CSS | Добавил: OZU (27.08.2010)
Просмотров: 915 | Теги: Оформление списков с помощью одного | Рейтинг: 0.0/0

Поиск по сайту
Категории фильмов
Футурама
Игры
Реклама
Партнеры
  • GuitarHero.at.ua - Gtp для Твоей гитары
  • Геймерский портал ПК игр
  • twwk-fun.3dn.ru - Фан портал игры "третий Мир Война Королей"
  • pczone.ucoz.org - Все для Тебя и Твоего ПК
  • Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
         
    V1T.RU