🗊Презентация Tег DIV и SPAN. CSS. (Тема 9)

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Tег DIV и SPAN. CSS. (Тема 9), слайд №1Tег DIV и SPAN. CSS. (Тема 9), слайд №2Tег DIV и SPAN. CSS. (Тема 9), слайд №3Tег DIV и SPAN. CSS. (Тема 9), слайд №4Tег DIV и SPAN. CSS. (Тема 9), слайд №5Tег DIV и SPAN. CSS. (Тема 9), слайд №6Tег DIV и SPAN. CSS. (Тема 9), слайд №7Tег DIV и SPAN. CSS. (Тема 9), слайд №8Tег DIV и SPAN. CSS. (Тема 9), слайд №9Tег DIV и SPAN. CSS. (Тема 9), слайд №10Tег DIV и SPAN. CSS. (Тема 9), слайд №11Tег DIV и SPAN. CSS. (Тема 9), слайд №12Tег DIV и SPAN. CSS. (Тема 9), слайд №13Tег DIV и SPAN. CSS. (Тема 9), слайд №14Tег DIV и SPAN. CSS. (Тема 9), слайд №15Tег DIV и SPAN. CSS. (Тема 9), слайд №16Tег DIV и SPAN. CSS. (Тема 9), слайд №17Tег DIV и SPAN. CSS. (Тема 9), слайд №18Tег DIV и SPAN. CSS. (Тема 9), слайд №19Tег DIV и SPAN. CSS. (Тема 9), слайд №20Tег DIV и SPAN. CSS. (Тема 9), слайд №21Tег DIV и SPAN. CSS. (Тема 9), слайд №22Tег DIV и SPAN. CSS. (Тема 9), слайд №23Tег DIV и SPAN. CSS. (Тема 9), слайд №24Tег DIV и SPAN. CSS. (Тема 9), слайд №25Tег DIV и SPAN. CSS. (Тема 9), слайд №26Tег DIV и SPAN. CSS. (Тема 9), слайд №27Tег DIV и SPAN. CSS. (Тема 9), слайд №28Tег DIV и SPAN. CSS. (Тема 9), слайд №29Tег DIV и SPAN. CSS. (Тема 9), слайд №30Tег DIV и SPAN. CSS. (Тема 9), слайд №31Tег DIV и SPAN. CSS. (Тема 9), слайд №32Tег DIV и SPAN. CSS. (Тема 9), слайд №33Tег DIV и SPAN. CSS. (Тема 9), слайд №34Tег DIV и SPAN. CSS. (Тема 9), слайд №35Tег DIV и SPAN. CSS. (Тема 9), слайд №36Tег DIV и SPAN. CSS. (Тема 9), слайд №37Tег DIV и SPAN. CSS. (Тема 9), слайд №38Tег DIV и SPAN. CSS. (Тема 9), слайд №39Tег DIV и SPAN. CSS. (Тема 9), слайд №40Tег DIV и SPAN. CSS. (Тема 9), слайд №41Tег DIV и SPAN. CSS. (Тема 9), слайд №42Tег DIV и SPAN. CSS. (Тема 9), слайд №43Tег DIV и SPAN. CSS. (Тема 9), слайд №44Tег DIV и SPAN. CSS. (Тема 9), слайд №45Tег DIV и SPAN. CSS. (Тема 9), слайд №46Tег DIV и SPAN. CSS. (Тема 9), слайд №47Tег DIV и SPAN. CSS. (Тема 9), слайд №48Tег DIV и SPAN. CSS. (Тема 9), слайд №49Tег DIV и SPAN. CSS. (Тема 9), слайд №50Tег DIV и SPAN. CSS. (Тема 9), слайд №51Tег DIV и SPAN. CSS. (Тема 9), слайд №52Tег DIV и SPAN. CSS. (Тема 9), слайд №53Tег DIV и SPAN. CSS. (Тема 9), слайд №54Tег DIV и SPAN. CSS. (Тема 9), слайд №55Tег DIV и SPAN. CSS. (Тема 9), слайд №56Tег DIV и SPAN. CSS. (Тема 9), слайд №57Tег DIV и SPAN. CSS. (Тема 9), слайд №58Tег DIV и SPAN. CSS. (Тема 9), слайд №59Tег DIV и SPAN. CSS. (Тема 9), слайд №60Tег DIV и SPAN. CSS. (Тема 9), слайд №61Tег DIV и SPAN. CSS. (Тема 9), слайд №62Tег DIV и SPAN. CSS. (Тема 9), слайд №63Tег DIV и SPAN. CSS. (Тема 9), слайд №64Tег DIV и SPAN. CSS. (Тема 9), слайд №65Tег DIV и SPAN. CSS. (Тема 9), слайд №66Tег DIV и SPAN. CSS. (Тема 9), слайд №67Tег DIV и SPAN. CSS. (Тема 9), слайд №68Tег DIV и SPAN. CSS. (Тема 9), слайд №69
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Tег DIV и SPAN. CSS. (Тема 9). Доклад-сообщение содержит 69 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Tema 9. Tег DIV и SPAN. CSS. Продолжение
Описание слайда:
Tema 9. Tег DIV и SPAN. CSS. Продолжение

Слайд 2


СОДЕРЖАНИЕ Теги DIV и SPAN Свойства и значения CSS Вёрстка сайта с использованием тега DIV Новые теги для верстки в HTML5 Примеры
Описание слайда:
СОДЕРЖАНИЕ Теги DIV и SPAN Свойства и значения CSS Вёрстка сайта с использованием тега DIV Новые теги для верстки в HTML5 Примеры

Слайд 3


ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN» Теги <div> и <span>, обычно не используются, в одиночку, имея особенные эффекты если они используются в комбинации с другими HTML-тегами и стилями CSS Тег DIV создает разделы блоков на странице, формой и графикой, которых можно управлять по отдельности Тег DIV имеет атрибут align (для выравнивания по горизонтали), который не поддерживается HTML5 Тег SPAN создает возможность изменения части контекста (in-line); может быть использован в качестве "класса" с CSS Оба тега могут использовать глобальный атрибут style или id или class
Описание слайда:
ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN» Теги <div> и <span>, обычно не используются, в одиночку, имея особенные эффекты если они используются в комбинации с другими HTML-тегами и стилями CSS Тег DIV создает разделы блоков на странице, формой и графикой, которых можно управлять по отдельности Тег DIV имеет атрибут align (для выравнивания по горизонтали), который не поддерживается HTML5 Тег SPAN создает возможность изменения части контекста (in-line); может быть использован в качестве "класса" с CSS Оба тега могут использовать глобальный атрибут style или id или class

Слайд 4


ТЕГ „DIV” В последнее время, один из самых используемых HTML-тегов Поддерживается всеми браузерами Используется для группировки HTML-элементов В тег DIV- можно включить любые HTML элементы: таблицы, списки, формы, параграфы текста или другие DIV-ы Кадр в котором включен DIV может иметь собственный фон (background), ширину, высоту, края с различными линиями и т.д. Синтаксис: <div>содержимое</div>
Описание слайда:
ТЕГ „DIV” В последнее время, один из самых используемых HTML-тегов Поддерживается всеми браузерами Используется для группировки HTML-элементов В тег DIV- можно включить любые HTML элементы: таблицы, списки, формы, параграфы текста или другие DIV-ы Кадр в котором включен DIV может иметь собственный фон (background), ширину, высоту, края с различными линиями и т.д. Синтаксис: <div>содержимое</div>

Слайд 5


ПРИМЕР ИСПОЛЬЗОВАНИЯ „DIV” <html> <head><title>Pagina cu sectiuni</title> <link href="stil_exemplu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="cap"><h1>IMAGINI</h1></div> <hr /> <div id="corp"> <img src="pisic.jpg" /> <img src="copil.jpg" /> <img src="pisi.jpg" /> <img src="doiPisi.jpg" /> </div> <hr /> <div id="coada"><h1>Priviti cu placere</h1></div> </body> </html>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ „DIV” <html> <head><title>Pagina cu sectiuni</title> <link href="stil_exemplu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="cap"><h1>IMAGINI</h1></div> <hr /> <div id="corp"> <img src="pisic.jpg" /> <img src="copil.jpg" /> <img src="pisi.jpg" /> <img src="doiPisi.jpg" /> </div> <hr /> <div id="coada"><h1>Priviti cu placere</h1></div> </body> </html>

Слайд 6


ФАЙЛ СО СТИЛЯМИ #cap{ background-color:black; color:white; text-align:center; padding:5px; font-space:5px; font-size:30px; text-shadow: 5px 5px 7px #ffcccc;} #corp{ height:46%; width:100%; padding:5px; float: left; } #coada{ background-color:black; color:white; text-align:center; padding:5px; font-variant:small-caps; text-shadow: 3px 3px 5px #ffcccc;} img{ border: 2px solid #aa0000; height: 200px; width: 235px;}
Описание слайда:
ФАЙЛ СО СТИЛЯМИ #cap{ background-color:black; color:white; text-align:center; padding:5px; font-space:5px; font-size:30px; text-shadow: 5px 5px 7px #ffcccc;} #corp{ height:46%; width:100%; padding:5px; float: left; } #coada{ background-color:black; color:white; text-align:center; padding:5px; font-variant:small-caps; text-shadow: 3px 3px 5px #ffcccc;} img{ border: 2px solid #aa0000; height: 200px; width: 235px;}

Слайд 7


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 8


ТЕГ „SPAN” Тег <span> может добавить графические стили определенной части какого-то элемента (in-line) Слова которые необходимо выделить включаются между <span> и </span> Основная форма: <span>содержание</span> В файле со стилями определяются необходимые стили Пример: span{color:#ff0000;} Применяются к следующим кодам: … <div id="coada"> <h1>Priviti cu <span>placere</span></h1> </div>…
Описание слайда:
ТЕГ „SPAN” Тег <span> может добавить графические стили определенной части какого-то элемента (in-line) Слова которые необходимо выделить включаются между <span> и </span> Основная форма: <span>содержание</span> В файле со стилями определяются необходимые стили Пример: span{color:#ff0000;} Применяются к следующим кодам: … <div id="coada"> <h1>Priviti cu <span>placere</span></h1> </div>…

Слайд 9


ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВ Порядок отображения элементов на странице называется потоком документа – нормальный поток документа Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз Строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку
Описание слайда:
ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВ Порядок отображения элементов на странице называется потоком документа – нормальный поток документа Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз Строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку

Слайд 10


СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВ Свойства CSS используемые для размещения позволяют контролировать местоположение элементов на странице Существует возможность размещения какого-то элемента позади другого, или указать как вывести какой-либо элемент, который имеет большое содержание Элементы могут быть расположены с использованием свойств: top, bottom, left и right Эти свойства не будут функциональными если свойство position не будет установлена первой Имеет значение метод определения местоположения. Существуют четыре различных способа позиционирования HTML-элементов
Описание слайда:
СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВ Свойства CSS используемые для размещения позволяют контролировать местоположение элементов на странице Существует возможность размещения какого-то элемента позади другого, или указать как вывести какой-либо элемент, который имеет большое содержание Элементы могут быть расположены с использованием свойств: top, bottom, left и right Эти свойства не будут функциональными если свойство position не будет установлена первой Имеет значение метод определения местоположения. Существуют четыре различных способа позиционирования HTML-элементов

Слайд 11


I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ position: static Все HTML-элементы расположены статически по умолчанию Статически расположенный элемент, постоянно располагается с учётом нормального потока на странице Статически расположенные элементы не будут затронуты свойствами top, bottom, left и right
Описание слайда:
I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ position: static Все HTML-элементы расположены статически по умолчанию Статически расположенный элемент, постоянно располагается с учётом нормального потока на странице Статически расположенные элементы не будут затронуты свойствами top, bottom, left и right

Слайд 12


II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ position: fixed Элемент с фиксированной позицией будет расположен в отношении с окном браузера Данный элемент не будет передвигаться даже если окно прокручивается Зафиксированные элементы не учитывают нормального потока вывода на странице – не имеет значение какие другие элементы существуют на странице Элементы с фиксированной позицией могут накладываться на другие элементы
Описание слайда:
II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ position: fixed Элемент с фиксированной позицией будет расположен в отношении с окном браузера Данный элемент не будет передвигаться даже если окно прокручивается Зафиксированные элементы не учитывают нормального потока вывода на странице – не имеет значение какие другие элементы существуют на странице Элементы с фиксированной позицией могут накладываться на другие элементы

Слайд 13


ПРИМЕР „position: fixed” <html> <head><title>Pozitii elemente</title> <style> div.fix { width:250px; position: fixed; top: 20px; right:20px;} p{color:brown; font-size:20px;} </style></head> <body> <img src="labute.jpg" alt="Despre labutele pisicilor" /> <div class="fix"><p>Folosindu-se de vazul remarcabil …spre pisici.</p> </div> </body></html>
Описание слайда:
ПРИМЕР „position: fixed” <html> <head><title>Pozitii elemente</title> <style> div.fix { width:250px; position: fixed; top: 20px; right:20px;} p{color:brown; font-size:20px;} </style></head> <body> <img src="labute.jpg" alt="Despre labutele pisicilor" /> <div class="fix"><p>Folosindu-se de vazul remarcabil …spre pisici.</p> </div> </body></html>

Слайд 14


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 15


…после прокрутки
Описание слайда:
…после прокрутки

Слайд 16


ПРИМЕР НАКЛАДКИ div.fix {width:450px;position: fixed; top: 20px; right:20px; } Другой пример
Описание слайда:
ПРИМЕР НАКЛАДКИ div.fix {width:450px;position: fixed; top: 20px; right:20px; } Другой пример

Слайд 17


III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ position: relative Элемент расположенный относительно, позиционируется относительно его нормального положения Содержимое относительно-позиционируемых элементов может быть перемещено и может перекрывать другие элементы, но пространство, отведенное для элемента в нормальном потоке, сохраняется Элементы, расположенные относительно, часто используются в качестве блочных контейнеров для абсолютно позиционируемых элементов
Описание слайда:
III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ position: relative Элемент расположенный относительно, позиционируется относительно его нормального положения Содержимое относительно-позиционируемых элементов может быть перемещено и может перекрывать другие элементы, но пространство, отведенное для элемента в нормальном потоке, сохраняется Элементы, расположенные относительно, часто используются в качестве блочных контейнеров для абсолютно позиционируемых элементов

Слайд 18


ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: -20px;}
Описание слайда:
ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: -20px;}

Слайд 19


ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: 50px; top:-50px;}
Описание слайда:
ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: 50px; top:-50px;}

Слайд 20


IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ position: absolute Абсолютно-расположенный элемент позиционируется относительно первого (родительского) основного элемента, имеющий другой тип позиционирования, чем статическое Если нет такого элемента, блок будет позиционироваться по отношению к тегу <HTML> Элементы, абсолютно-расположенные, удаляются из нормального потока. Документ и другие элементы ведут себя по отношению к абсолютно- позиционированному элементу как к не существующему Элементы, абсолютно-расположенные, могут перекрыть другие элементы
Описание слайда:
IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ position: absolute Абсолютно-расположенный элемент позиционируется относительно первого (родительского) основного элемента, имеющий другой тип позиционирования, чем статическое Если нет такого элемента, блок будет позиционироваться по отношению к тегу <HTML> Элементы, абсолютно-расположенные, удаляются из нормального потока. Документ и другие элементы ведут себя по отношению к абсолютно- позиционированному элементу как к не существующему Элементы, абсолютно-расположенные, могут перекрыть другие элементы

Слайд 21


ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ
Описание слайда:
ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ

Слайд 22


АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ По умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну браузера. Однако, систему координат можно изменить Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование, то элемент будет позиционироваться относительно этого родителя. Если среди родителей несколько относительно позиционированных элементов, то «абсолютный» элемент будет позиционироваться относительно ближайшего из них
Описание слайда:
АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ По умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну браузера. Однако, систему координат можно изменить Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование, то элемент будет позиционироваться относительно этого родителя. Если среди родителей несколько относительно позиционированных элементов, то «абсолютный» элемент будет позиционироваться относительно ближайшего из них

Слайд 23


СТИЛИ, блок позиционированный абсолютно body { margin: 10px; padding: 20px; color: white; border: 1px dotted #999; } .block-1 { min-height: 100px; padding: 10px; background: #3A78A1; } .block-2 { min-height: 100px; padding: 10px; background: #27AE60; } .block-absolute { position: absolute; top: 10px; right: 10px; padding: 10px; font-family: "Courier New", monospace; font-size: 12px; background: #E74C3C; opacity: 0.8; } Rezultat:
Описание слайда:
СТИЛИ, блок позиционированный абсолютно body { margin: 10px; padding: 20px; color: white; border: 1px dotted #999; } .block-1 { min-height: 100px; padding: 10px; background: #3A78A1; } .block-2 { min-height: 100px; padding: 10px; background: #27AE60; } .block-absolute { position: absolute; top: 10px; right: 10px; padding: 10px; font-family: "Courier New", monospace; font-size: 12px; background: #E74C3C; opacity: 0.8; } Rezultat:

Слайд 24


БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно “body”
Описание слайда:
БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно “body”

Слайд 25


БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного блока Если добавить: position: relative; другому блоку: .block-1 { min-height: 100px; padding: 10px; background: #3A78A1; position: relative; }
Описание слайда:
БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного блока Если добавить: position: relative; другому блоку: .block-1 { min-height: 100px; padding: 10px; background: #3A78A1; position: relative; }

Слайд 26


ПРИМЕНЕНИЕ На практике абсолютное позиционирование часто применяют в декоративных целях, когда нужно аккуратно разместить какие-либо иконки, управляющие элементы или другие «рюшечки»
Описание слайда:
ПРИМЕНЕНИЕ На практике абсолютное позиционирование часто применяют в декоративных целях, когда нужно аккуратно разместить какие-либо иконки, управляющие элементы или другие «рюшечки»

Слайд 27


ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ Когда элементы расположены вне нормального потока (position: absolute, relative, fixed) они могут перекрывать другие элементы Свойство «z-index» указывает порядок выявления элемента (элемент который должен быть размещен в передней части, или за другими элементами) Элемент может иметь положительный или отрицательный порядок в стеке Элемент с наибольшем порядке в стеке всегда будет расположен перед элементом с более низким порядком Свойство «z-index» применимо только для элементов расположенных абсолютно, относительно или фиксировано
Описание слайда:
ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ Когда элементы расположены вне нормального потока (position: absolute, relative, fixed) они могут перекрывать другие элементы Свойство «z-index» указывает порядок выявления элемента (элемент который должен быть размещен в передней части, или за другими элементами) Элемент может иметь положительный или отрицательный порядок в стеке Элемент с наибольшем порядке в стеке всегда будет расположен перед элементом с более низким порядком Свойство «z-index» применимо только для элементов расположенных абсолютно, относительно или фиксировано

Слайд 28


ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ div.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: -1;}
Описание слайда:
ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ div.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: -1;}

Слайд 29


ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ div.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: 1;}
Описание слайда:
ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ div.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: 1;}

Слайд 30


ПРИМЕНЕНИЕ C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем больше z-index, тем выше располагается блок Cвойство z-index работает для элементов, у которых position задано как absolute, fixed и relative Таким образом, «относительный» элемент может перекрывать «абсолютный»
Описание слайда:
ПРИМЕНЕНИЕ C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем больше z-index, тем выше располагается блок Cвойство z-index работает для элементов, у которых position задано как absolute, fixed и relative Таким образом, «относительный» элемент может перекрывать «абсолютный»

Слайд 31


СВОЙСТВО „FLOAT” CSS свойство „float” определяет, как можно сдвинуть элемент (плавающий) влево или вправо, то что позволит другим элементам его окружить Свойство „float” часто используется когда вставляются изображения, но так же применяется, и при верстке web-страницы Элементы „плавают” горизонтально, то что означает что любой элемент можно «сдвинуть» в левую сторону или в правую, но никак нельзя сдвинуть вверх или вниз Элементы следующие за «плавающем» элементом окружат его Элементы перед «плавающем» элементом не будут никак затронуты
Описание слайда:
СВОЙСТВО „FLOAT” CSS свойство „float” определяет, как можно сдвинуть элемент (плавающий) влево или вправо, то что позволит другим элементам его окружить Свойство „float” часто используется когда вставляются изображения, но так же применяется, и при верстке web-страницы Элементы „плавают” горизонтально, то что означает что любой элемент можно «сдвинуть» в левую сторону или в правую, но никак нельзя сдвинуть вверх или вниз Элементы следующие за «плавающем» элементом окружат его Элементы перед «плавающем» элементом не будут никак затронуты

Слайд 32


НЕКОТОРЫЕ ЗНАЧЕНИЯ СВОЙСТВА „FLOAT”
Описание слайда:
НЕКОТОРЫЕ ЗНАЧЕНИЯ СВОЙСТВА „FLOAT”

Слайд 33


ПРИМЕР СО СВОЙСТВОМ „FLOAT” img{ border: 2px solid #aa0000; height: 110px; width: 155px; float: left;} Применяется к следующему элементу: <div id="corp"> <img src="pisic.jpg" /> <img src="copil.jpg" /> <img src="pisi.jpg" /> <img src="doiPisi.jpg" /> </div>
Описание слайда:
ПРИМЕР СО СВОЙСТВОМ „FLOAT” img{ border: 2px solid #aa0000; height: 110px; width: 155px; float: left;} Применяется к следующему элементу: <div id="corp"> <img src="pisic.jpg" /> <img src="copil.jpg" /> <img src="pisi.jpg" /> <img src="doiPisi.jpg" /> </div>

Слайд 34


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 35


Другой пример применения свойства „float”
Описание слайда:
Другой пример применения свойства „float”

Слайд 36


Стили для блоков html, body{margin:0; padding:0; } body{ width:400px; height:300px; } .container{ width:300px; margin:0 auto; padding-top:5px; } .container div{ margin-right:5px; margin-bottom:5px; } .block1{ float:left; width:70px; height:220px; background:#3498db;} .block2{ float:right; width:220px; height:70px; background:#3498db; } .block3{ height:70px; width:70px; background:#8e44ad; } .block4{ float:left; width:70px; height:145px; background:#e74c3c; } .block5{ float:right; width:70px; height:145px; background:#e74c3c; } .block6{ float:right; width:70px; height:70px; background:#f1c40f; } .block7{ float:right; width:145px; height:70px; background:#2ecc71; } .block8{ float:left; width:145px; height:70px; background:#2ecc71; }
Описание слайда:
Стили для блоков html, body{margin:0; padding:0; } body{ width:400px; height:300px; } .container{ width:300px; margin:0 auto; padding-top:5px; } .container div{ margin-right:5px; margin-bottom:5px; } .block1{ float:left; width:70px; height:220px; background:#3498db;} .block2{ float:right; width:220px; height:70px; background:#3498db; } .block3{ height:70px; width:70px; background:#8e44ad; } .block4{ float:left; width:70px; height:145px; background:#e74c3c; } .block5{ float:right; width:70px; height:145px; background:#e74c3c; } .block6{ float:right; width:70px; height:70px; background:#f1c40f; } .block7{ float:right; width:145px; height:70px; background:#2ecc71; } .block8{ float:left; width:145px; height:70px; background:#2ecc71; }

Слайд 37


СВОЙСТВО CLEAR Свойство clear запрещает обтекание элемента другими элементами. Его значения: left — запрещено обтекание слева right — запрещено обтекание справа both — запрещено обтекание с обеих сторон none — обтекание разрешено Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный Свойство clear учит блочные элементы «видеть» «плавающие» элементы
Описание слайда:
СВОЙСТВО CLEAR Свойство clear запрещает обтекание элемента другими элементами. Его значения: left — запрещено обтекание слева right — запрещено обтекание справа both — запрещено обтекание с обеих сторон none — обтекание разрешено Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный Свойство clear учит блочные элементы «видеть» «плавающие» элементы

Слайд 38


ПРИМЕР ПРИМЕНЕНИЯ „CLEAR” .fara_clear { float: left; width: 32px; height: 32px; margin: 10px; border: 3px solid #73AD21; } .text1 { border: 1px solid red; } .cu_clear { float: left; width: 32px; height: 32px; margin: 10px; border: 3px solid #73AD21; } .text2 { border: 1px solid red; clear: left; }
Описание слайда:
ПРИМЕР ПРИМЕНЕНИЯ „CLEAR” .fara_clear { float: left; width: 32px; height: 32px; margin: 10px; border: 3px solid #73AD21; } .text1 { border: 1px solid red; } .cu_clear { float: left; width: 32px; height: 32px; margin: 10px; border: 3px solid #73AD21; } .text2 { border: 1px solid red; clear: left; }

Слайд 39


РЕЗУЛЬТАТ
Описание слайда:
РЕЗУЛЬТАТ

Слайд 40


СВОЙТВА КРАЙОВ ЭЛЕМЕНТА Края элемента (или внешние поля) означают пространство вокруг элемента (кроме границ) Край может быть определен для каждой части в отдельности Пример: margin-top: 50px; margin-bottom: 70px; margin-right: 10px; margin-left: 50px;} Или можно использовать сокращенную форму: Пример: margin: 25px 50px 75px 100px; (сверху - 25, справа – 50, в низу – 75, слева - 100) margin: 25px 50px 75px; (сверху – 25, справа – 50, снизу – 75) margin: 25px 50px; или margin: 25px;
Описание слайда:
СВОЙТВА КРАЙОВ ЭЛЕМЕНТА Края элемента (или внешние поля) означают пространство вокруг элемента (кроме границ) Край может быть определен для каждой части в отдельности Пример: margin-top: 50px; margin-bottom: 70px; margin-right: 10px; margin-left: 50px;} Или можно использовать сокращенную форму: Пример: margin: 25px 50px 75px 100px; (сверху - 25, справа – 50, в низу – 75, слева - 100) margin: 25px 50px 75px; (сверху – 25, справа – 50, снизу – 75) margin: 25px 50px; или margin: 25px;

Слайд 41


ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ Блок элементов, группированных при помощи DIV-а, могут быть выравнены по центру установив значение „auto” для свойства „margin” (внимательное использование в IE8-) Пример: div.imagine{ margin-left: auto; margin-right: auto; width: 50%; }
Описание слайда:
ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ Блок элементов, группированных при помощи DIV-а, могут быть выравнены по центру установив значение „auto” для свойства „margin” (внимательное использование в IE8-) Пример: div.imagine{ margin-left: auto; margin-right: auto; width: 50%; }

Слайд 42


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 43


ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ Другой подход для выравнивания блока элементов это использование свойства «position» со значением „absolute” (по центру) div.imagine{ position: absolute; left: 25%; width: 50%; } Другой метод – использование свойства „float” (выравнивание по правой стороне) div.imagine{ float: right; width: 50%; }
Описание слайда:
ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ Другой подход для выравнивания блока элементов это использование свойства «position» со значением „absolute” (по центру) div.imagine{ position: absolute; left: 25%; width: 50%; } Другой метод – использование свойства „float” (выравнивание по правой стороне) div.imagine{ float: right; width: 50%; }

Слайд 44


ИЗОБРАЖЕНИЯ-SPRITE Спрайт-изображение это то изображение которое состоит из множества маленьких изображений Иногда в сайте необходимо использовать несколько маленьких изображений, которые можно «извлечь» из одного изображения Используя спрайт-изображения – уменьшается количество запросов на сервер Для доступа к мини-изображению необходимо высчитать ее координаты
Описание слайда:
ИЗОБРАЖЕНИЯ-SPRITE Спрайт-изображение это то изображение которое состоит из множества маленьких изображений Иногда в сайте необходимо использовать несколько маленьких изображений, которые можно «извлечь» из одного изображения Используя спрайт-изображения – уменьшается количество запросов на сервер Для доступа к мини-изображению необходимо высчитать ее координаты

Слайд 45


ПРИМЕР ИСПОЛЬЗОВАНИЯ СПРАЙТОВ
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ СПРАЙТОВ

Слайд 46


Для этой части страницы „Контакты” Я использовала для украшения ниже изложенное изображение
Описание слайда:
Для этой части страницы „Контакты” Я использовала для украшения ниже изложенное изображение

Слайд 47


…а для этой части страницы «Контакты» Я использовала другое спрайт-изображение
Описание слайда:
…а для этой части страницы «Контакты» Я использовала другое спрайт-изображение

Слайд 48


ДЛЯ ПОСЛЕДНЕГО ПРИМЕРА HTML коды: <div class="retele_so"> <div class="retea fb"></div> <div class="retea google"></div> <div class="retea twiter"></div> <div class="retea tube"></div> </div> CSS коды: .retele_so .retea { width: 50px; height: 50px; margin: 0px 5px; float: left; display: inline-block; background: url("social_sprite.jpg") no-repeat 0px 0px; } .retele_so .fb { background-position: -35px -145px;} .retele_so .google {background-position: -215px -145px; } .retele_so .twiter { background-position: -215px -207px; } .retele_so .tube { background-position: -515px -145px; }
Описание слайда:
ДЛЯ ПОСЛЕДНЕГО ПРИМЕРА HTML коды: <div class="retele_so"> <div class="retea fb"></div> <div class="retea google"></div> <div class="retea twiter"></div> <div class="retea tube"></div> </div> CSS коды: .retele_so .retea { width: 50px; height: 50px; margin: 0px 5px; float: left; display: inline-block; background: url("social_sprite.jpg") no-repeat 0px 0px; } .retele_so .fb { background-position: -35px -145px;} .retele_so .google {background-position: -215px -145px; } .retele_so .twiter { background-position: -215px -207px; } .retele_so .tube { background-position: -515px -145px; }

Слайд 49


ОБЬЯСНЕНИЯ Для каждого div-а определяются 2 класса Определяется высота и ширина блока div в который определим фон (тот же класс, retea, для всех 4 div-ов) Для каждого div-а (соответственно для каждого класса) определяются координаты верхней-левой точки мини-изображения Например для первого div-а, с классом fb, -35px – вниз и -145px – на право
Описание слайда:
ОБЬЯСНЕНИЯ Для каждого div-а определяются 2 класса Определяется высота и ширина блока div в который определим фон (тот же класс, retea, для всех 4 div-ов) Для каждого div-а (соответственно для каждого класса) определяются координаты верхней-левой точки мини-изображения Например для первого div-а, с классом fb, -35px – вниз и -145px – на право

Слайд 50


МОДЕЛЬ „КОРОБКИ” В CSS Все HTML-элементы можно считать коробками (box) В CSS, понятие «модель коробки" используется тогда когда необходимо произвести дизайн страницы Данная модель представляет собой коробки выставленные вокруг HTML-элементов с контентом и состоит из: внешних полей, границ, внутренних полей и содержимого
Описание слайда:
МОДЕЛЬ „КОРОБКИ” В CSS Все HTML-элементы можно считать коробками (box) В CSS, понятие «модель коробки" используется тогда когда необходимо произвести дизайн страницы Данная модель представляет собой коробки выставленные вокруг HTML-элементов с контентом и состоит из: внешних полей, границ, внутренних полей и содержимого

Слайд 51


ПРИМЕР
Описание слайда:
ПРИМЕР

Слайд 52


Дополнительно, прочтите "Блочные элементы" [http://htmlbook.ru/content/blochnye-elementy] "Встроенные элементы" [http://htmlbook.ru/content/vstroennye-elementy]
Описание слайда:
Дополнительно, прочтите "Блочные элементы" [http://htmlbook.ru/content/blochnye-elementy] "Встроенные элементы" [http://htmlbook.ru/content/vstroennye-elementy]

Слайд 53


ВЕРСКА САЙТОВ Верстка это процесс преобразования рисунка веб-страницы (например .psd файл) в HTML-документ, используя HTML и CSS При версте веб страниц необходимо соблюдать минимум следующие правила: Результат должен, максимально совпасть с рисунком дизайнера Полученная страница должна адекватно выглядеть во всех браузерах – проверка кросс-платформенности (cross platform) Написать HTML коды отдельно от CSS
Описание слайда:
ВЕРСКА САЙТОВ Верстка это процесс преобразования рисунка веб-страницы (например .psd файл) в HTML-документ, используя HTML и CSS При версте веб страниц необходимо соблюдать минимум следующие правила: Результат должен, максимально совпасть с рисунком дизайнера Полученная страница должна адекватно выглядеть во всех браузерах – проверка кросс-платформенности (cross platform) Написать HTML коды отдельно от CSS

Слайд 54


РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦ Консорциум w3 рекомендует использование div-ов для вертки Дополнительно, рекомендуется, при определении ширины (width) и высоты (height) блока использовать свойства: min-width и max-width, min-height и max-height Min-width приоритетнее max-width и width (max-width приоритетнее width) Приоритет тот же и при определении высоты: свойство min-height приоритетнее чем свойство max-height и height
Описание слайда:
РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦ Консорциум w3 рекомендует использование div-ов для вертки Дополнительно, рекомендуется, при определении ширины (width) и высоты (height) блока использовать свойства: min-width и max-width, min-height и max-height Min-width приоритетнее max-width и width (max-width приоритетнее width) Приоритет тот же и при определении высоты: свойство min-height приоритетнее чем свойство max-height и height

Слайд 55


ПРИМЕР
Описание слайда:
ПРИМЕР

Слайд 56


ПРИМЕР <body> <div class="container"> <div class="header block">Header</div> <div class="menu block"> Meniu</div> <div class="column1 block">Coloana 1</div> <div class="column2 block">Coloana 2</div> <div class="column3 block">Coloana 3</div> <div class="footer block">Subsol</div> </div> </body>
Описание слайда:
ПРИМЕР <body> <div class="container"> <div class="header block">Header</div> <div class="menu block"> Meniu</div> <div class="column1 block">Coloana 1</div> <div class="column2 block">Coloana 2</div> <div class="column3 block">Coloana 3</div> <div class="footer block">Subsol</div> </div> </body>

Слайд 57


ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ body{ font-family:'PT Sans', sans-serif; } .container{ max-width:600px; margin:10px auto; } .block{ padding:10px 0px; margin-bottom:10px; color:#CC0000; } .header { background:rgba(230, 210, 250, 0.7); width: 100%; } .menu { background:rgba(230, 210, 250, 0.5); width: 100%; } .column1{ background:rgba(230, 210, 250, 0.4); float:left; width:180px; min-height:50px; margin-right:30px; } .column2{ background:rgba(230, 210, 250, 0.4); float:left; width:180px; min-height:50px; }
Описание слайда:
ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ body{ font-family:'PT Sans', sans-serif; } .container{ max-width:600px; margin:10px auto; } .block{ padding:10px 0px; margin-bottom:10px; color:#CC0000; } .header { background:rgba(230, 210, 250, 0.7); width: 100%; } .menu { background:rgba(230, 210, 250, 0.5); width: 100%; } .column1{ background:rgba(230, 210, 250, 0.4); float:left; width:180px; min-height:50px; margin-right:30px; } .column2{ background:rgba(230, 210, 250, 0.4); float:left; width:180px; min-height:50px; }

Слайд 58


ДРУГОЙ ПРИМЕР (чуть поменяли стили) Код HTML остался тот же
Описание слайда:
ДРУГОЙ ПРИМЕР (чуть поменяли стили) Код HTML остался тот же

Слайд 59


ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ … .column1{ background:rgba(230, 210, 250, 0.4); float:left; max-width:280px; min-height:50px; } .column2{ background:rgba(230, 210, 250, 0.4); float:right; max-width:280px; min-height:50px; } .column3{ background:rgba(230, 210, 250, 0.4); clear: both; margin-left: auto; margin-right: auto; max-width:280px; min-height:50px; } .footer{ background:rgba(230, 210, 250, 0.7); width: 100%; } …
Описание слайда:
ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ … .column1{ background:rgba(230, 210, 250, 0.4); float:left; max-width:280px; min-height:50px; } .column2{ background:rgba(230, 210, 250, 0.4); float:right; max-width:280px; min-height:50px; } .column3{ background:rgba(230, 210, 250, 0.4); clear: both; margin-left: auto; margin-right: auto; max-width:280px; min-height:50px; } .footer{ background:rgba(230, 210, 250, 0.7); width: 100%; } …

Слайд 60


АДАПТИВНЫЙ ДИЗАЙН (HTML Responsive Web Design) Веб сайт является responsive если его страницы адаптируются в зависимости от среды вывода (разрешение экрана – desktop, laptop, планшет, телефон), без больших изменений, с целью предоставления пользователю хорошего опыта (удобное передвижение по сайту). Responsive design предполагает: Использование адаптивных сеток – они могут поменять ширину в зависимости от разрешения экрана. Размеры задаются при помощи относительных величин Размеры изображений так же задаются относительными величинами Используются медиа-запросы (media queries) – процесс загрузки разных CSS свойств в зависимости от разрешения устройства. Сайт распознает тип устройства вывода и его разрешение, и загружает соответствующие свойства Для упрощения внедрения адаптивного дизайна появились много framework-ов. Самые распространенные: Bootstrap, Foundation и Skeleton
Описание слайда:
АДАПТИВНЫЙ ДИЗАЙН (HTML Responsive Web Design) Веб сайт является responsive если его страницы адаптируются в зависимости от среды вывода (разрешение экрана – desktop, laptop, планшет, телефон), без больших изменений, с целью предоставления пользователю хорошего опыта (удобное передвижение по сайту). Responsive design предполагает: Использование адаптивных сеток – они могут поменять ширину в зависимости от разрешения экрана. Размеры задаются при помощи относительных величин Размеры изображений так же задаются относительными величинами Используются медиа-запросы (media queries) – процесс загрузки разных CSS свойств в зависимости от разрешения устройства. Сайт распознает тип устройства вывода и его разрешение, и загружает соответствующие свойства Для упрощения внедрения адаптивного дизайна появились много framework-ов. Самые распространенные: Bootstrap, Foundation и Skeleton

Слайд 61


АДАПТИВНЫЙ ДИЗАЙН
Описание слайда:
АДАПТИВНЫЙ ДИЗАЙН

Слайд 62


W3.CSS Качественные эффекты достигаются и с помощью W3.CSS - frame-work используемый для адаптивного дизайна Используются только стили, без применения JS или JQuery W3.CSS это свободно доступный frame-work и не требует специальных лицензий Для его использования загрузите его и используйте Достиг версию 1.9 в январе 2016, появился в июне 2015) Описание: http://www.w3schools.com/w3css Примеры: http://www.w3schools.com/w3css/demo_website.htm
Описание слайда:
W3.CSS Качественные эффекты достигаются и с помощью W3.CSS - frame-work используемый для адаптивного дизайна Используются только стили, без применения JS или JQuery W3.CSS это свободно доступный frame-work и не требует специальных лицензий Для его использования загрузите его и используйте Достиг версию 1.9 в январе 2016, появился в июне 2015) Описание: http://www.w3schools.com/w3css Примеры: http://www.w3schools.com/w3css/demo_website.htm

Слайд 63


Пример с применением w3.css <!DOCTYPE html> <html><head> <title>W3.CSS</title> <meta name="viewport" content="redimensionarea contentului"> <link rel="stylesheet" href="../lib/w3.css"> <style> .align { text-align: center; valign: middle; } img { padding: 10px; float: left; } </style></head> <body> <div class="w3-container w3-brown"><h1 class="align">Florile verii</h1></div> <img src="..\Exemple\imagini\maci.jpg" alt="Maci" style="width:50%"> <img src="..\Exemple\imagini\maci2.jpg" alt="Maci" style="width:50%"> <div class="w3-container"><p>Macii - cea mai frumoasa priveliste a lunilor mai - iunie.</p> </div> <div class="w3-container w3-brown"> <h5 class="align">Toate drepturile rezervate</h5> <p class="align">E-mail: natalia-plesca@yandex.ru</p> </div></body></html>
Описание слайда:
Пример с применением w3.css <!DOCTYPE html> <html><head> <title>W3.CSS</title> <meta name="viewport" content="redimensionarea contentului"> <link rel="stylesheet" href="../lib/w3.css"> <style> .align { text-align: center; valign: middle; } img { padding: 10px; float: left; } </style></head> <body> <div class="w3-container w3-brown"><h1 class="align">Florile verii</h1></div> <img src="..\Exemple\imagini\maci.jpg" alt="Maci" style="width:50%"> <img src="..\Exemple\imagini\maci2.jpg" alt="Maci" style="width:50%"> <div class="w3-container"><p>Macii - cea mai frumoasa priveliste a lunilor mai - iunie.</p> </div> <div class="w3-container w3-brown"> <h5 class="align">Toate drepturile rezervate</h5> <p class="align">E-mail: natalia-plesca@yandex.ru</p> </div></body></html>

Слайд 64


РЕЗУЛЬТАТ
Описание слайда:
РЕЗУЛЬТАТ

Слайд 65


ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5 В HTML5 появились специальные теги, которые используются для вёрстки сайта Дополнительно: http://www.w3schools.com/html/html5_new_elements.asp
Описание слайда:
ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5 В HTML5 появились специальные теги, которые используются для вёрстки сайта Дополнительно: http://www.w3schools.com/html/html5_new_elements.asp

Слайд 66


ПРИМЕР ИСПОЛЬЗОВАНИЯ HTML5 <body> <main> <header>Header</header> <nav> Meniu</nav> <section><h1>Coloana 1</h1></section> <aside><h1>Coloana 2</h1></aside> <article><h1>Coloana 3</h1></article> <footer>Subsol</footer> </main> </body>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ HTML5 <body> <main> <header>Header</header> <nav> Meniu</nav> <section><h1>Coloana 1</h1></section> <aside><h1>Coloana 2</h1></aside> <article><h1>Coloana 3</h1></article> <footer>Subsol</footer> </main> </body>

Слайд 67


СТИЛИ body{ font-family:'PT Sans', sans-serif; } main{ max-width:600px; margin:10px auto; } header, nav, section, aside, article, footer { padding:10px 0px; margin-bottom:10px; color:#CC0000; } header { background:rgba(30, 210, 250, 0.7); width: 100%; } nav { background:rgba(30, 210, 250, 0.5); width: 100%; } section{ background:rgba(30, 210, 250, 0.4); float:left; max-width:280px; min-height:50px; } aside{ background:rgba(30, 210, 250, 0.4); float:right; max-width:280px; min-height:50px; } article{ background:rgba(30, 210, 250, 0.4); clear: both; margin-left: auto; margin-right: auto; max-width:280px; min-height:50px; } footer{ background:rgba(30, 210, 250, 0.7); width: 100%; }
Описание слайда:
СТИЛИ body{ font-family:'PT Sans', sans-serif; } main{ max-width:600px; margin:10px auto; } header, nav, section, aside, article, footer { padding:10px 0px; margin-bottom:10px; color:#CC0000; } header { background:rgba(30, 210, 250, 0.7); width: 100%; } nav { background:rgba(30, 210, 250, 0.5); width: 100%; } section{ background:rgba(30, 210, 250, 0.4); float:left; max-width:280px; min-height:50px; } aside{ background:rgba(30, 210, 250, 0.4); float:right; max-width:280px; min-height:50px; } article{ background:rgba(30, 210, 250, 0.4); clear: both; margin-left: auto; margin-right: auto; max-width:280px; min-height:50px; } footer{ background:rgba(30, 210, 250, 0.7); width: 100%; }

Слайд 68


РЕЗУЛЬТАТ
Описание слайда:
РЕЗУЛЬТАТ

Слайд 69


!!! 3 понятия выученные сегодня 2 вопроса которые возникли сегодня 1 предложение для следующей пары
Описание слайда:
!!! 3 понятия выученные сегодня 2 вопроса которые возникли сегодня 1 предложение для следующей пары

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию