Senaste uppdateringen: 28.04.2016

CSS tillhandahåller elementpositioneringsmöjligheter, vilket innebär att vi kan placera ett element på en specifik plats på sidan.

Den huvudsakliga egenskapen som styr positionering i CSS är positionsegenskapen. Den här egenskapen kan ha ett av följande värden:

statisk : standardelementpositionering, standardvärde

absolut: elementet är placerat i förhållande till containerelementets gränser om dess positionsegenskap inte är statisk

relativ : Elementet är placerat relativt sin standardposition. Vanligtvis är huvudsyftet med relativ positionering inte att flytta ett element, utan att etablera en ny ankarpunkt för den absoluta positioneringen av dess kapslade element

fix : elementet är placerat i förhållande till webbläsarfönstret, detta låter dig skapa fasta element som inte ändrar position när de rullas

Du bör inte samtidigt tillämpa float-egenskapen och någon annan positioneringstyp än statisk (det vill säga standardtypen) på ett element.

Absolut positionering

Webbläsarens visningsområde har en övre, nedre, högra och vänstra kant. Var och en av dessa fyra kanter har en motsvarande CSS-egenskap: vänster, höger, topp och botten. Värdena för dessa egenskaper anges i pixlar, ems eller procent. Det är inte nödvändigt att ställa in värden för alla fyra sidorna. Som regel ställs bara två värden in - indraget från den övre kantens topp och indraget från vänsterkanten till vänster.

Blocklayout i HTML5 .header (position: absolut; vänster: 100px; topp: 50px; bredd: 430px; höjd: 100px; bakgrundsfärg: rgba(128, 0, 0, 0.5); )

HEJ VÄRLDEN

Här är ett div-element med absolut positionering kommer att vara 100 pixlar till vänster om visningsportens kant och 50 från botten.

Det är inte så viktigt att det efter detta div-element finns några andra element. Detta div-block kommer i alla fall att vara placerat relativt gränserna för webbläsarens visningsport.

Om ett element med absolut positionering finns i en annan behållare, som i sin tur har ett positionsegenskapsvärde som inte är lika med static , så är elementet placerat i förhållande till behållarens gränser:

