Zadnja posodobitev: 28.04.2016

CSS ponuja zmožnosti pozicioniranja elementov, kar pomeni, da lahko element postavimo na določeno mesto na strani.

Glavna lastnost, ki nadzoruje pozicioniranje v CSS, je lastnost položaja. Ta lastnost ima lahko eno od naslednjih vrednosti:

statično : standardno pozicioniranje elementa, privzeta vrednost

absolutno: element je postavljen glede na meje vsebniškega elementa, če njegova lastnost položaja ni statična

relativen : Element je postavljen glede na privzeti položaj. Običajno glavni namen relativnega pozicioniranja ni premikanje elementa, ampak vzpostavitev nove sidrne točke za absolutno pozicioniranje njegovih ugnezdenih elementov

fiksno : element je postavljen glede na okno brskalnika, kar vam omogoča, da ustvarite fiksne elemente, ki ne spremenijo položaja, ko se premikate

Lastnosti float in katere koli druge vrste pozicioniranja razen statične (tj. privzete vrste) ne smete hkrati uporabiti za element.

Absolutno pozicioniranje

Pregledno območje brskalnika ima zgornji, spodnji, desni in levi rob. Vsak od teh štirih robov ima ustrezno lastnost CSS: levi, desni, zgornji in spodnji. Vrednosti za te lastnosti so določene v slikovnih pikah, em ali odstotkih. Ni potrebno nastaviti vrednosti za vse štiri strani. Praviloma sta nastavljeni le dve vrednosti - zamik od zgornjega roba zgoraj in zamik od levega roba levo.

Postavitev bloka v HTML5 .header ( položaj: absolutno; levo: 100 slikovnih pik; zgoraj: 50 slikovnih pik; širina: 430 slikovnih pik; višina: 100 slikovnih pik; barva ozadja: rgba(128, 0, 0, 0,5); )

POZDRAVLJEN, SVET

Tukaj je element div z absolutno pozicioniranje bo 100 slikovnih pik levo od roba vidnega polja in 50 od dna.

Ni tako pomembno, da so za tem elementom div še nekateri drugi elementi. Ta blok div bo v vsakem primeru postavljen glede na meje vidnega polja brskalnika.

Če se element z absolutnim položajem nahaja v drugem vsebniku, ki ima vrednost lastnosti položaja, ki ni enaka static , potem je element postavljen glede na meje vsebnika:

Pozicioniranje v 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; višina: 50px; barva ozadja: rgba(128, 0, 0, 0,5);

Relativno pozicioniranje

Relativno pozicioniranje je določeno tudi z relativno vrednostjo. Za določitev določenega položaja, v katerega se premakne element, se uporabljajo iste lastnosti zgoraj, levo, desno, spodaj:

Pozicioniranje v 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; višina: 50px; barva ozadja: rgba(128, 0, 0, 0,5);

lastnost z-index

Kadar imata dva elementa enako obrobo, je element, ki je nazadnje definiran v oznaki html, privzeto prikazan nad drugim. Vendar pa vam lastnost z-index omogoča spreminjanje vrstnega reda elementov, ko so prekriti. Lastnost za svojo vrednost sprejme število. Elementi z večjo vrednostjo z-indeksa bodo prikazani na vrhu elementov z manjšo vrednostjo z-indeksa.

Na primer:

Pozicioniranje v 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( položaj: absolutno; zgoraj: 20px; levo:50px; širina: 80px; višina: 80px; barva ozadja: rdeča; ) .blueBlock( položaj: absolutno; zgoraj: 80px; levo: 80px; širina: 80px ; višina: 80 slikovnih pik; barva ozadja: modra;

Zdaj pa dodamo novo pravilo slogu bloka redBlock:

RedBlock( z-index: 100; položaj: absolutno; zgoraj: 20px; levo:50px; širina: 80px; višina: 80px; barva ozadja: rdeča; )

Tukaj je z-indeks 100. Vendar ni nujno, da je številka 100. Ker ima drugi blok nedefiniran z-indeks in je dejansko nič, lahko za redBlock nastavimo lastnost z-index na katero koli vrednost, večjo od nič.

In zdaj bo prvi blok prekrival drugega in ne obratno, kot je bilo na začetku.

Oznaka HTML se uporablja za vdelavo predmeta v dokument HTML. Uporabite to oznako za vdelavo večpredstavnosti na vaše spletne strani.

Atributi vsebine obdelovalca dogodkov

Atributi vsebine obdelovalca dogodkov vam omogočajo da prikličete skript iz vašega HTML-ja. Skript se prikliče, ko pride do določenega "dogodka". Vsak atribut vsebine obdelovalca dogodkov se ukvarja z drugačnim dogodkom.

Tu so standardni atributi vsebine za obravnavo dogodkov HTML 5.

• onabort
• preklicati
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• eno izpraznjeno
• končalo
• onerror
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload
• onloadeddata
• naloženi metapodatki
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• napavzi
• onplay
• onplaying
• v teku
• onratechange
• onreadystatechange
• onscroll
• onseeked
• onseeking
• onselect
• onshow
• nameščen
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• na čakanju

Za popolno razlago teh atributov glejte.

Povejmo še nekaj besed o registraciji komponent ActiveX. Običajno BASIC neodvisno registrira vse komponente ActiveX v času njihove izdelave. Registracija je sestavljena iz dodelitve posebnega edinstvenega identifikatorja CLSID komponenti ActiveX in njegovega vnosa v register Baza podatkov Windows Register več vnosov, ki označujejo lastnosti komponente in njeno lokacijo. O registraciji programov smo že nekaj govorili v razdelkih o COM in DCOM. Kar zadeva distribucijo in razširjanje razvitih komponent ActiveX lokalno omrežje ali internet, potem je to ločena tema in bo obravnavana spodaj.

riž. 1.11. Uporaba vnaprej vgrajenega kontrolnika ActiveX v brskalniku

Namestitev kontrolnikov ActiveX na spletne strani
Kontrolniki ActiveX so povezani z dokumenti HTML s pomočjo oznake, ki je predlagana v enem od delovnih standardov konzorcija W3. Namen te oznake (v Netscape Navigatorju) je integracija tujih elementov v HTML. Tukaj je celotna sintaksa oznake:

Nekateri od navedenih atributov so podobni istim atributom znane oznake , zato jih tukaj ne bomo obravnavali.

Tukaj je opis atributov, specifičnih za oznako:
CIASSID=URL
Ta atribut podaja identifikator razreda klicanega krmilnega elementa. Vsak modul OCX in s tem vsak kontrolnik ActiveX mora imeti svoj edinstven identifikator razreda. Običajno je skrajšano CLSID in je precej dolg niz šestnajstiških števk - na primer "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Toda zakaj je v sintaksi tega atributa "URL"? Dejstvo je, da se lahko oznaka uporablja za povezovanje ne samo kontrolnikov ActiveX, temveč tudi drugih programskih predmetov, vključno s tistimi, ki jih ne prepoznajo "identifikatorji razreda", ampak na drug način.
Za zagotovitev, da brskalnik obravnava samo eno sintakso, je CLSID nastavljen v skladu s pravili URL-ja: leva stran vsebuje besedo "clsid", desna stran pa dejanski identifikator razreda.
Primer: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Ta atribut določa URL (tokrat pravi, s predpono "http:" ali "ftp:"). V tem atributu lahko navedete več URL-jev, če eden od strežnikov iz nekega razloga ni na voljo.
Isti atribut vam omogoča, da določite zahtevano številko različice za kontrolnike ActiveX.
Če na primer napišete CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
nato pa poskus pridobitve ta modul ActiveX iz interneta se poskusi izvajati ne samo, ko ni v uporabnikovem računalniku, ampak tudi, ko je nadzorni element nameščen, vendar ima več stara številka različica, kot je navedena v atributu CODEBASE (v našem primeru je zahtevana različica, ki ni starejša od 4.72.0.1171).

CODETURE=vrsta MIME
TYPE=vrsta MIME
Ta dva neobvezna atributa vam omogočata, da določite vrste (v smislu standarda MIME) tistih datotek, na katere se sklicujeta atributa CLASSID (atribut CODETYPE) in DATA (atribut TYPE). Za kontrolnike ActiveX mora biti atribut CODETYPE, če je prisoten, nastavljen na "application/x-oleobject".

PODATKI=URL
Ta atribut določa lokacijo podatkovne datoteke, ki bo morda potrebna za delovanje tega nadzora. Za nekatere kontrolnike ActiveX je ta atribut obvezen. Poleg tega lahko z uporabo atributa DATA vključite samo datoteko, ki vsebuje kontrolni element, v kodirani obliki neposredno v datoteko HTML.

IZJAVA
Običajno je ta izjava prazna. Uporablja se lahko za deklaracijo predmeta, ko ta ni implementiran, ampak je le parameter drugega objekta. Hkrati se celoten niz atributov objekta zapiše v pomnilnik brskalnika, če jih kdo potrebuje.

ID=id
Potreben za organizacijo interakcije z drugimi predmeti, ki imajo identifikator. Uporablja se lahko tudi v shemi naslavljanja URL (to pomeni, da se lahko pojavi za znakom "#" v URL-ju).
Ustvarite lahko poljubno število oznak z isto vrednostjo CLASSID, vendar se morajo njihove vrednosti ID-ja razlikovati.

IME=id
Izbirni atribut, ki se lahko uporabi pri pripravi obrazca HTML (za to mora biti oznaka znotraj para oznak ...). Poslani podatki bodo vsebovali informacije, ki jih brskalnik prejme od objekta.

OBLIKE
Ta prazen atribut omogoča, da znotraj okna, ki ga objekt zaseda v prostoru brskalnika, izberete dodatna podobmočja in jih označite kot dodatne URL povezave (nekakšne vroče točke). Koordinate teh območij in URL-ji povezav zanje so določeni z uporabo oznak s posebnimi dodatnimi atributi, ki se morajo nahajati med IN, ki mu ustreza.

V tej lekciji se bomo naučili o oznaki. Njegov glavni namen je vdelati nekaj predmetov v stran HTML, ki jih brskalnik ne more prepoznati. To je lahko na primer igra flash, slike, zvok, video, programčki java, elementi ActiveX, PDF.

Sintaksa oznake HTML

... [] ...

V razdelku z atributi je zelo pomembne parametre za delovanje objekta (njihove pomene si bomo ogledali na spodnjih primerih). Poleg tega sta obvezna le dva: vrsta in podatki. Med zapiralnimi in odpiralnimi oznakami objekta lahko prek .

Atributi oznake 1. Poravnaj

Poravnaj - je odgovoren za poravnavo predmeta glede na druge elemente strani.

Na primer

VALUE lahko sprejme naslednje vrednosti:

• absmiddle - poravnajte na sredino trenutne vrstice
• osnovna črta , sredina - poravnava na osnovno črto trenutne črte
• bottom (privzeto) - poravna spodnjo obrobo predmeta z okoliškim besedilom
• levo - lokacija objekta na levi
• desno - lokacija objekta na desni
• zgoraj - poravnajte na najvišji element trenutne vrstice

2.Classid

Classid - pove brskalniku, kateri program, vtičnik ali programček naj naloži. Ta program bo naprej delal s predmetom

Na primer

Namesto URL-ja lahko napišete absolutni ali relativni naslov.

3. Podatki

Podatki so najpomembnejši argument, saj določajo naslov predmeta.

Na primer

Naslov objekta je določen glede na to, ali smo podali kodno zbirko. Če codebase ni podana, je naslov objekta naveden glede na del imenika, v katerem se nahajamo. Priporočam, da navedete polni naslov objekta.

4. Višina in širina

Višina in širina - nastavite višino in širino predmeta. Lahko se določi v slikovnih pikah in odstotkih. Če ga nastavimo v odstotkih, se vrednosti izračunajo glede na dovoljeno površino.

Na primer

5.Vrsta

Vrsta - definira vrsto MIME podatkov, navedenih v atributu podatkov. Potreben je, da brskalnik pripravi potrebna sredstva. Najpogosteje je njegova vrednost točno "application/x-shockwave-flash".

Če brskalnik ne podpira predmetov (to se pogosto zgodi, če predvajalnik Adobe Flash Player ni nameščen), lahko znotraj oznake določite besedilo, ki bo uporabnika obvestilo, da predmeta ni mogoče naložiti.

Na primer

Žal predmeta ni mogoče prikazati Opomba 1

Brskalnik IE morda ne bo pravilno razumel podatkovne vrednosti, zato bi morali ponovno določiti naslov datoteke v oznakah param:

Primer: ura z uporabo predmeta

Z uporabo predmeta lahko preprosto prikažete večpredstavnostne predmete in elemente. Najenostavnejši in najbolj očiten primer je ura.

Predstavitev prikazuje most med 2D grafiko v HTML5 in pravo 3D (z uporabo WebGL). Namen tega članka je pokazati, kako narisati 3D-predmete z uporabo poligonalne mreže. Poligonalna mreža je zbirka oglišč, robov in ploskev, ki določajo obliko poliedrskih predmetov v 3D računalniška grafika in trdno modeliranje.

Preprosti 3D objekti

Fasada je sestavljena iz trikotnikov, štirikotnikov ali drugih preprostih mnogokotnikov. Za prikaz tega smo pripravili preproste 3D objekte - kocko in poliedrske krogle (z različnim številom ploskev).

Risanje 3D predmetov 1. korak: HTML

Kot običajno (za vse predstavitve na platnu) imamo zelo preprosto HTML oznaka(z enim predmetom v notranjosti, platno):

3D-predmeti Wireframe v HTML5 Uporabite gumba gor/dol za nadzor preglednosti predmeta

Pridobivanje inicializacije objekta, glejte:

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

To pomeni, da če želimo prikazati kocko, moramo odkomentirati prvo vrstico, če želimo prikazati kroglo s 6 ploskvami, moramo izbrati drugo možnost.

2. korak. JS

Obstajajo tri datoteke JavaScript (main.js, meshes.js in transform.js), dve objavljamo, tretja (transform.js) vsebuje samo računske funkcije, povezane z vrtenjem, skaliranjem in objekti projekta. Poglejmo torej prvo kodo JavaScript:

js/meshes.js // Pridobi funkcijo naključne barve 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 samem začetku moramo pripraviti vse točke in fasado naših objektov. Obstajata dve funkciji: kocka (ki generira začetne nize za preprost predmet kocke) in krogle (za generiranje krogle). Za poliedrsko kroglo je veliko težje izračunati vse točke in ploskve. Ko imamo vse te točke in površine, moramo izračunati druge parametre (kot so razdalja, absolutno središče in tri osi).

// Notranje spremenljivke var canvas, ctx; var vAlpha = 0,5; var vShiftX = vShiftY = 0; var razdalja = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Funkcija inicializacije sceneInit() ( // Priprava platna in konteksta objekta canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. višina / 2; // Začetno merilo in prevod scaleObj ([-obj.center], obj); // Poveži se z dokumentom za obravnavo dogodka ; canvas.onmousemove = handleMousemove; // Glavna zanka setInterval(drawScene, 25); ( primer 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Tipka navzdol ) ) // Funkcija obdelovalnika dogodkov OnMouseMove 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); // Priprava matrike s predvidenimi točkami 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; } }

Ko je stran naložena, naredimo glavno inicializacijo (funkcija sceneInit). Ustvarimo platno in objektni kontekst, kar pomeni, da izvedemo začetno merilo in prevedemo naše objekte, ki smo jih ustvarili na samem začetku (kocka ali krogla). Nato na OnKeyDown in OnMouseMove priložimo obdelovalce dogodkov in nastavimo časovnik za upodabljanje našega glavnega prizora (funkcija DrawScene). Ne pozabite, da lahko spremenimo parametre globalAlpha s pritiskom na tipki gor/dol.