Банк рефератов содержит более 364 тысяч рефератов, курсовых и дипломных работ, шпаргалок и докладов по различным дисциплинам: истории, психологии, экономике, менеджменту, философии, праву, экологии. А также изложения, сочинения по литературе, отчеты по практике, топики по английскому.
Полнотекстовый поиск
Всего работ:
364150
Теги названий
Разделы
Авиация и космонавтика (304)
Административное право (123)
Арбитражный процесс (23)
Архитектура (113)
Астрология (4)
Астрономия (4814)
Банковское дело (5227)
Безопасность жизнедеятельности (2616)
Биографии (3423)
Биология (4214)
Биология и химия (1518)
Биржевое дело (68)
Ботаника и сельское хоз-во (2836)
Бухгалтерский учет и аудит (8269)
Валютные отношения (50)
Ветеринария (50)
Военная кафедра (762)
ГДЗ (2)
География (5275)
Геодезия (30)
Геология (1222)
Геополитика (43)
Государство и право (20403)
Гражданское право и процесс (465)
Делопроизводство (19)
Деньги и кредит (108)
ЕГЭ (173)
Естествознание (96)
Журналистика (899)
ЗНО (54)
Зоология (34)
Издательское дело и полиграфия (476)
Инвестиции (106)
Иностранный язык (62792)
Информатика (3562)
Информатика, программирование (6444)
Исторические личности (2165)
История (21320)
История техники (766)
Кибернетика (64)
Коммуникации и связь (3145)
Компьютерные науки (60)
Косметология (17)
Краеведение и этнография (588)
Краткое содержание произведений (1000)
Криминалистика (106)
Криминология (48)
Криптология (3)
Кулинария (1167)
Культура и искусство (8485)
Культурология (537)
Литература : зарубежная (2044)
Литература и русский язык (11657)
Логика (532)
Логистика (21)
Маркетинг (7985)
Математика (3721)
Медицина, здоровье (10549)
Медицинские науки (88)
Международное публичное право (58)
Международное частное право (36)
Международные отношения (2257)
Менеджмент (12491)
Металлургия (91)
Москвоведение (797)
Музыка (1338)
Муниципальное право (24)
Налоги, налогообложение (214)
Наука и техника (1141)
Начертательная геометрия (3)
Оккультизм и уфология (8)
Остальные рефераты (21697)
Педагогика (7850)
Политология (3801)
Право (682)
Право, юриспруденция (2881)
Предпринимательство (475)
Прикладные науки (1)
Промышленность, производство (7100)
Психология (8694)
психология, педагогика (4121)
Радиоэлектроника (443)
Реклама (952)
Религия и мифология (2967)
Риторика (23)
Сексология (748)
Социология (4876)
Статистика (95)
Страхование (107)
Строительные науки (7)
Строительство (2004)
Схемотехника (15)
Таможенная система (663)
Теория государства и права (240)
Теория организации (39)
Теплотехника (25)
Технология (624)
Товароведение (16)
Транспорт (2652)
Трудовое право (136)
Туризм (90)
Уголовное право и процесс (406)
Управление (95)
Управленческие науки (24)
Физика (3463)
Физкультура и спорт (4482)
Философия (7216)
Финансовые науки (4592)
Финансы (5386)
Фотография (3)
Химия (2244)
Хозяйственное право (23)
Цифровые устройства (29)
Экологическое право (35)
Экология (4517)
Экономика (20645)
Экономико-математическое моделирование (666)
Экономическая география (119)
Экономическая теория (2573)
Этика (889)
Юриспруденция (288)
Языковедение (148)
Языкознание, филология (1140)

Реферат: CSS Design: Укрощение списков

Название: CSS Design: Укрощение списков
Раздел: Рефераты по информатике, программированию
Тип: реферат Добавлен 12:09:08 21 марта 2007 Похожие работы
Просмотров: 96 Комментариев: 2 Оценило: 1 человек Средний балл: 5 Оценка: неизвестно     Скачать

CSS Design : Укрощение списков

Марк Ньюхаус

Я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляется как простая текстовая строка со ссылками, разделенными тегами <DIV> или <P>. Структурно же они представляют собой списки ссылок, и следовательно должны оформляться как таковые.

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

В данной же статье я покажу, как с помощью CSS можно укротить эти неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.

Готовим арену

В качестве предмета дрессировки я выбрал простые ненумерованные списки. Все упомянутые тут правила CSS можно применить и к нумерованным спискам с тем же результатом. Во всех примерах (кроме специально оговоренных случаев) используется следующий список:

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5 сделаем этот пункт немного длиннее,

чтобы он переходил на следующую строку </li>

</ul>

Каждый список просто помещен внутрь отдельного элемента <DIV>, и поведение списка определяется с помощью этого DIV-а. Базовое правило, действующее на все DIV-ы, таково:

#base {

border: 1pxsolid #000;

margin: 2em;

width: 10em;

padding: 5px;

}

Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Позиционирование

Иногда для вашего дизайна отступ в списке принятый по умолчанию может оказаться слишком большим. Но изменение только свойства margin или padding для элемента <UL> срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что InternetExplorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding. Подробнее об этом читайте в статье ConsistentListIndentation на сайте DevEdge.

В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а <BODY> документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение "1em".

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Маркеры

Скажем, вам понадобился список с особыми маркерами. Как вы поступали раньше? Создавали таблицу, в одной колонке размещали gif-картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах <LI>. Теперь CSS позволяет использовать изображение в качестве маркера. Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай).

Стилевое правило выглядит так:

ul {

list-style-image: url(bullet.gif);

}

А броузер покажет список так:

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Для тех броузеров, которые не поддерживают вывод графики, добавьте в правила следующую строчку:

list-style-type: disc;

Изображения, выбранное вами в качестве маркера, может "выползти" за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока <LI>. Для этого добавьте следующую строку:

list-style-position: inside;

Все три декларации можно объединить в одно краткое правило:

ul {

list-style: disc url(bullet.gif) inside;

}

что эквивалентно

ul {

list-style-type: disc;

list-style-image: url(bullet.gif);

list-style-position: inside;

}

Список в результате будет выглядеть так:

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы <LI> "надвисающими". Всё правило целиком будет выглядеть так:

ul {

list-style: none;

margin-left: 0;

padding-left: 1em;

text-indent: -1em;

}

Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое - значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и "надвисает" над остальным текстом.

Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: ".

» Item 1

» Item 2

» Item 3

» Item 4

» Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента :before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ " или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

#custom-gen ul li:before {

content: "\00BB \0020";

}

Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код \00BB (другой символ \0020 - это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Выстраиваем список в ряд

Кто сказал, что списки должны идти вертикально и оформляться слева маркерами? К примеру вам нужен нумерованный список ссылок, но визуально вы хотите, чтобы этот список на странице выглядел как вертикальная панель навигации. Или скажем, вы хотите, чтобы ссылки располагались горизонтально вдоль верхнего края страницы.

Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно - это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

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

Уже слышу крики: "Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами."

И на это я отвечу: "Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что".

Сначала, вот стилевые правила:

#inline-list {

border: 1px solid #000;

margin: 2em;

width: 80%;

padding: 5px;

font-family: Verdana, sans-serif;

}

#inline-list p {

display: inline;

}

#inline-list ul, #inline-list li {

display: inline;

margin: 0;

padding: 0;

color: #339;

font-weight: bold;

}

Весь код помещен в <div id="inline-list">. В нем находится абзац, потом стандартный список UL, и за ним - еще один абзац. Список UL был отредактирован таким образом, чтобы после каждого пункта была запятая, а за последним пунктом шла точка.

Результат выглядит так (список выделен синим цветом):

A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home from work. It doesn’t really matter, for our purposes we just need some preceding text before the list:

Item 1,

Item 2,

Item 3,

Item 4,

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку.

And then there is the text that follows the list in the paragraph. Oneortwosentencesissufficientfortheexample.

Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:

#inline-list-genulli:after {

content: ", ";

}

#inline-list-gen ul li.last:after {

content: ". ";

}

Здесь мы используем псевдо-элемент :after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса class="last". Результат будет таким (помните, он работает только в Opera или Mozilla/Netscape):

A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home from work. It doesn’t really matter, for our purposes we just need some preceding text before the list:

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

And then there is the text that follows the list in the paragraph. Oneortwosentencesissufficientfortheexample.

Навигация

Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.

Вот примеры горизонтальных списков, помещенных в один и тот же базовый DIV со следующими правилами.

#h-contain {

padding: 5px;

border: 1px solid #000;

margin-bottom: 25px;

}

Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.

Границы

Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.

#pipe ul {

margin-left: 0;

padding-left: 0;

display: inline;

}

#pipe ul li {

margin-left: 0;

padding: 3px 15px;

border-left: 1px solid #000;

list-style: none;

display: inline;

}

#pipe ul li.first {

margin-left: 0;

border-left: none;

list-style: none;

display: inline;

}

Мы добавили класс class="first" к первому LI, чтобы у него слева не появлялась ненужная граница.

Item 1

Item 2

Item 3

Item 4

Правила можно изменить, чтобы придать списку вид закладок:

#tabs ul {

margin-left: 0;

padding-left: 0;

display: inline;

}

#tabs ul li {

margin-left: 0;

margin-bottom: 0;

padding: 2px 15px 5px;

border: 1px solid #000;

list-style: none;

display: inline;

}

#tabs ul li.here {

border-bottom: 1px solid #ffc;

list-style: none;

display: inline;

}

Item 1

Item 2

Item 3

Item 4

В данном примере мы добавили класс class="here" к одному из LI, благодаря чему нижняя граница этого пункта списка имеет цвет, совпадающий с фоном. Таким образом в меню мы указываем на текущее положение пользователя на сайте.

Примечание: этот прием был предложен Ренделом Растом (RandalRust), а затем его улучшили подписчики списка рассылки css-discuss

Ссылки-цепочки

Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице - это известные всем нам ссылки-цепочки (breadcrumblinks). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь - весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:

<div id="bread"> <ul> <li class="first">Home <ul> <li>&#187; Products <ul> <li>&#187; Computers <ul> <li>&#187; Software</li> </ul></li> </ul></li> </ul></li> </ul> </div>

в результате получаем:

Home

» Products

» Computers

» Software

Применив следующие правила:

#bread {

color: #ccc;

background-color: #006;

padding: 3px;

margin-bottom: 25px;

}

#bread ul {

margin-left: 0;

padding-left: 0;

display: inline;

border: none;

}

#bread ul li {

margin-left: 0;

padding-left: 2px;

border: none;

list-style: none;

display: inline;

}

получаем вот что:

Home

» Products

» Computers

» Software

И опять-таки символ "»" (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента :before в сочетании с классом class="first", чтобы первый пункт LI не имел этого символа.

#bread-gen ul li:before {

content: "\0020 \0020 \0020 \00BB \0020";

color: #ff9;

}

#bread-gen ul li.first:before {

content: " ";

}

Конечный результат:

Home

Products

Computers

Software

Мир реалий

Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

Home

Hidden Cameras

CCTV Cameras

Employee Theft

Helpful Hints

F.A.Q

About Us

ContactUs

Это меню - фактически ответ на вопрос, заданный Майклом Эффордом (MichaelEfford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

<div id="button">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Hidden Cameras</a></li>

<li><a href="#">CCTV Cameras</a></li>

<li><a href="#">Employee Theft</a></li>

<li><a href="#">Helpful Hints</a></li>

<li><a href="#">F.A.Q</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

#button {

width: 12em;

border-right: 1px solid #000;

padding: 0 0 1em 0;

margin-bottom: 1em;

font-family: 'Trebuchet MS', 'Lucida Grande',

Verdana, Lucida, Geneva, Helvetica,

Arial, sans-serif;

background-color: #90bade;

color: #333;

}

Первое правило - для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в "em"-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.

#buttonul {

list-style: none;

margin: 0;

padding: 0;

border: none;

}

#button li {

border-bottom: 1px solid #90bade;

margin: 0;

}

Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.

#button li a {

display: block;

padding: 5px 5px 5px 0.5em;

border-left: 10px solid #1958b7;

border-right: 10px solid #508fc4;

background-color: #2175bc;

color: #fff;

text-decoration: none;

width: 100%;

}

html>body #button li a {

width: auto;

}

#button li a:hover {

border-left: 10px solid #1c64d1;

border-right: 10px solid #5ba3e0;

background-color: #2586d7;

color: #fff;

}

Наконец, я дошел до ссылок. В исходном дизайне слева и справа были границы по 10 пикселей каждый. Эти границы меняли свой цвет вместе с фоном при наведении мышки. Это поведение довольно просто получить с помощью псевдо-класса :hover, поэтому эффект изменения цвета границ и фона применен к элементам <A>.

Здесь воспользовался одним трюком: чтобы поведение ссылок распространялось на весь блок (по ширине и высоте), я присвоил им правило display: block;. Это сработало во всех броузерах, кроме IE для Windows. Если вы явно укажите ширину в 100%, IE для Windows все поймет. Но при этом вы получаете проблемы в броузерах IE5 для Mac и Netscape/Mozilla. Поэтому я схитрил: с помощью дочернего селектора ">" я присвоил ширине значение "auto". Так как броузер IE для Windows не понимает дочерних селекторов, он игнорирует это правило. IE5 для Mac, Opera и Netscape/Mozilla понимают это правило, и все остались довольными.

Правило для псевдо-класса :hover меняет цвет фона и границ при наведении мышки на ссылку.

Все стилевые правила и список (1 кб кода) заменили примерно 5кб JavaScript-ов и вложенных таблиц, не говоря уже о примерно 8кб графических файлов, использовавшихся для создания эффекта перекатывания. Кроме того разметка стала более читаемой, ее легче обновлять, так как вам не нужно создавать новые картинки, если поменяется название какого-либо меню. Достаточно лишь поменять текст. Окончательный вариант меню вы можете посмотреть на сайте AssetSurveillance.

Вершина айсберга

Хотите верьте, хотите - нет, но мы лишь слегка затронули тему списков и того, что с ними можно вытворять с помощью CSS. Я не утверждаю, что все приемы, изложенные тут, являются верхом совершенства, но я очень надеюсь что данная статья изменит ваше отношение к CSS и привлечет ваше внимание к идее структурной верстки.

Оценить/Добавить комментарий
Имя
Оценка
Комментарии:
Где скачать еще рефератов? Здесь: letsdoit777.blogspot.com
Евгений21:59:44 18 марта 2016
Кто еще хочет зарабатывать от 9000 рублей в день "Чистых Денег"? Узнайте как: business1777.blogspot.com ! Cпециально для студентов!
15:32:51 24 ноября 2015

Работы, похожие на Реферат: CSS Design: Укрощение списков

Назад
Меню
Главная
Рефераты
Благодарности
Опрос
Станете ли вы заказывать работу за деньги, если не найдете ее в Интернете?

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



Результаты(151148)
Комментарии (1843)
Copyright © 2005-2016 BestReferat.ru bestreferat@mail.ru       реклама на сайте

Рейтинг@Mail.ru