Positionering i HTML5 .outer (position: absolut; vänster: 80px; topp: 40px; bredd: 430px; höjd: 100px; kant: 1px fast #ccc; ) .inner( position: absolut; vänster: 80px; topp: 40px; bredd : 50px; höjd: 50px; bakgrundsfärg: rgba(128, 0, 0, 0.5); )

Relativ positionering

Relativ positionering anges också med hjälp av det relativa värdet. För att specificera den specifika positionen till vilken elementet flyttas, används samma egenskaper för topp, vänster, höger, botten:

Positionering i HTML5 .outer (position: relativ; vänster: 80px; topp: 40px; bredd: 300px; höjd: 100px; kant: 1px fast #ccc; ) .inner( position: absolut; vänster: 80px; topp: 40px; bredd : 50px; höjd: 50px; bakgrundsfärg: rgba(128, 0, 0, 0.5); )

z-index egenskap

Som standard, när två element har samma kantlinje, visas det element som senast definierades i HTML-uppmärkningen ovanpå den andra. Men med egenskapen z-index kan du ändra ordningen på element när de överlagras. Fastigheten tar ett nummer som sitt värde. Element med ett större z-indexvärde visas ovanpå element med ett mindre z-indexvärde.

Till exempel:

Positionering i 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: absolut; topp: 20px; vänster:50px; bredd: 80px; höjd: 80px; bakgrundsfärg: röd; ) .blueBlock( position: absolut; topp: 80px; vänster: 80px; bredd: 80px ; höjd: 80px; bakgrundsfärg: blå;)

Låt oss nu lägga till en ny regel till redBlock-blockstilen:

RedBlock( z-index: 100; position: absolut; topp: 20px; vänster:50px; bredd: 80px; höjd: 80px; bakgrundsfärg: röd; )

Här är z-indexet 100. Men det behöver inte vara talet 100. Eftersom det andra blocket har ett odefinierat z-index och faktiskt är noll, kan vi för redBlock ställa in z-index-egenskapen till vilket värde som helst som är större än noll.

Och nu kommer det första blocket att överlappa det andra, och inte vice versa, som var fallet i början.

HTML-taggen används för att bädda in ett objekt i ett HTML-dokument. Använd den här taggen för att bädda in multimedia på dina webbsidor.

Händelsehanterarens innehållsattribut

Händelsehanterarens innehållsattribut aktivera dig för att anropa ett skript från din HTML. Skriptet anropas när en viss "händelse" inträffar. Varje händelsehanterares innehållsattribut hanterar en annan händelse.

Här är standardinnehållsattributen för HTML 5-händelsehanteraren.

• avbryta
• Avbryt
• på oskärpa
• oncanplay
• oncanplaythrough
• vid förändring
• onclick
• påkontextmenyn
• ondblklick
• pådrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• varaktighet förändring
• en tömd
• slutade
• ett fel
• på fokus
• på formändring
• onforminput
• oningång
• onogiltig
• onkeydown
• onkeypress
• onkeyup
• ladda
• laddade data
• laddad metadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• på musen över
• onmouseup
• på mushjulet
• paus
• på spel
• på att spela
• på framsteg
• på kursbyte
• redo att byta tillstånd
• oncroll
• sökte
• sökande
• vårt urval
• på show
• installerat
• skicka in
• onsuspend
• uppdatering i tid
• på volymändring
• väntar

För en fullständig förklaring av dessa attribut, se.

Låt oss säga några fler ord om att registrera ActiveX-komponenter. Vanligtvis registrerar BASIC alla ActiveX-komponenter oberoende när de skapas. Registrering består av att tilldela en speciell unik identifierare CLSID till ActiveX-komponenten och mata in den i registret Windows-databas Register över flera poster som kännetecknar komponentens egenskaper och dess placering. Vi har redan pratat lite om att registrera program i avsnitten om COM och DCOM. Angående distribution och spridning av utvecklade ActiveX-komponenter över lokalt nätverk eller Internet, då är detta ett separat ämne och kommer att diskuteras nedan.

Ris. 1.11. Använda en förbyggd ActiveX-kontroll i webbläsaren

Placera ActiveX-kontroller på webbsidor
ActiveX-kontroller är kopplade till HTML-dokument med taggen, som föreslås i en av W3-konsortiets arbetsstandarder. Syftet med denna tagg (i Netscape Navigator) är att integrera främmande element i HTML. Här är den fullständiga taggsyntaxen:

Vissa av de listade attributen liknar attributen för den välkända taggen , så vi kommer inte att överväga dem här.

Här är en beskrivning av taggspecifika attribut:
CIASSID=URL
Detta attribut anger klassidentifieraren för det kontrollelement som anropas. Varje OCX-modul, och därför varje ActiveX-kontroll, måste ha sin egen unika klassidentifierare. Det förkortas vanligtvis CLSID och är en ganska lång sträng av hexadecimala siffror - till exempel "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Men varför finns det "URL" i syntaxen för detta attribut? Faktum är att taggen kan användas för att ansluta inte bara ActiveX-kontroller, utan även andra programobjekt, inklusive de som inte känns igen av "klassidentifierare", utan på något annat sätt.
För att säkerställa att webbläsaren bara hanterar en syntax ställs CLSID in enligt reglerna för URL:en: den vänstra sidan innehåller ordet "clsid", och den högra sidan innehåller den faktiska klassidentifieraren.
Exempel: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Det här attributet anger webbadressen (den här gången en riktig, med prefixet "http:" eller "ftp:"). Du kan lista flera webbadresser i det här attributet om en av servrarna av någon anledning inte är tillgänglig.
Samma attribut låter dig ange det versionsnummer som krävs för ActiveX-kontroller.
Till exempel, om du skriver CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
sedan ett försök att få denna modul ActiveX från Internet försöks inte bara när det inte finns på användarens dator, utan också när kontrollelementet är installerat, men har mer gammalt nummer version än den som anges i CODEBASE-attributet (I vårt exempel krävs en version som inte är äldre än 4.72.0.1171).

CODETURE=MIME-typ
TYPE=MIME-typ
Dessa två valfria attribut låter dig specificera typerna (i termer av MIME-standarden) för de filer som refereras till av attributen CLASSID (CODETYPE) och DATA (TYPE-attribut). För ActiveX-kontroller måste CODETYPE-attributet, om det finns, ställas in på "application/x-oleobject".

DATA=URL
Det här attributet anger platsen för datafilen som kan behövas för att denna kontroll ska fungera. För vissa ActiveX-kontroller krävs detta attribut. Med hjälp av DATA-attributet kan du dessutom inkludera filen som innehåller kontrollelementet direkt i HTML-filen i kodad form.

DEKLARERA
Vanligtvis är detta uttalande tomt. Den kan användas för att deklarera ett objekt när det inte är implementerat, men är bara en parameter för ett annat objekt. Samtidigt skrivs hela uppsättningen objektattribut till webbläsarens minne om någon skulle behöva dem.

ID=id
Behövs för att organisera interaktion med andra objekt som har en identifierare. Det kan också användas i ett URL-adresseringsschema (det vill säga att det kan visas efter "#"-tecknet i en URL).
Du kan skapa hur många taggar du vill med samma CLASSID-värde, men deras ID-värden måste vara olika.

NAMN=id
Ett valfritt attribut som kan användas när du förbereder ett HTML-formulär (för detta måste taggen vara inuti ett taggpar ... ). Data som skickas kommer att innehålla informationen som webbläsaren tar emot från objektet.

FORMER
Detta tomma attribut gör det möjligt att, inom fönstret som upptas av objektet i webbläsarutrymmet, välja ytterligare delområden och markera dem som ytterligare URL-länkar (ett slags hotspots). Koordinaterna för dessa regioner och URL:erna för länkar för dem specificeras med taggar med speciella ytterligare attribut, som måste placeras mellan AND som motsvarar den.

I den här lektionen kommer vi att lära oss om taggen. Dess huvudsakliga syfte är att bädda in några objekt i en HTML-sida som webbläsaren inte kan känna igen. Det kan till exempel vara ett flashspel, bilder, ljud, video, java-applets, activeX-element, PDF.

HTML-taggsyntax

... [] ...

I attributsektionen finns det mycket viktiga parametrar för driften av objektet (vi kommer att titta på deras betydelser med exempel nedan). Dessutom finns det bara två obligatoriska: typ och data . Mellan stängnings- och öppningsobjekttaggarna kan du ställa in parametrar för det anslutna objektet (om de så klart behövs) via .

Taggattribut 1. Justera

Justera - är ansvarig för att justera objektet i förhållande till andra sidelement.

Till exempel

VALUE kan ha följande värden:

• absmiddle - justera till mitten av den aktuella linjen
• baslinje , mitten - anpassning till baslinjen för den aktuella linjen
• botten (standard) - justerar den nedre kanten av objektet med den omgivande texten
• vänster - objektets placering till vänster
• höger - objektets plats till höger
• topp - justera till det högsta elementet på den aktuella linjen

2.Klassid

Classid - talar om för webbläsaren vilket program, plugin eller applet som ska laddas. Detta program kommer att arbeta vidare med objektet

Till exempel

Istället för en URL kan du skriva antingen en absolut eller en relativ adress.

3. Data

Data är det viktigaste argumentet eftersom det anger objektets adress.

Till exempel

Objektadressen anges beroende på om vi har angett kodbas. Om kodbas inte specificeras, så anges objektadressen i förhållande till den del av katalogen där vi finns. Jag skulle rekommendera att ange objektets fullständiga adress.

4. Höjd och bredd

Höjd och bredd - ställ in höjd respektive bredd på objektet. Kan anges både i pixlar och i procent. Om vi ​​ställer in det som en procentsats beräknas värdena baserat på det tillåtna området.

Till exempel

5. Typ

Typ - definierar MIME-typen för data som anges i dataattributet. Det behövs för att webbläsaren ska förbereda de nödvändiga resurserna. Oftast är dess värde exakt "applikation/x-shockwave-flash".

Om webbläsaren inte stöder objekt (detta händer ofta om Adobe Flash Player inte är installerad), kan du inuti taggen ange text som informerar användaren om att det är omöjligt att ladda objektet.

Till exempel

Tyvärr kan objektet inte visas. Note 1

IE-webbläsaren kanske inte förstår datavärdet korrekt, så du bör ange filadressen igen i param-taggarna:

Exempel: klocka med hjälp av objekt

Med hjälp av objektet kan du enkelt visa multimediaobjekt och element. Det enklaste och mest uppenbara exemplet är en klocka.

Demon visar bryggan mellan 2D-grafik i HTML5 och äkta 3D (med WebGL). Syftet med den här artikeln är att visa hur man ritar 3D-objekt med hjälp av ett polygonalt nät. Ett polygonalt nät är en samling av hörn, kanter och ytor som definierar formen på polyedriska objekt i 3D Datorgrafik och solid modellering.

Enkla 3D-objekt

Fasaden består av trianglar, fyrkanter eller andra enkla polygoner. För att demonstrera detta förberedde vi enkla 3D-objekt - en kub och polyedriska sfärer (med ett varierande antal ansikten).

Rita 3D-objekt Steg 1: HTML

Som vanligt (för alla canvasbaserade demos) har vi en väldigt enkel HTML-uppmärkning(med ett föremål inuti, canvas):

Wireframe 3D-objekt i HTML5 Använd upp-/nedknapparna för att styra objekttransparens

Hämtar objektinitiering, se:

//var obj = ny kub(); //var obj = ny sfär(6); var obj = ny sfär(16);

Det betyder att om vi behöver visa en kub måste du avkommentera den första raden, om du vill visa en sfär med 6 ansikten måste du välja det andra alternativet.

Steg 2. JS

Det finns tre JavaScript-filer (main.js, meshes.js och transform.js), vi publicerar två av dem, den tredje (transform.js) innehåller endast beräkningsfunktioner relaterade till rotation, skalning och projektobjekt. Så låt oss titta på den första JavaScript-koden:

js/meshes.js // Få en slumpmässig färgfunktion 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); }

Allra i början måste vi förbereda alla punkter och fasaden på våra föremål. Det finns 2 funktioner: kub (som genererar initiala arrayer för ett enkelt kubobjekt) och sfärer (för att generera en sfär). Det är mycket svårare att beräkna alla punkter och ytor för en polyedrisk sfär. När vi väl har alla dessa punkter och ytor måste vi beräkna andra parametrar (som avstånd, absolut centrum och tre axlar).

// Interna variabler var canvas, ctx; var vAlfa = 0,5; var vShiftX = vShiftY = 0; var avstånd = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Initieringsfunktion sceneInit() ( // Förbereder duk- och objektkontextens canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. höjd / 2; // Initial skala och översättningsskalaObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Anslut till händelsen hanterardokument. onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Main loop setInterval(drawScene, 25); ) // Händelsehanterare OnKeyDown funktion handleKeydown(e) ( kCode = ((e.which) || (e.keyCode) )); switch (kCode) (fall 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // nedknapp ) ) // OnMouseMove händelsehanterare funktion 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.avstånd[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], avstånd:max); ) aFaceTriangles.sort(sortByDistance); // Förbered en array med predikterade punkter var aPrjPoints = new Array(); för (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 sidan är laddad gör vi huvudinitieringen (sceneInit-funktionen). Vi skapar en duk- och objektkontext, vilket innebär att vi utför den initiala skalan och översätter våra objekt som vi skapade i början (en kub eller en boll). Vi kopplar sedan händelsehanterare till OnKeyDown och OnMouseMove och ställer in en timer för att återge vår huvudscen (DrawScene-funktionen). Glöm inte att vi kan ändra globalAlpha-parametrarna genom att trycka på Upp/Ner-knapparna.