Kako Narediti Gumijasto Kapico

Kazalo:

Kako Narediti Gumijasto Kapico
Kako Narediti Gumijasto Kapico

Video: Kako Narediti Gumijasto Kapico

Video: Kako Narediti Gumijasto Kapico
Video: Как правильно работать с силиконом? Делаем аккуратный шов! Распространенные ошибки! 2024, November
Anonim

Zgornji del spletnega mesta, ki se imenuje tudi glava, običajno odraža zadevo vira in lahko vsebuje navigacijsko vrstico. Če ima glava spletnega mesta določeno širino, bo ta del spletnega mesta na zaslonih uporabnikov z različnimi ločljivostmi videti drugače. Da bo glava spletnega mesta videti enako na katerem koli zaslonu, je treba nekatere odseke raztegniti ali skrčiti, odvisno od velikosti zaslona. Takšen gumijasti pokrov je mogoče izdelati, ne da bi določil njegovo širino v slikovnih pikah.

Kako narediti gumijasto kapico
Kako narediti gumijasto kapico

Potrebno

imeti svojo spletno stran

Navodila

Korak 1

Če želite narediti gumijasto kapico, jo najprej narišite v Photoshopu. Nato ločite 3 dele slike: 2 strani in sredino. Ti deli naj bodo široki približno 10–20 slikovnih pik in približno višine glave, ki jo želite. Shranite vsak element tako, da boste imeli 3 različne datoteke: 1.gif, 2.gif, 3.gif. Pošljite te slike na spletno mesto.

2. korak

Nato ustvarite tabelo, ki bo vsebovala elemente na vrhu spletnega mesta. Če želite to narediti, v kodo HTML zapišite:

Tabela s širino 100% se bo raztegnila ali skrčila, odvisno od uporabnikove velikosti zaslona.

3. korak

V tabeli naredite vrstico, v katero celico postavite levo stran glave 1

4. korak

Ustvarite srednji odsek glave spletnega mesta, ki je sestavljen iz ponavljajoče se slike 2.gif. Če želite to narediti, v kodo CSS zapišite naslednje:

.header {background-image: url ('images / 2.gif');}

5. korak

Zdaj v vrstici tabele ustvarite drugo celico in vanjo položite srednji element vrha spletnega mesta, tako da pokažete na glavo njegovega imena v kodi CSS:

Ime strani

>

6. korak

Ko ste ustvarili tretjo celico v vrstici tabele, postavite desno stran glave 3

Ime strani

Priporočena: