<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Сокрытие элементов на CSS.

Сокрытие элементов на CSS.

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

Display

Каждый элемент в html является прямоугольником. Сокрытие элемента с помощью свойства display означает, что этот прямоугольник не генерируется вообще.

Хотя элемент все еще находится в разметке, он не отображается на странице. Никакая часть коробочной модели - область контента, margin, padding, border не появляется на странице и не генерируется.

Любой контент в пределах элемента или его внутренние элементы функционально не существуют. Если это действенный элемент, к примеру, button или a, он не будет работать. Элемент и его контент также игнорируются устройствами чтения с экрана.

.foo {
  display: none;
}

Visibility

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

Несмотря на то, что блочная модель генерируется, использование свойства visibility, чтобы скрыть элемент, похоже на свойство display. Элемент не работает и не читается устройствами чтения с экрана.

.foo {
  visibility: hidden;
}

Opacity

Свойство opacity касается только того, как элемент отображается на странице, а конкретнее - его прозрачности.

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

.foo {
  opacity: 0;
}

Position

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

Существует два способа использования свойства position с другими свойствами, чтобы достичь этого.

Использование свойств left и top, чтобы выдвинуть элемент за пределы области видимости.

.foo {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Или вы можете использовать свойство clip, чтобы уменьшить размер блока до незначительного, тем самым скрыв его.

.foo {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* синтаксис для IE6 и IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Результат использования первого или второго метода будет одинаковым.

Хотя эти решения являются немного "хаками", в настоящее время это лучшее, что можно сделать, чтобы скрыть элемент с области видимости, оставив при этом функционал.

Заключение

  display visibility opacity position
Генерируется ли блочная модель?
Влияет ли блок на макет?
Виден ли элемент?
Будет ли содержимое элемента прочитано устройствами чтения?
Является ли элемент активным?

Источник: http://bitsofco.de/2015/hiding-elements-with-css/

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

minima minima 22.10.2015 05:52:56

Интересно получается) Классно

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.