Последнее обновление: 28.04.2016

CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице

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

static : стандартное позиционирование элемента, значение по умолчанию

absolute : элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static

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

fixed : элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

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

Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от левого края left.

Блочная верстка в HTML5 .header { position: absolute; left: 100px; top: 50px; width: 430px; height: 100px; background-color: rgba(128, 0, 0, 0.5); }

HELLO WORLD

Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.

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

Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position не равно static , то элемент позиционируется относительно границ контейнера:

Позиционирование в HTML5 .outer { position: absolute; left: 80px; top: 40px; width: 430px; height: 100px; border: 1px solid #ccc; } .inner{ position: absolute; left: 80px; top: 40px; width: 50px; height: 50px; background-color: rgba(128, 0, 0, 0.5); }

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

Относительное позиционирование также задается с помощью значения relative . Для указания конкретной позиции, на которую сдвигается элемент, применяются те же свойства top, left, right, bottom:

Позиционирование в HTML5 .outer { position: relative; left: 80px; top: 40px; width: 300px; height: 100px; border: 1px solid #ccc; } .inner{ position: absolute; left: 80px; top: 40px; width: 50px; height: 50px; background-color: rgba(128, 0, 0, 0.5); }

Свойство z-index

По умолчанию при совпадении у двух элементов границ, поверх другого отображается тот элемент, который определен в разметке html последним. Однако свойство z-index позволяет изменить порядок следования элементов при их наложении. В качестве значения свойство принимает число. Элементы с большим значением этого свойства будут отображаться поверх элементов с меньшим значением z-index.

Например:

Позиционирование в HTML5 body{ margin:0; padding:0; } .content{ position: relative; top: 15px; left: 20px; width: 250px; height: 180px; background-color: #eee; border: 1px solid #ccc; } .redBlock{ position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; } .blueBlock{ position: absolute; top: 80px; left: 80px; width: 80px; height: 80px; background-color: blue; }

Теперь добавим к стилю блока redBlock новое правило:

RedBlock{ z-index: 100; position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; }

Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем установить у свойства z-index любое значение больше нуля.

И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале.

The HTML tag is used for embedding an object within an HTML document. Use this tag to embed multimedia in your web pages.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

• onabort
• oncancel
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• onseeked
• onseeking
• onselect
• onshow
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

For a full explanation of these attributes, see .

Скажем еще несколько слов о регистрации компонентов ActiveX. Обычно Бэйсик самостоятельно регистрирует все ActiveX-компоненты в момент их создания. Регистрация заключается в присвоении ActiveX-компоненту специального уникального идентификатора CLSID и занесении в реестровую базу Windows Registry нескольких записей, характеризующих свойства компонента и его местонахождение. Мы уже немного говорили о регистрации программ в разделах, посвященных СОМ и DCOM. Что касается дистрибуции и распространении разработанных ActiveX-компонентов по локальной сети или Интернет, то это отдельная тема и о ней скажем ниже.

Рис. 1.11. Использование готового элемента управления ActiveX в браузере

Размещение управляющих элементов ActiveX на Web-страницах
Управляющие элементы ActiveX подключаются к HTML-документам с помощью тега , который предложен в одном из рабочих стандартов консорциума W3. Назначение этого тега ( в Netscape Navigator) - интеграция в HTML чужеродных элементов. Вот полный синтаксис тега:

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

Приведем описание атрибутов, специфических для тега :
CIASSID=URL
С помощью этого атрибута указывается идентификатор класса вызываемого управляющего элемента. Каждый OCX-модуль и, следовательно, каждый управляющий элемент ActiveX обязан иметь свой уникальный идентификатор класса. Он обычно обозначается сокращением CLSID и представляет собой довольно длинную цепочку шестнадцатеричных цифр - например, "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Но почему в синтаксисе этого атрибута стоит "URL"? Дело в том, что тег может использоваться для подключения не только управляющих элементов ActiveX, но и других программных объектов, в том числе и таких, которые распознаются не по "идентификаторам классов", а как-то иначе.
Чтобы браузер имел дело только с одним синтаксисом, идентификатор CLSID задается по правилам URL: левая часть содержит слово "clsid", а правая - собственно идентификатор класса.
Пример: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
В этом атрибуте указывается URL-адрес (на этот раз уже настоящий, с приставкой "http:" или "ftp:"). В этом атрибуте можно перечислить несколько URL-адресов - на тот случай, если один из серверов будет почему-либо недоступен.
Этот же атрибут позволяет указывать для управляющих элементов ActiveX требуемый номер версии.
Например, если написать CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4,72,0,1171"
то попытка получить данный модуль ActiveX из Интернета предпринимается не только в том случае, когда на компьютере пользователя его нет, но и тогда, когда управляющий элемент установлен, но имеет более старый номер версии, чем тот, что указан в атрибуте CODEBASE (В нашем примере требуется версия не старее 4.72.0.1171).

СОDЕТУРЕ=МIМЕ-тип
ТYРЕ=МIМЕ-тип
Эти два необязательных атрибута позволяют указать типы (в терминах стандарта MIME) тех файлов, на которые ссылаются атрибуты CLASSID (атрибут CODETYPE) И DATA (атрибут TYPE). Для управляющих элементов ActiveX атрибут CODETYPE, если он присутствует, должен иметь значение "application/x-oleobject".

DATA=URL
С помощью этого атрибута указывается местонахождение файла данных, который может понадобиться для работы данному управляющему элементу. Для некоторых управляющих элементов ActiveX этот атрибут является обязательным. Кроме того, с помощью атрибута DATA можно включать прямо в HTML-файл в закодированном виде сам файл, содержащий управляющий элемент.

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

ID =идентификатор
Нужен для организации взаимодействия с другими имеющими идентификатор объектами. Кроме того, может использоваться в схеме адресации URL (т. е. может стоять после символа "#" в URL-адресе).
Можно создать сколько угодно тегов с одним и тем же значением CLASSID, но значения ID у них обязательно должны различаться.

NAME =идентификатор
Необязательный атрибут, который можно использовать при подготовке HTML-формы (для этого тег должен находиться внутри пары тегов ... ). Отправляемые данные будут содержать информацию, полученную браузером от объекта.

SHAPES
Этот пустой атрибут дает возможность в рамках окна занимаемого объектом на пространстве браузера выделять дополнительные подобласти и маркировать их как дополнительные URL-ссылки (своеобразные hotspots). Координаты этих регионов и URL-адреса ссылок для них указываются с помощью тегов со специальными дополнительными атрибутами, которые должны располагаться между И соответствующим ему .

В этом уроке мы познакомимся с тегом . Его основной целью является встраивание на html-страницу каких-то объектов, которые браузер не в состоянии распознать. Например, это может быть flash-игра, изображения, аудио, видео, java-апплетов, activeX-элементов, PDF.

Синтаксис html тега

... [] ...

В разделе атрибутов находятся очень важные параметры для работы объекта (чуть ниже мы рассмотрим их значения все с примерами). Причем обязательных всего два type и data . Между закрывающим и открывающим тегом object можно задавать параметры для подключаемого объекта (если, конечно, они нужны) через .

Атрибуты тега 1. Align

Align - отвечает за выравнивание объекта относительно других элементов страницы.

Например

VALUE может принимать следующие значения:

• absmiddle - выравнивание по середине текущей строки
• baseline , middle - выравнивание по базовой линии текущей строки
• bottom (по умолчанию) - выравнивание нижней границы объекта по окружающему тексту
• left - расположение объекта слева
• right - расположение объекта справа
• top - выравнивание по самому высокому элементу текущей строки

2. Classid

Classid - указывает браузеру, какую программу, плагин или апплет нужно загрузить. Эта программа в дальнейшем будет работать с объектом

Например

Вместо URL можно писать как абсолютный, так и относительный адрес.

3. Data

Data - это самый важный аргумент, поскольку в нем указывается адрес объекта.

Например

Адрес объекта указывается в зависимости от того, указали ли мы codebase. Если codebase не указан, то адрес объекта указываем относительно той части каталога в которой мы находимся. Я бы рекомендовал задавать полный адрес объекта.

4. Height и Width

Height и Width - задают высоту и ширину объекта соответственно. Можно задавать как в пикселях, так и в процентах. Если задаем в процентах, то значения рассчитываются исходя из той дозволенной области.

Например

5. Type

Type - определяет MIME тип данных, указанных в атрибуте data. Нужен для того, чтобы браузер подготовил необходимые ресурсы. Чаще всего его значение ровно "application/x-shockwave-flash ".

В случае, если браузер не поддерживает объекты (такое часто бывает, если не установлен flash плеер Adobe), то внутри тега можно указать текст, который сообщит пользователю о невозможности загрузить объект.

Например

К сожалению, объект не может быть отображен Примечание 1

Браузер IE может некорректно понять значение data, поэтому следует указать адрес файла еще раз в тегах param:

Пример: часы с помощью object

С помощью объекта можно легко выводить мультимедиа объекты и элементы. Самым простым и наглядным примером являются часы.

В демонстрации показан мост между двухмерной графикой в HTML5 и по-настоящему трехмерной (с помощью WebGL). Цель статьи показать, как нарисовать трехмерные объекты с помощью polygonal mesh. Polygonal mesh представляет собой набор вершин, ребер и граней, которые определяет форму многогранных объектов в 3D компьютерной графики и твердотельного моделирования.

Простые трехмерные объекты

Фасад состоит из треугольников, четырехугольников или других простых многоугольников. Чтобы продемонстрировать это, мы подготовили простые трехмерные объекты — куб и многогранные сферы (с переменным числом граней).

Нарисовать трехмерные объекты Шаг 1. HTML

Как обычно (для всех canvas на основе демо) у нас есть очень простая разметка HTML (с одним объектом внутри, canvas):

Каркас 3D объектов в HTML5 Используйте кнопки Вверх / Вниз, чтобы управлять прозрачностью объекта

Извлечение инициализации объекта, смотрите:

//var obj = new cube(); //var obj = new sphere(6); var obj = new sphere(16);

Это означает, что если нам нужно вывести куб — вы должны раскомментировать первую строку, если вы хотите отобразить сферу с 6 граней — нужно выбрать второй вариант.

Шаг 2. JS

Есть три файла JavaScript (main.js, meshes.js и transform.js), мы публикуем два из них, третий (transform.js) содержит только функций вычислений, связанных с вращением, масштабированием и объектов проекта. Итак, давайте рассмотрим код первого JavaScript:

js/meshes.js // Получить случайный цвет function getRandomColor() { var letters = "0123456789ABCDEF".split(""); var color = "#"; for (var i = 0; i < 6; i++) { color += letters; } return color; } // Подготовка объекта function prepareObject(o) { o.colors = new Array(); // Составим норм o.normals = new Array(); for (var i = 0; i < o.faces.length; i++) { o.normals[i] = ; o.colors[i] = getRandomColor(); } // Составим центр: рассчитать максимальные позиции o.center = ; for (var i = 0; i < o.points.length; i++) { o.center += o.points[i]; o.center += o.points[i]; o.center += o.points[i]; } // Составим расстояния o.distances = new Array(); for (var i = 1; i < o.points.length; i++) { o.distances[i] = 0; } // Вычисляем среднее положение центра o.points_number = o.points.length; o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.faces_number = o.faces.length; o.axis_x = ; o.axis_y = ; o.axis_z = ; } // Объект куб function cube() { // Подготовим точки и граней куба this.points=[ , , , , , , , , , , ]; this.faces=[ , , , , , , , , , , , , , , , , ]; prepareObject(this); } // Объект сфера function sphere(n) { var delta_angle = 2 * Math.PI / n; // Составим вершины (точек) сферы var vertices = ; for (var j = 0; j < n / 2 - 1; j++) { for (var i = 0; i < n; i++) { vertices = ; vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle); vertices = 100 * Math.cos((j + 1) * delta_angle); vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle); } } vertices[(n / 2 - 1) * n] = ; vertices[(n / 2 - 1) * n + 1] = ; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n] = 100; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n + 1] = 0; vertices[(n / 2 - 1) * n + 1] = -100; vertices[(n / 2 - 1) * n + 1] = 0; this.points = vertices; // Составим первый слой var faces = ; for (var j = 0; j < n / 2 - 2; j++) { for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = j * n + i; faces = j * n + i + 1; faces = (j + 1) * n + i + 1; faces = j * n + i; faces = (j + 1) * n + i + 1; faces = (j + 1) * n + i; } faces = ; faces = ; faces = (j + 1) * n - 1; faces = (j + 1) * n; faces = j * n; faces = (j + 1) * n - 1; faces = j * n + n; faces = (j + 2) * n - 1; } for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = (n / 2 - 1) * n; faces = i; faces = i + 1; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n + i + 1; faces = (n / 2 - 2) * n + i; } faces = ; faces = ; faces = (n / 2 - 1) * n; faces = n - 1; faces = 0; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n; faces = (n / 2 - 2) * n + n - 1; this.faces=faces; prepareObject(this); }

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

// Внутренние переменные var canvas, ctx; var vAlpha = 0.5; var vShiftX = vShiftY = 0; var distance = -700; var vMouseSens = 0.05; var iHalfX, iHalfY; // Инициализация function sceneInit() { // Подготовка холста и контекст объектов canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas.height / 2; // Начальный масштаб и перевод scaleObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Подключить обработчику событий document.onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Основной цикл setInterval(drawScene, 25); } // Обработчик событий OnKeyDown function handleKeydown(e) { kCode = ((e.which) || (e.keyCode)); switch (kCode) { case 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Down key } } // Обработчик события OnMouseMove function handleMousemove(e) { var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; if ((x > 0) && (x < canvas.width) && (y > 0) && (y < canvas.height)) { vShiftY = vMouseSens * (x - iHalfX) / iHalfX; vShiftX = vMouseSens * (y - iHalfY) / iHalfY; } } // Рисуем основную функцию function drawScene() { // Очистить холст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Установить цвет заливки, цвет обводки, толщину линии и глобальной альфа- ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 0.5; ctx.globalAlpha= vAlpha; // Вертикальный и горизонтальный поворот var vP1x = getRotationPar(, , vShiftX); var vP2x = getRotationPar(, , vShiftX); var vP1y = getRotationPar(, , vShiftY); var vP2y = getRotationPar(, , vShiftY); rotateObj(vP1x, vP2x, obj); rotateObj(vP1y, vP2y, obj); // Пересчитываем расстояния for (var i = 0; i < obj.points_number; i++) { obj.distances[i] = Math.pow(obj.points[i],2) + Math.pow(obj.points[i],2) + Math.pow(obj.points[i], 2); } // Подготовить массив с фасадом треугольников (с расчетом максимальное расстояние для каждой грани) var iCnt = 0; var aFaceTriangles = new Array(); for (var i = 0; i < obj.faces_number; i++) { var max = obj.distances]; for (var f = 1; f < obj.faces[i].length; f++) { if (obj.distances[f]] > max) max = obj.distances[f]]; } aFaceTriangles = {faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max}; } aFaceTriangles.sort(sortByDistance); // Подготовка массива с прогнозируемым пунктов var aPrjPoints = new Array(); for (var i = 0; i < obj.points.length; i++) { aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY); } // Нарисовать объект (поверхность) for (var i = 0; i < iCnt; i++) { ctx.fillStyle = aFaceTriangles[i].faceColor; // Начало пути ctx.beginPath(); // Фасад индекс вершины var iFaceVertex = aFaceTriangles[i].faceVertex; // Переместить в исходное положение ctx.moveTo(aPrjPoints, aPrjPoints); // И нарисовать три линии (построить треугольник) for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) { ctx.lineTo(aPrjPoints], aPrjPoints]); } // Закрыть путь, и заполнить треугольник ctx.closePath(); ctx.stroke(); ctx.fill(); } } // Функция сортировки function sortByDistance(x, y) { return (y.distance - x.distance); } // Инициализация if (window.attachEvent) { window.attachEvent("onload", sceneInit); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); sceneInit(); }; window.onload = newonload; } else { window.onload = sceneInit; } }

Как только страница загружена, мы делаем основную инициализацию (функция sceneInit). Мы создаем canvas и контекст объектов, значит мы выполняем начальный масштаб и переводим наши объекты, которые создали в самом начале (куб или шар). Затем мы придаем обработчикам событий OnKeyDown и OnMouseMove и установим таймер, чтобы сделать нашу основную сцену (функция DrawScene). Не забывайте, что мы можем изменить globalAlpha параметры с нажатием клавиш Вверх/Вниз.