Siste oppdatering: 28.04.2016

CSS gir elementposisjoneringsmuligheter, noe som betyr at vi kan plassere et element på et bestemt sted på siden.

Hovedegenskapen som kontrollerer posisjonering i CSS er posisjonsegenskapen. Denne egenskapen kan ha en av følgende verdier:

statisk: standard elementplassering, standardverdi

absolutt: elementet er posisjonert i forhold til grensene til beholderelementet hvis dets posisjonsegenskap ikke er statisk

relativ : Elementet er plassert i forhold til standardposisjonen. Vanligvis er hovedformålet med relativ posisjonering ikke å flytte et element, men å etablere et nytt ankerpunkt for den absolutte posisjoneringen av dets nestede elementer

fast : elementet er plassert i forhold til nettleservinduet, dette lar deg lage faste elementer som ikke endrer posisjon når du ruller

Du bør ikke samtidig bruke float-egenskapen og andre posisjoneringstyper enn statisk (det vil si standardtypen) på et element.

Absolutt posisjonering

Nettleserens visningsområde har en topp, bunn, høyre og venstre kant. Hver av disse fire kantene har en tilsvarende CSS-egenskap: venstre, høyre, topp og bunn. Verdiene for disse egenskapene er spesifisert i piksler, ems eller prosenter. Det er ikke nødvendig å angi verdier for alle fire sidene. Som regel er bare to verdier satt - innrykk fra øvre kant og innrykk fra venstre kant til venstre.

Blokklayout i HTML5 .header (posisjon: absolutt; venstre: 100px; topp: 50px; bredde: 430px; høyde: 100px; bakgrunnsfarge: rgba(128, 0, 0, 0.5); )

HEI VERDEN

Her er et div-element med absolutt posisjonering vil være 100 piksler til venstre for visningsportens kant og 50 fra bunnen.

Det er ikke så viktig at det etter dette div-elementet er noen andre elementer. Denne div-blokken vil uansett være plassert i forhold til grensene til nettleserens visningsport.

Hvis et element med absolutt posisjonering er plassert i en annen beholder, som igjen har en posisjonsegenskapsverdi som ikke er lik statisk , blir elementet plassert i forhold til beholderens grenser:

Plassering i HTML5 .outer ( posisjon: absolutt; venstre: 80px; topp: 40px; bredde: 430px; høyde: 100px; kantlinje: 1px solid #ccc; ) .inner( posisjon: absolutt; venstre: 80px; topp: 40px; width : 50px; høyde: 50px; bakgrunnsfarge: rgba(128, 0, 0, 0.5); )

Relativ posisjonering

Relativ posisjonering er også spesifisert ved hjelp av den relative verdien. For å spesifisere den spesifikke posisjonen som elementet skal flyttes til, brukes samme topp-, venstre-, høyre- og bunnegenskaper:

Plassering i HTML5 .outer (posisjon: relativ; venstre: 80px; topp: 40px; bredde: 300px; høyde: 100px; kantlinje: 1px solid #ccc; ) .inner( posisjon: absolutt; venstre: 80px; topp: 40px; width : 50px; høyde: 50px; bakgrunnsfarge: rgba(128, 0, 0, 0.5); )

z-indeks eiendom

Som standard, når to elementer har samme kantlinje, vises elementet som sist ble definert i html-markeringen oppå den andre. Z-index-egenskapen lar deg imidlertid endre rekkefølgen på elementer når de overlegges. Eiendommen tar et tall som verdi. Elementer med en større z-indeksverdi vil vises på toppen av elementer med en mindre z-indeksverdi.

For eksempel:

Plassering i HTML5 body( margin:0; padding:0; ) .content( posisjon: relativ; topp: 15px; venstre: 20px; bredde: 250px; høyde: 180px; bakgrunnsfarge: #eee; kantlinje: 1px solid #ccc ; ) .redBlock( posisjon: absolutt; topp: 20px; venstre:50px; bredde: 80px; høyde: 80px; bakgrunnsfarge: rød; ) .blueBlock( posisjon: absolutt; topp: 80px; venstre: 80px; bredde: 80px ; høyde: 80px; bakgrunnsfarge: blå;)

La oss nå legge til en ny regel til redBlock-blokkstilen:

RedBlock( z-indeks: 100; posisjon: absolutt; topp: 20px; venstre:50px; bredde: 80px; høyde: 80px; bakgrunnsfarge: rød; )

Her er z-indeksen 100. Men det trenger ikke å være tallet 100. Siden den andre blokken har en udefinert z-indeks og faktisk er null, kan vi for redBlock sette z-indeks-egenskapen til en hvilken som helst verdi større enn null.

Og nå vil den første blokken overlappe den andre, og ikke omvendt, slik tilfellet var i begynnelsen.

HTML-koden brukes til å bygge inn et objekt i et HTML-dokument. Bruk denne taggen til å bygge inn multimedia på nettsidene dine.

Innholdsattributter for hendelsesbehandler

Innholdsattributter for hendelsesbehandler aktivere deg for å starte et skript fra HTML-en din. Skriptet påkalles når en bestemt "hendelse" inntreffer. Hvert innholdsattributt for hendelsesbehandler omhandler en annen hendelse.

Her er standard innholdsattributter for HTML 5 hendelsesbehandler.

• avbryte
• Avbryt
• onblur
• oncanplay
• oncanplaythrough
• ved endring
• ved trykk
• på kontekstmenyen
• ondblklikk
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• varighetsendring
• entømt
• endte
• en feil
• fokus
• onformchange
• onforminput
• på inngang
• onugyldig
• onkeydown
• onkeypress
• onkeyup
• på Last
• nedlastede data
• lastet metadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• på musen over
• onmouseup
• på musehjulet
• på pause
• onplay
• på å spille
• pågang
• på rateendring
• klar til å endres
• på rulle
• ettersøkt
• søkende
• onselge
• på utstilling
• installert
• sende inn
• på suspendering
• oppdatering i tide
• på volumendring
• venter

For en fullstendig forklaring av disse attributtene, se.

La oss si noen flere ord om registrering av ActiveX-komponenter. Vanligvis registrerer BASIC uavhengig alle ActiveX-komponenter på tidspunktet for opprettelsen. Registrering består i å tildele en spesiell unik identifikator CLSID til ActiveX-komponenten og legge den inn i registeret Windows database Register over flere oppføringer som karakteriserer egenskapene til komponenten og dens plassering. Vi har allerede snakket litt om registrering av programmer i seksjonene om COM og DCOM. Angående distribusjon og formidling av utviklede ActiveX-komponenter på tvers lokalt nettverk eller Internett, så er dette et eget emne og vil bli diskutert nedenfor.

Ris. 1.11. Bruke en forhåndsbygd ActiveX-kontroll i nettleseren

Plassere ActiveX-kontroller på websider
ActiveX-kontroller er koblet til HTML-dokumenter ved hjelp av taggen, som er foreslått i en av arbeidsstandardene til W3-konsortiet. Hensikten med denne taggen (i Netscape Navigator) er å integrere fremmede elementer i HTML. Her er den komplette tagsyntaksen:

Noen av de oppførte attributtene ligner attributtene til den velkjente taggen , så vi vil ikke vurdere dem her.

Her er en beskrivelse av tag-spesifikke attributter:
CIASSID=URL
Dette attributtet spesifiserer klasseidentifikatoren til kontrollelementet som kalles opp. Hver OCX-modul, og derfor hver ActiveX-kontroll, må ha sin egen unike klasseidentifikator. Det er vanligvis forkortet CLSID og er en ganske lang streng med heksadesimale sifre - for eksempel "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Men hvorfor er det "URL" i syntaksen til dette attributtet? Faktum er at taggen kan brukes til å koble ikke bare ActiveX-kontroller, men også andre programobjekter, inkludert de som ikke gjenkjennes av "klasseidentifikatorer", men på en annen måte.
For å sikre at nettleseren kun håndterer én syntaks, settes CLSID i henhold til reglene for URL: venstre side inneholder ordet "clsid", og høyre side inneholder den faktiske klasseidentifikatoren.
Eksempel: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Dette attributtet spesifiserer URL-en (denne gangen en ekte, med prefikset "http:" eller "ftp:"). Du kan liste opp flere URL-er i dette attributtet i tilfelle en av serverne er utilgjengelig av en eller annen grunn.
Det samme attributtet lar deg spesifisere det nødvendige versjonsnummeret for ActiveX-kontroller.
For eksempel, hvis du skriver CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
deretter et forsøk på å få denne modulen ActiveX fra Internett forsøkes ikke bare når det ikke er på brukerens datamaskin, men også når kontrollelementet er installert, men har mer gammelt nummer versjon enn den som er spesifisert i CODEBASE-attributtet (I vårt eksempel kreves det en versjon som ikke er eldre enn 4.72.0.1171).

CODETURE=MIME-type
TYPE=MIME-type
Disse to valgfrie attributtene lar deg spesifisere typene (i form av MIME-standarden) for de filene som refereres til av attributtene CLASSID (CODETYPE) og DATA (TYPE-attributt). For ActiveX-kontroller må CODETYPE-attributtet, hvis det finnes, settes til "application/x-oleobject".

DATA=URL
Dette attributtet spesifiserer plasseringen til datafilen som kan være nødvendig for at denne kontrollen skal fungere. For noen ActiveX-kontroller kreves dette attributtet. I tillegg, ved å bruke DATA-attributtet, kan du inkludere filen som inneholder kontrollelementet direkte i HTML-filen i kodet form.

ERKLÆRE
Vanligvis er denne uttalelsen tom. Den kan brukes til å deklarere et objekt når det ikke er implementert, men er bare en parameter for et annet objekt. Samtidig skrives hele settet med objektattributter til nettleserens minne i tilfelle noen trenger dem.

ID=id
Nødvendig for å organisere interaksjon med andre objekter som har en identifikator. Det kan også brukes i et URL-adresseringsskjema (det vil si at det kan vises etter "#"-tegnet i en URL).
Du kan lage så mange tagger du vil med samme CLASSID-verdi, men ID-verdiene deres må være forskjellige.

NAVN=id
Et valgfritt attributt som kan brukes når du utarbeider et HTML-skjema (for dette må taggen være inne i et tag-par ... ). Dataene som sendes vil inneholde informasjonen som nettleseren mottar fra objektet.

FORMER
Dette tomme attributtet gjør det mulig, innenfor vinduet som er okkupert av objektet i nettleserområdet, å velge flere underområder og merke dem som ekstra URL-lenker (en slags hotspots). Koordinatene til disse regionene og URL-ene til lenker for dem spesifiseres ved hjelp av tagger med spesielle tilleggsattributter, som må være plassert mellom OG som tilsvarer den.

I denne leksjonen vil vi lære om taggen. Hovedformålet er å bygge inn noen objekter i en HTML-side som nettleseren ikke kan gjenkjenne. Det kan for eksempel være et flash-spill, bilder, lyd, video, java-applets, ActiveX-elementer, PDF.

HTML-tagsyntaks

... [] ...

I attributtdelen er det veldig viktige parametere for driften av objektet (vi vil se på betydningen deres med eksempler nedenfor). Dessuten er det bare to obligatoriske: type og data . Mellom lukkings- og åpningsobjekt-taggene kan du sette parametere for det tilkoblede objektet (hvis det selvfølgelig er nødvendig) via .

Tag attributter 1. Juster

Juster - er ansvarlig for å justere objektet i forhold til andre sideelementer.

For eksempel

VALUE kan ha følgende verdier:

• absmiddle - juster til midten av gjeldende linje
• grunnlinje , midt - justering til grunnlinjen til gjeldende linje
• bunn (standard) - justerer bunnkanten av objektet med den omkringliggende teksten
• venstre - objektplassering til venstre
• høyre - objektplassering til høyre
• topp - juster til det høyeste elementet på gjeldende linje

2.Klassid

Classid - forteller nettleseren hvilket program, plugin eller applet som skal lastes. Dette programmet vil jobbe videre med objektet

For eksempel

I stedet for en URL kan du skrive enten en absolutt eller en relativ adresse.

3. Data

Data er det viktigste argumentet fordi det spesifiserer adressen til objektet.

For eksempel

Objektadressen spesifiseres avhengig av om vi spesifiserte kodebase. Hvis kodebase ikke er spesifisert, spesifiseres objektadressen i forhold til den delen av katalogen vi befinner oss i. Jeg vil anbefale å spesifisere den fullstendige adressen til objektet.

4. Høyde og bredde

Høyde og bredde - still inn henholdsvis høyde og bredde på objektet. Kan spesifiseres både i piksler og prosenter. Hvis vi setter det som en prosentandel, beregnes verdiene basert på det tillatte området.

For eksempel

5.Type

Type - definerer MIME-typen til dataene som er spesifisert i dataattributtet. Det er nødvendig for nettleseren å forberede de nødvendige ressursene. Oftest er verdien nøyaktig "applikasjon/x-shockwave-flash".

Hvis nettleseren ikke støtter objekter (dette skjer ofte hvis Adobe Flash Player ikke er installert), kan du inne i taggen spesifisere tekst som vil informere brukeren om at det er umulig å laste objektet.

For eksempel

Beklager, objektet kan ikke vises. Merknad 1

IE-nettleseren forstår kanskje ikke dataverdien riktig, så du bør spesifisere filadressen på nytt i param-taggene:

Eksempel: klokke ved hjelp av objekt

Ved å bruke objektet kan du enkelt vise multimedieobjekter og -elementer. Det enkleste og mest åpenbare eksemplet er en klokke.

Demoen viser broen mellom 2D-grafikk i HTML5 og ekte 3D (ved bruk av WebGL). Hensikten med denne artikkelen er å vise hvordan man tegner 3D-objekter ved hjelp av et polygonalt nett. Et polygonalt nett er en samling av hjørner, kanter og flater som definerer formen til polyedriske objekter i 3D data-grafikk og solid modellering.

Enkle 3D-objekter

Fasaden består av trekanter, firkanter eller andre enkle polygoner. For å demonstrere dette forberedte vi enkle 3D-objekter - en kube og polyedriske kuler (med et variabelt antall ansikter).

Tegn 3D-objekter Trinn 1: HTML

Som vanlig (for alle lerretsbaserte demoer) har vi en veldig enkel HTML-oppmerking(med ett objekt inni, lerret):

Wireframe 3D-objekter i HTML5 Bruk opp/ned-knappene for å kontrollere objektgjennomsiktighet

Henter objektinitialisering, se:

//var obj = ny kube(); //var obj = ny sfære(6); var obj = ny sfære(16);

Dette betyr at hvis vi trenger å vise en kube, må du fjerne kommentaren til den første linjen, hvis du vil vise en kule med 6 ansikter, må du velge det andre alternativet.

Trinn 2. JS

Det er tre JavaScript-filer (main.js, meshes.js og transform.js), vi publiserer to av dem, den tredje (transform.js) inneholder kun kalkulasjonsfunksjoner knyttet til rotasjon, skalering og prosjektobjekter. Så la oss se på den første JavaScript-koden:

js/meshes.js // Få en tilfeldig fargefunksjon 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); }

Helt i begynnelsen må vi forberede alle punktene og fasaden til objektene våre. Det er 2 funksjoner: kube (som genererer innledende matriser for et enkelt kubeobjekt) og kuler (for å generere en kule). Det er mye vanskeligere å beregne alle punktene og ansiktene for en polyedrisk sfære. Når vi har alle disse punktene og flatene, må vi beregne andre parametere (som avstand, absolutt sentrum og tre akser).

// Interne variabler var canvas, ctx; var vAlfa = 0,5; var vShiftX = vShiftY = 0; var avstand = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Initialiseringsfunksjon sceneInit() ( // Klargjøring av lerretet og objektkonteksten canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. høyde / 2; // Startskala og translasjonsskalaObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Koble til hendelsen behandlerdokument. onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Main loop setInterval(drawScene, 25); ) // Hendelsesbehandler OnKeyDown funksjon handleKeydown(e) ( kCode = ((e.which) || (e.keyCode) )); switch (kCode) ( tilfelle 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Ned-tast ) ) // OnMouseMove hendelsesbehandler funksjon 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.avstander[f]]; ) aFaceTriangles = (ansiktVertex:obj.faces[i], faceColor:obj.colors[i], avstand:max); ) aFaceTriangles.sort(sortByDistance); // Forbered en matrise med predikerte punkter 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; } }

Når siden er lastet inn, gjør vi hovedinitieringen (sceneInit-funksjonen). Vi lager et lerret og objektkontekst, noe som betyr at vi utfører den innledende skalaen og oversetter objektene våre som vi laget helt i begynnelsen (en kube eller en ball). Vi knytter deretter hendelsesbehandlere til OnKeyDown og OnMouseMove og setter en tidtaker for å gjengi hovedscenen vår (DrawScene-funksjonen). Ikke glem at vi kan endre globalAlpha-parametrene ved å trykke på Opp/Ned-tastene.