Hur Man Gör En Gummilock

Innehållsförteckning:

Hur Man Gör En Gummilock
Hur Man Gör En Gummilock
Anonim

Den övre delen av webbplatsen, som också kallas rubriken, återspeglar vanligtvis resursens ämne och kan innehålla ett navigeringsfält. Om sidhuvudet har en viss bredd kommer den här delen av webbplatsen att se annorlunda ut på skärmarna för användare med olika upplösningar. För att sidhuvudet ska se likadant ut på vilken skärm som helst, är det nödvändigt att göra några av dess sektioner sträckande eller krympande beroende på skärmens storlek. Ett sådant gummilock kan tillverkas utan att fixera bredden i pixlar.

Hur man gör en gummilock
Hur man gör en gummilock

Nödvändig

ha din egen webbplats

Instruktioner

Steg 1

För att göra en gummilock, rita den först i Photoshop. Separera sedan tre delar av bilden: två sidor och mitten. Dessa bitar bör vara cirka 10-20 pixlar breda och ungefär höjden på rubriken du vill ha. Spara varje element så att du har tre olika filer: 1.gif, 2.gif, 3.gif. Skicka dessa bilder till webbplatsen.

Steg 2

Skapa sedan en tabell som håller elementen högst upp på webbplatsen. För att göra detta, skriv in HTML-koden:

En tabell med en bredd på 100% sträcker sig eller krymper beroende på användarens skärmstorlek.

Steg 3

Gör en rad i tabellen, i vilken cell placerar vänster sida av 1.gif-sidhuvudet:

Steg 4

Skapa en mittdel i sidhuvudet som består av en upprepande 2.gif-bild. För att göra detta, skriv följande i din CSS-kod:

.header {bakgrundsbild: url ('bilder / 2.gif');}

Steg 5

Nu, i en rad i tabellen, skapa en ny cell och placera mittelementet på toppen av webbplatsen i den och peka på dess namnhuvud i CSS-koden:

Webbplatsens namn

>

Steg 6

När du har skapat den tredje cellen i tabellraden placerar du höger sida av 3.gif-sidhuvudet i den här cellen:

Webbplatsens namn

Rekommenderad: