Posljednje ažuriranje: 28.04.2016

CSS pruža mogućnosti pozicioniranja elemenata, što znači da možemo postaviti element na određenu lokaciju na stranici.

Glavno svojstvo koje kontroliše pozicioniranje u CSS-u je svojstvo pozicije. Ovo svojstvo može imati jednu od sljedećih vrijednosti:

statički : standardno pozicioniranje elementa, zadana vrijednost

apsolutni : element je pozicioniran u odnosu na granice elementa kontejnera ako njegovo svojstvo položaja nije statičko

relativno : Element je pozicioniran u odnosu na svoju zadanu poziciju. Tipično, glavna svrha relativnog pozicioniranja nije pomicanje elementa, već uspostavljanje nove točke sidrenja za apsolutno pozicioniranje njegovih ugniježđenih elemenata.

fiksno : element je pozicioniran u odnosu na prozor pretraživača, ovo vam omogućava da kreirate fiksne elemente koji ne mijenjaju poziciju kada se pomiče

Ne biste trebali istovremeno primijeniti svojstvo float i bilo koji tip pozicioniranja osim statičkog (to jest, zadanog tipa) na element.

Apsolutno pozicioniranje

Područje za pregled pretraživača ima gornju, donju, desnu i lijevu ivicu. Svaki od ova četiri ruba ima odgovarajuće CSS svojstvo: lijevo, desno, gornje i donje. Vrijednosti za ova svojstva su navedene u pikselima, ems ili procentima. Nije potrebno postavljati vrijednosti za sve četiri strane. U pravilu se postavljaju samo dvije vrijednosti - uvlačenje od gornje ivice gornje i uvlačenje s lijeve ivice lijevo.

Izgled bloka u HTML5 .headeru (pozicija: apsolutna; lijevo: 100px; vrh: 50px; širina: 430px; visina: 100px; boja pozadine: rgba(128, 0, 0, 0.5); )

ZDRAVO SVIJETE

Evo elementa div sa apsolutno pozicioniranje bit će 100 piksela lijevo od granice okvira za prikaz i 50 od dna.

Nije toliko važno da iza ovog div elementa postoje neki drugi elementi. Ovaj div blok će u svakom slučaju biti pozicioniran u odnosu na granice okvira za pregled pretraživača.

Ako se element s apsolutnim pozicioniranjem nalazi u drugom kontejneru, koji zauzvrat ima vrijednost svojstva položaja koja nije jednaka static , tada je element pozicioniran u odnosu na granice spremnika:

Pozicioniranje u HTML5 .outer ( pozicija: apsolutna; lijevo: 80px; vrh: 40px; širina: 430px; visina: 100px; ivica: 1px čvrsta #ccc; ) .unutrašnja (pozicija: apsolutna; lijevo: 80px; vrh: 40px; širina: 1px čvrsta #ccc; ) . : 50px; visina: 50px; boja pozadine: rgba(128, 0, 0, 0.5); )

Relativno pozicioniranje

Relativno pozicioniranje je također specificirano pomoću relativne vrijednosti. Za specificiranje određene pozicije na koju se element pomiče, koriste se ista svojstva gornje, lijevo, desno, donje:

Pozicioniranje u HTML5 .outer ( pozicija: relativna; lijevo: 80px; vrh: 40px; širina: 300px; visina: 100px; ivica: 1px čvrsta #ccc; ) .unutrašnja (pozicija: apsolutna; lijevo: 80px; vrh: 40px; širina: 1px čvrsta #ccc; ) . : 50px; visina: 50px; boja pozadine: rgba(128, 0, 0, 0.5); )

z-indeks svojstvo

Prema zadanim postavkama, kada dva elementa imaju istu granicu, element koji je zadnji definiran u html oznaci prikazuje se iznad drugog. Međutim, svojstvo z-indeks vam omogućava da promijenite redoslijed elemenata kada se preklapaju. Svojstvo uzima broj kao svoju vrijednost. Elementi sa većom vrednošću z-indeksa će se pojaviti na vrhu elemenata sa manjom vrednošću z-indeksa.

Na primjer:

Pozicioniranje u HTML5 body( margin:0; padding:0; ) .content( pozicija: relativna; vrh: 15px; lijevo: 20px; širina: 250px; visina: 180px; boja pozadine: #eee; granica: 1px čvrsta #ccc ; ) .redBlock( pozicija: apsolutna; vrh: 20px; lijevo:50px; širina: 80px; visina: 80px; boja pozadine: crvena; ) .blueBlock( pozicija: apsolutna; vrh: 80px; lijevo: 80px; širina: 80px ; visina: 80px; boja pozadine: plava; )

Sada dodajmo novo pravilo stilu bloka redBlock:

RedBlock( z-indeks: 100; pozicija: apsolutna; vrh: 20px; lijevo:50px; širina: 80px; visina: 80px; boja pozadine: crvena; )

Ovdje je z-indeks 100. Ali to ne mora biti broj 100. Pošto drugi blok ima nedefinirani z-indeks i zapravo je nula, za redBlock možemo postaviti svojstvo z-index na bilo koju vrijednost veću od nula.

I sada će se prvi blok preklapati s drugim, a ne obrnuto, kao što je bio slučaj na početku.

HTML oznaka se koristi za ugrađivanje objekta u HTML dokument. Koristite ovu oznaku da ugradite multimediju u svoje web stranice.

Atributi sadržaja rukovaoca događaja

Atributi sadržaja rukovaoca događaja omogućiti vam da pozovete skriptu iz vašeg HTML-a. Skripta se poziva kada se dogodi određeni "događaj". Svaki atribut sadržaja rukovaoca događajem bavi se različitim događajem.

Evo standardnih HTML 5 atributa sadržaja za obradu događaja.

• onabort
• otkaži
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• ispražnjen
• završio
• 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
• instaliran
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

Za potpuno objašnjenje ovih atributa, pogledajte.

Recimo još nekoliko riječi o registraciji ActiveX komponenti. Obično BASIC nezavisno registruje sve ActiveX komponente u trenutku njihovog kreiranja. Registracija se sastoji od dodjeljivanja posebnog jedinstvenog identifikatora CLSID ActiveX komponenti i unošenja u registar Windows baza podataka Registar nekoliko unosa koji karakteriziraju svojstva komponente i njenu lokaciju. Već smo malo pričali o registraciji programa u odjeljcima COM i DCOM. Što se tiče distribucije i širenja razvijenih ActiveX komponenti širom lokalna mreža ili internet, onda je ovo posebna tema i o njoj će se raspravljati u nastavku.

Rice. 1.11. Korišćenje unapred izgrađene ActiveX kontrole u pretraživaču

Postavljanje ActiveX kontrola na web stranice
ActiveX kontrole su povezane sa HTML dokumentima pomoću oznake, koja je predložena u jednom od radnih standarda W3 konzorcijuma. Svrha ove oznake (u Netscape Navigatoru) je da integriše strane elemente u HTML. Evo kompletne sintakse oznake:

Neki od navedenih atributa slični su atributima dobro poznate oznake , pa ih ovdje nećemo razmatrati.

Evo opisa atributa specifičnih za oznaku:
CIASSID=URL
Ovaj atribut specificira identifikator klase kontrolnog elementa koji se poziva. Svaki OCX modul, a time i svaka ActiveX kontrola, moraju imati svoj jedinstveni identifikator klase. Obično je skraćenica CLSID i prilično je dugačak niz heksadecimalnih cifara - na primjer, "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Ali zašto postoji "URL" u sintaksi ovog atributa? Činjenica je da se oznaka može koristiti za povezivanje ne samo ActiveX kontrola, već i drugih programskih objekata, uključujući i one koji se ne prepoznaju po "identifikatorima klase", već na neki drugi način.
Da bi se osiguralo da pretraživač radi samo s jednom sintaksom, CLSID se postavlja prema pravilima URL-a: lijeva strana sadrži riječ "clsid", a desna strana stvarni identifikator klase.
Primjer: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Ovaj atribut specificira URL (ovaj put pravi, s prefiksom "http:" ili "ftp:"). Možete navesti više URL-ova u ovom atributu u slučaju da jedan od servera iz nekog razloga nije dostupan.
Isti atribut vam omogućava da navedete potreban broj verzije za ActiveX kontrole.
Na primjer, ako napišete CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
zatim pokušaj da se dobije ovaj modul ActiveX sa Interneta se pokušava ne samo kada nije na računaru korisnika, već i kada je kontrolni element instaliran, ali ima više stari broj verzija od one navedene u atributu CODABASE (U našem primjeru, potrebna je verzija koja nije starija od 4.72.0.1171).

CODETURE=MIME-tip
TYPE=MIME-tip
Ova dva opciona atributa vam omogućavaju da specificirate tipove (u smislu MIME standarda) onih datoteka na koje se pozivaju atributi CLASSID (atribut CODETYPE) i DATA (atribut TYPE). Za ActiveX kontrole, atribut CODETYPE, ako postoji, mora biti postavljen na "application/x-oleobject".

DATA=URL
Ovaj atribut specificira lokaciju datoteke podataka koja može biti potrebna za rad ove kontrole. Za neke ActiveX kontrole, ovaj atribut je obavezan. Osim toga, koristeći atribut DATA, možete uključiti datoteku koja sadrži kontrolni element direktno u HTML datoteku u kodiranom obliku.

DECLARE
Obično je ova izjava prazna. Može se koristiti za deklarisanje objekta kada nije implementiran, već je samo parametar drugog objekta. Istovremeno, čitav skup atributa objekta se upisuje u memoriju pretraživača u slučaju da ih neko zatreba.

ID=id
Potrebno za organizaciju interakcije sa drugim objektima koji imaju identifikator. Također se može koristiti u šemi URL adresiranja (to jest, može se pojaviti iza znaka "#" u URL-u).
Možete kreirati koliko god želite oznaka sa istom CLASSID vrijednošću, ali njihove vrijednosti ID-a moraju biti različite.

NAME=id
Opcioni atribut koji se može koristiti prilikom pripreme HTML obrasca (za to oznaka mora biti unutar para oznaka...). Poslani podaci će sadržavati informacije koje pretraživač prima od objekta.

OBLICI
Ovaj prazan atribut omogućava, unutar prozora koji zauzima objekat u prostoru pretraživača, da se izaberu dodatne podoblasti i označi ih kao dodatne URL veze (neka vrsta hotspotova). Koordinate ovih regija i URL-ovi veza za njih specificiraju se pomoću oznaka sa posebnim dodatnim atributima, koji se moraju nalaziti između AND koji im odgovara.

U ovoj lekciji ćemo naučiti o oznaci. Njegova glavna svrha je da ugradi neke objekte u HTML stranicu koje pretraživač nije u stanju prepoznati. Na primjer, to može biti flash igra, slike, audio, video, java apleti, ActiveX elementi, PDF.

Sintaksa HTML oznake

... [] ...

U odjeljku atributa ima vrlo važnih parametara za rad objekta (njihova značenja ćemo pogledati na primjerima u nastavku). Štaviše, postoje samo dva obavezna: tip i podaci. Između oznaka za zatvaranje i otvaranje objekta, možete postaviti parametre za povezani objekt (ako su, naravno, potrebni) putem .

Atributi oznake 1. Poravnajte

Poravnaj - odgovoran je za poravnavanje objekta u odnosu na druge elemente stranice.

Na primjer

VALUE može uzeti sljedeće vrijednosti:

• absmiddle - poravnajte sa sredinom tekuće linije
• osnovna linija , srednja - poravnanje sa baznom linijom trenutne linije
• bottom (podrazumevano) - poravnava donju ivicu objekta sa okolnim tekstom
• lijevo - lokacija objekta lijevo
• desno - lokacija objekta desno
• top - poravnati na najviši element tekuće linije

2.Classid

Classid - govori pretraživaču koji program, dodatak ili aplet da učita. Ovaj program će dalje raditi sa objektom

Na primjer

Umjesto URL-a, možete napisati apsolutnu ili relativnu adresu.

3.Podaci

Podaci su najvažniji argument jer specificiraju adresu objekta.

Na primjer

Adresa objekta je specificirana ovisno o tome da li smo specificirali kodnu bazu. Ako kodna baza nije specificirana, tada se specificira adresa objekta u odnosu na dio direktorija u kojem se nalazimo. Preporučio bih da navedete punu adresu objekta.

4. Visina i širina

Visina i širina - postavite visinu i širinu objekta. Može se specificirati iu pikselima i u procentima. Ako ga postavimo kao postotak, tada se vrijednosti izračunavaju na osnovu dozvoljene površine.

Na primjer

5. Tip

Tip - definira MIME tip podataka navedenih u atributu podataka. Potrebno je da pretraživač pripremi potrebne resurse. Najčešće je njegova vrijednost upravo "application/x-shockwave-flash".

Ako preglednik ne podržava objekte (to se često događa ako Adobe flash player nije instaliran), tada unutar oznake možete navesti tekst koji će obavijestiti korisnika da je nemoguće učitati objekt.

Na primjer

Žao nam je, objekat se ne može prikazati Napomena 1

IE pretraživač možda neće pravilno razumjeti vrijednost podataka, tako da biste trebali ponovo navesti adresu datoteke u oznakama parametara:

Primjer: sat koji koristi objekt

Pomoću objekta možete jednostavno prikazati multimedijalne objekte i elemente. Najjednostavniji i najočitiji primjer je sat.

Demo prikazuje most između 2D grafike u HTML5 i prave 3D (koristeći WebGL). Svrha ovog članka je pokazati kako crtati 3D objekte koristeći poligonalnu mrežu. Poligonalna mreža je kolekcija vrhova, ivica i lica koja definiraju oblik poliedarskih objekata u 3D kompjuterska grafika i solidno modeliranje.

Jednostavni 3D objekti

Fasada se sastoji od trokuta, četvorougla ili drugih jednostavnih poligona. Da bismo to pokazali, pripremili smo jednostavne 3D objekte - kocku i poliedarske sfere (sa promjenjivim brojem lica).

Crtanje 3D objekata Korak 1: HTML

Kao i obično (za sve demo verzije zasnovane na platnu) imamo vrlo jednostavan HTML markup(sa jednim predmetom unutra, platno):

Wireframe 3D objekti u HTML5 Koristite tipke gore/dolje za kontrolu transparentnosti objekata

Dohvaćanje inicijalizacije objekta, pogledajte:

//var obj = nova kocka(); //var obj = nova sfera(6); var obj = nova sfera(16);

To znači da ako želimo da prikažemo kocku, morate dekomentirati prvi red, ako želite da prikažete sferu sa 6 lica, morate odabrati drugu opciju.

Korak 2. JS

Postoje tri JavaScript fajla (main.js, meshes.js i transform.js), mi objavljujemo dva, treći (transform.js) sadrži samo funkcije proračuna koje se odnose na rotaciju, skaliranje i objekte projekta. Pogledajmo prvi JavaScript kod:

js/meshes.js // Dobijte funkciju slučajne boje 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); }

Na samom početku moramo pripremiti sve tačke i fasadu naših objekata. Postoje 2 funkcije: kocka (koja generiše početne nizove za jednostavan objekat kocke) i sfere (za generisanje sfere). Mnogo je teže izračunati sve tačke i lica za poliedarsku sferu. Kada imamo sve ove tačke i površine, moramo izračunati druge parametre (kao što su rastojanje, apsolutni centar i tri ose).

// Interne varijable var canvas, ctx; var vAlpha = 0,5; var vShiftX = vShiftY = 0; var udaljenost = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Funkcija inicijalizacije sceneInit() ( // Priprema platna i konteksta objekta canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. visina / 2; // Početna skala i prijevod scaleObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Poveži se na događaj dokument rukovaoca onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Glavna petlja setInterval(drawScene, 25); ) // Rukovalac događaja OnKeyDown funkcija handleKeydown(e) ( kCode = ((e.which) || (e.keyCode); )); switch (kCode) ( slučaj 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // tipka dolje ) ) // Funkcija rukovanja događajima OnMouseMove handleMousemove(e) ( var x = e .pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; if ((x > 0) && (x< canvas.width) && (y >0) && (g< 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], udaljenost:max); ) aFaceTriangles.sort(sortByDistance); // Priprema niz sa predviđenim tačkama var aPrjPoints = new Array(); za (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; } }

Kada se stranica učita, vršimo glavnu inicijalizaciju (funkcija sceneInit). Kreiramo kontekst platna i objekta, što znači da izvodimo početnu skalu i prevodimo naše objekte koje smo kreirali na samom početku (kocka ili lopta). Zatim pridružujemo rukovaoce događajima OnKeyDown i OnMouseMove i postavljamo tajmer za renderiranje naše glavne scene (funkcija DrawScene). Ne zaboravite da možemo promijeniti globalAlpha parametre pritiskom na tipke Gore/Dolje.