Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Сравнение табличной и блочной верстки.

⇐ ПредыдущаяСтр 5 из 5

Достоинства табличной верстки:

1.Удобство и простота работы с ячейками таблицы, используемыми в качестве элементов структуры электронного издания. С помощью таблицы можно достаточно просто создавать несложные структуры. В случае необходимости задания более сложной структуры мы потратим немного больше времени. Но при масштабировании окна браузера колонки сохранят свой исходный вид, а также взаимное расположение. К тому же, независимо от наполнения соседних ячеек, по высоте они останутся одинаковыми.

2.Использование табличной верстки хорошо подходит для создания так называемого «резинового» макета, в котором ширина зависит от ширины окна браузера.

3.В ячейках таблицы мы можем одновременно выравнивать по горизонтали и вертикали.

4.Меньше всего зависит от выбранного пользователем браузера.

Недостатки табличной верстки:

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

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

3.Отсутствует разделение оформления и содержимого.

4.Плохая индексация. Раздробленность информации затрудняет правильное индексирование страницы поисковыми системами.

5.Отсутствие полосы прокрутки (при фреймовой верстве можно прокручивать части).

6.Верстка не соответствует стандартам html и css (таблицы должны быть только для табличных данных).

Достоинства блочной верстки:

1.Сильно уменьшен код html-страниц за счет использования элементов div.

2.Есть возможность нестандартного вложения блоков друг в друга – можно размещать элементы как хотим.

3.Блоки отображаются по мере своей загрузки, что ускоряет работу с электронными изданиями.

4.Лучшая индексация поисковыми системами.

5.Есть возможность расположения нескольких слоев друг над другом, что помогает улучшить индексацию.

6.Возможность использования полосы прокрутки отдельных блоков.

7.С точки зрения моды – данная верстка сейчас самая популярнаяJ

Недостатки блочной верстки:

1.При низком разрешении экрана у монитора пользователя блоки могут поменять свое взаимное расположение.

2.В разных браузерах (старых версий) верстка может выглядеть по-разному.

3.Эта верстка самая сложная.

Блочная фиксированная разметка с помощью CSS.

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

Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.

Существует четыре различных метода позиционирования.

Статическое позиционирование

HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.

Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.

Фиксированное Позиционирование

Элемент с фиксированным положением позиционирован относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Пример:

p.pos_fixed

{

position:fixed;

top:60px;

right:5px;

}

Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.

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

Зафиксированные элементы могут перекрывать другие элементы.

Абсолютное Позиционирование

Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается <html>:

Пример:

{

position:absolute;

left:100px;

top:150px;

}

Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.

Абсолютно расположенные элементы могут перекрывать другие элементы.

Блочная гибкая разметка с помощью CSS.

Относительное позиционирование

Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.

Пример:

h2.pos_left

{

position:relative;

left:-20px;

}

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

Пример:

h2.pos_top

{

position:relative;

top:-50px;

}

Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.

Применение абсолютного позиционирования на странице. Правило z-index.

Абсолютное Позиционирование

Пример

h2 {

position:absolute;

left:100px;

top:150px;}

Абсолютно расположенные элементы могут перекрывать другие элементы.

Свойство z-index указывает вертикальный порядок для элемента.

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

Элемент с большим вертикальным порядком всегда отображается впереди элемента с меньшим вертикальным порядком.

Замечание: z-index работает только для позиционированных элементов (position:absolute, position:relative или position:fixed).

Свойство z-index поддерживается всеми основными браузерами.

Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления!DOCTYPE. IE9 поддерживает "inherit".

Значения Свойства:

Auto: устанавливает вертикальный порядок такой же, как у родительского элемента. Используется по умолчанию

Число: устанавливает значение вертикального порядка элемента. Отрицательные значения допустимы

Inherit: указывает, что вертикальный порядок должен наследоваться от родительского элемента

Применение относительного позиционирования. Создание эффектов объема и тени.

Относительное Позиционирование

Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.

Пример

h2.pos_left {

position:relative;

left:-20px; }

Примерh2.pos_top

{

position:relative;

top:-50px;

}

CSS3 Тень Контейнера

В CSS3, свойство box-shadow используется для добавления тени к контейнерам:

Пример

Добавление тени контейнера к элементу div:

div{

box-shadow: 10px 10px 5px #888888;

-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */}

CSS3 Граница-Изображение

Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:

Свойство border-image позволяет вам указать границу-изображение.

Пример

Использование изображения для создания границы вокруг элемента div:

div{

border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round; /* Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */

-o-border-image:url(border.png) 30 30 round; /* Opera */}

Новые Свойства:

border-image: Стенографическое свойство для установки всех свойств группы border-image-* 3

border-radius: Стенографическое свойство для установки всех четырех свойств border-*-radius 3

box-shadow: Присоединяет один или более эффектов отбрасывания тени к контейнеру

⇐ Предыдущая 1 2 3 45

Читайте также:

Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров

Последнее изменение этой страницы: 2016-08-26; просмотров: 173; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.133.109.30 (0.013 с.)