Uznirstošie vai izlecošie logi kļūst arvien populārāki internetā. Vai vienkāršāk - uznirstošie attēli. Daudziem vietņu īpašniekiem tie bieži ir jāveido reklāmas nolūkos, taču ne visi zina to izveides algoritmu.
Tas ir nepieciešams
- - HTML redaktors;
- - piezīmju grāmatiņa;
- - mitināšana.
Instrukcijas
1. solis
Izveidojiet vai atveriet jaunu tīmekļa lapu HTML vai teksta redaktorā. Šim nolūkam varat izmantot tādas populāras programmas kā Dreamweaver, Expression Web un citas. Ja jūs tikai veicat pirmos soļus HTML programmēšanas valodā, izmantojiet parasto "notepad".
2. solis
Starp tagiem "head" un "/ head" ielīmējiet šo kodu:
.thumbnail {position: relatīvais; z-indekss: 0;}
.thumbnail: hover {fona krāsa: caurspīdīga; z-indekss: 50;}
.thumbnail span {/ * CSS palielinātam attēlam * / position: absolūts; fona krāsa: gaiši dzeltena; polsterējums: 5px; pa kreisi: -1000 pikseļi; apmale: 1px ar pārtrauktu pelēku punktu redzamība: slēpta; krāsa: melna; teksta noformēšana: nav;}
.thumbnail span img {/ * CSS palielinātam attēlam * / apmales platums: 0; polsterējums: 2px;}
.thumbnail: hover span {/ * CSS, lai palielinātu attēlu uz hover * / redzamība: redzams; augšdaļa: 0; pa kreisi: 65 pikseļi; / * pozīcija, kur palielinātajam attēlam jābūt horizontāli nobīdītam * /}
3. solis
Pielāgojiet uznirstošā attēla horizontālo nobīdi, mainot vērtību koda pēdējā rindiņā. Piešķiriet vietu starp tagiem "body" un "/ body" vietās, kur vēlaties, lai attēls tiktu parādīts tīmekļa lapā. Pēc tam nokopējiet un ielīmējiet šo kodu:
Teksta nosaukuma piemērs
Teksta nosaukuma piemērs"
4. solis
Nomainiet “folder / largepci1.jpg” ar uznirstošajam fotoattēlam izmantoto failu. Dariet to pašu ar otro koda bloku. Mainiet tajā esošo rindiņu "Teksta nosaukuma piemērs" uz uznirstošajā attēlā ierakstīto. Mainiet arī koda augstuma un platuma vērtības, lai pielāgotu uznirstošā attēla lielumu. Izveidojiet papildu koda blokus, lai pievienotu citas skices. Pēc nepieciešamības HTML dokumentā ievadiet citus atribūtus, tagus un tekstu. Saglabājiet HTML failu un pēc tam augšupielādējiet to savā tīmekļa serverī.
