Vad är layouten av blocket? Hur att införa en enda sida på din webbplats på egen hand?

Det finns en önskan att lära sig att göra dina egna sidor sidor? Sedan ska vi ha bemästrat vad blocket layout. Layout nybörjare uppfylla ett antal svårigheter, de har en hel del frågor. Överväga vad som är blockkodning.

Ett viktigt tips

Använd WYSIWYG editor, så allt var tydligare. De som känner HTML väl, arbete i den bärbara datorn, eftersom de förstår allting. Och nybörjare kan dra nytta av program som Frontpage eller till exempel, Dreamweaver.

Olika typer av layout platser

Det finns flera typer av layout:

1. Tabell.
2. Block.
3. Blandat.

Vi är intresserade av blocket layout. Vad skiljer den från bordet? Vid block layout med hjälp av DIV tagg har vissa fördelar:

1. Fyll med utformningen av blocken snabbare.
2. Innehåll som visas block (till skillnad från tabeller) som hämtningen sker. Som bekant kommer dessa tabeller visar endast efter hela tabellen.
3. Kod med div-s lättare att läsa.

Det är inte alla fördelar, som är känd för blocket layout.

Hur man ändrar plats div-block?

Detta kommer att hjälpa oss att flyta - denna egenskap, som är i stånd av följande:

1. Rikta vänster - vänster.
2. Så här justerar höger - höger.
3. Element kvar där han var, kommer han inte att flytta om de får ingen. Detta värde kommer att vara standard.

En annan viktig funktion som vi behöver - klart. Han kan ha 4 värden:

1. För installation under föregående punkt, flytta till höger, blockera - höger.
2. Vänster uppsättningar under föregående element, som flyttas till vänster.
3. Båda - Installation av tidigare förskjutna block.
4. None anger frånvaron av begränsningar för positionen av blocket relativt de element som flyttas.

exempel

Fundera på hur det kommer att se ut ett block layout div. Vi skriver vår kod:

Under koden du se resultatet. Således, på grundval av flera egenskaper kan kontrolleras blockarrangemang som önskas. Gå till nästa ögonblick. Vi har använt text-align: center, för att anpassa varje block för alla webbläsare.

Som ni kan se, är det ganska enkelt blockera layout på webbplatsen. Det är viktigt att studera och öva flera egenskaper som kommer att skapa en mer flexibel struktur av sidorna.

Något viktigare

Det finns en populär funktion som används i layouten - läget används det för positionering.

Värdena för egenskaperna för positioner:

1. Relativ - ställer in läget av elementen i förhållande till sina ursprungliga platser. Ansökan vänster, topp, righ, botten- elementet rör sig i en viss riktning.
2. Statisk - normal visning objekt. Det är ingen mening att använda höger / vänster, upp / ned - det kan leda till någonting.
3. Absolut - absolut positionering elementet.
4. Fast - liknande absolut. Det är bundet till en viss punkt på skärmen, men det ändrar inte sin position, även om sidan vända.

Många layout märkt att när man använder en fast, absolut och relativ positionering av blocken överlagras. Och då intressant att veta vilka av blocken nedan, som ovan. För att besvara denna fråga, måste du z-index egendom. Det förde layoutblock till en ny nivå. Detta gör det möjligt att inte bara för att göra placeringen av planet, men också med hjälp av den tredje axeln Z. Värdet av en sådan egenskap kan vara positiv eller negativ.

Skapa 3 block. Därefter experimentera med absolut positionering.

Som ni kan se, är det lätt att ändra placeringen av blocken. På grundval av det faktum att du nu kan för att göra alla grundläggande blocklayout sidan. Tillämpning av flera egenskaper du kommer att förbättra dina kunskaper.