Er zijn twee soorten site-indeling: tabel en blok. En hoewel de eerste handiger is voor het maken van eenvoudige html-pagina's, is de laatste ideaal als u afzonderlijke elementen in de vorm van blokken moet toevoegen.
instructies:
Stap 1
Er zijn twee technieken waarmee u zelf een blokontwerp kunt ontwikkelen: door trapsgewijze stylesheets in een document in te bedden of door ze vanaf een externe bron te verbinden. Beide geven hetzelfde resultaat, dus er is geen fundamenteel verschil tussen hen. Plak in het eerste geval de volgende code ergens in het style.css-bestand:
.blok1 {
}
Block1 - de naam van het blok, je kunt een ander schrijven. Specificeer tussen de accolades de parameters in de volgende notatie: attribuutnaam> dubbele punt> waarde> puntkomma (inclusief geplaatst vóór de accolade). De volgende elementen worden vaak gebruikt:
- breedte - breedte (500px, 100%, enz.);
- hoogte - hoogte (200px, 25%, enz.);
- achtergrond - achtergrondkleur (geel, rood, # 000000);
- opvulling - opvulling rond de inhoud in het blok (0px, 20%);
- marge - externe marges van het blok (15px, 40%);
- rand - frame (rand: effen 0px zwart;);
- zwevend - uitlijning (links, rechts);
- border-radius - afronding van hoeken (border-radius: 10px;).
Stap 2
Voeg bij het tweede gebruik van CSS de stijl toe tussen de en tags:
.blok1 {
}
En voeg de gewenste parameters toe.
Stap 3
Plaats het blok op de gewenste plaats op de site met behulp van de opdracht:
Blok 1
Bewaar en ververs de pagina, deze zou moeten verschijnen. Houd er rekening mee dat de hoogte-uitlijning kan variëren, afhankelijk van hoe vol de inhoud is. Als u bijvoorbeeld 300px instelt, maar slechts één regel tekst hebt geschreven, wordt deze niet volledig weergegeven. Dit kan bijvoorbeeld worden gecorrigeerd met behulp van een tabel met de vereiste parameters, die in het blok moet worden geplaatst, d.w.z. tussen labels en. En zodat de randen niet zichtbaar zijn, voegt u het attribuut in
