CSS является одним из самых важных строительных блоков современного веб-дизайна.Стандарты требуют использования CSS для форматирования и стилей страниц, и не без оснований.It’ S облегченные и способна на гораздо большее, чем старые методы, такие как tables.

И CSS isn’ т почти так же сложно, как некоторые люди склонны верить.Ниже приведены свежие советы и приемы для создания и укладки элементов дизайна с CSS.They’ Re хорошее место для начала, если you’ новичок в CSS, но являются ценными, даже если you’ ветеран дизайнера.Не все методы строго CSS, а некоторые включают интеграцию с JavaScript или XHTML, чтобы расширить функциональность вашего site.

1.Макет и пользовательский интерфейс Techniques

CSS в настоящее время является основной язык, используемый для создания макетов страниц на современных веб-сайтов.Есть практически безграничные возможности для создания макетов страниц и пользовательских интерфейсов с CSS, но ниже приведены некоторые из наиболее интересных techniques.

Самый простой способ горизонтально и вертикально центра DIV
Эта статья охватывает центрирование DIV как вертикально, так и горизонтально, используя CSS.В то время как многие фрагменты кода, там показано, как сделать это с помощью родителя и ребенка дивы, данный метод использует один DIV и гораздо simpler.

Новый CSS Sticky Footer – 2009
Here’ SA липкой колонтитул техники that’ с полностью кросс-браузерной совместимости.Он даже работает в Google Chrome.И это doesn’ т требуют пустой DIV толчок either.

Простая Page Peel эффектов с JQuery & CSS
Этот урок сочетает в себе JQuery и CSS для создания страницы корки.Большинство сайтов с помощью этого эффекта Flash-приводом, так что это хорошая альтернатива, если you’ повторно не в восторге от использования Flash (или don’ знаю, как).

Равные коробки высотой с CSS
Here’ SA простой пример создания равных высота коробки (искусственный столбцов) с помощью CSS.Он работает аналогично ячеек в таблице, но без грязных столbits.

Адаптация зрения – как они это делают ?
Сдача в аренду пользователям вручную изменить способ вашего сайта появляется может значительно улучшить site’ S удобство использования и вероятность того, что пользователи будут иметь положительный опыт (и приходят снова и снова).Этот учебник покажет вам, как реализовать методы адаптированы для просмотра site.

CSS: All-Расширяемая Box
Here’ SA учебник для создания окна CSS, который будет расширяться во всех направлениях, чтобы соответствовать содержанию, содержащиеся в нем, а не только по вертикали.Это особенно хорошо работает, если пользователь увеличит размер шрифта, но делает всю коробку большего, а не просто сдвигая содержание вокруг и сделать окно больше vertically.

Четыре методы, чтобы создать равные по высоте столбцы
Here’ другая обучающая программа для создания одинаковой высоты колонок в CSS, на этот раз, охватывающий четыре различных методов.Методами покрыты работу во всех основных браузерах (даже IE6)

Вертикальное центрирование с CSS
Это сообщение охватывает целый ряд лучших методов для центрирования CSS элементы вертикально на странице.Он также рассказывает, как создать простой маленькой вертикально ориентированных сайт, используя techniques.

CSS вертикальное центр с помощью поплавка и clear
Here’ другая обучающая программа для создания вертикально ориентированного CSS окна с помощью поплавка и очистить.Она работает даже в IE5 для Mac, только в case.

Cross-Browser Inline-Block
Это руководство описывает, как создать встроенный блок-схема, которая работает с разными уровнями содержания без нарушения layout.

CSS “ Ах-ха ”! Moment
Here’ SA сообщение говорит о “ Ах-ха ”! Момент большинство дизайнеров в какой-то момент в их карьерах, где некоторые жизненно важные немного дизайнзнание вдруг имеет смысл.В этом случае, it’ S отношения CSS коробки в layout.

Indepth покрытия на слои CSS, Z-Index, относительное и абсолютное позиционирование
Эта статья дает всесторонний обзор слоев CSS, относительное и абсолютное позиционирование, и Z-Index свойства.

Недвижимость CSS переполнения
Here’ SA полное краткое изложение того, как различные настройки для работы переполнения собственности CSS.Она включает в себя видимый (по умолчанию), скрытый, прокрутки, и авто, с иллюстрированными примерами each.

абсолютных, относительных, фиксированное позиционирование: чем они отличаются?
различия между абсолютной, относительной и фиксированного позиционирования с CSS может привести к путанице в разы.Эта статья показывает разницу между каждой из них и когда it’ S целесообразно использовать один или другой.

Дисплей: встроенный block
Here’ SA кросс-браузерный (в основном) совместимы метод создания встроенных блоков в различных стилях.Есть некоторые различия, хотя, между вертикальными толкование соответствия между browsers.

2.Навигация и меню Techniques

Хорошая навигация важной частью любого веб-сайта.Хорошая навигация как удобный и дополняет остальные site’ элементы дизайн.Ниже приведены некоторые методы иСоветы по созданию навигации, что делает both.

Создать выпадающее меню с CSS only
полный учебник по созданию на основе CSS выпадающего меню, которые ведут себя как выпадающие списки.It’ SA короткий и простой в реализации method.

Простой масштабируемый CSS на основе панировочных сухарей
Использование крошки на ваш сайт может сделать его проще для ваших посетителей, чтобы перемещаться.И этот урок показывает метод для создания масштабируемых сухарях использованием CSS.

Горизонтальная Sub-NAV с CSS & JQuery
Here’ SA полный учебник по созданию горизонтального меню навигации с помощью чисто CSS (в большинстве случаев, так или иначе).Если вы хотите работать в IE6, you’ понадобятся для реализации некоторых jQuery, тоже.

CSS Шаг Menu
Создание ступенчатого меню (также называемый “ Мастер menu”) может быть сложно, особенно, когда это должно измениться количество шагов, в зависимости от того, что it’ S используется для.Here’ S примере одного с информацией о том, как создать свой own.

вкладками Breadcrumb Navigation
всеобъемлющий учебник по созданию иерархической навигации в формате tabs.

Apple’ Навигация по сайту с использованием только CSS
Этот урок показывает, как создать Apple, как панель навигации с использованием только CSS и HTML(Без изображения).

Карта сайта Celebration
Here’ SA Карта сайта стиля that’ крест-браузер, совместимый (даже обратно в IE5 для Mac) и на основе вложенных lists.

Хорошее меню CSS с кормом иконки читателя list
Создать меню для чтения каналов значки использованием CSS.Он легко может быть адаптирована к другим видам menus.

многоуровневых меню с JQuery и CSS
Here’ SA набор приемов для создания многоуровневых меню в чистом CSS и CSS / JS.В дополнение к основным методам, оно также охватывает более продвинутые и творческие examples.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров