Pop-up կամ pop-under պատուհանները գնալով ավելի տարածված են ինտերնետում: Կամ, ավելի պարզ, pop-up նկարներ: Կայքերի շատ տերեր հաճախ ստիպված են դրանք պատրաստել գովազդային նպատակներով, բայց ոչ բոլորն էլ գիտեն դրանց ստեղծման ալգորիթմը:
Դա անհրաժեշտ է
- - HTML խմբագիր;
- - տետր;
- - հոստինգ
Հրահանգներ
Քայլ 1
Ստեղծեք կամ բացեք նոր վեբ էջ HTML- ում կամ տեքստի խմբագիր: Այդ նպատակով կարող եք օգտագործել հանրաճանաչ ծրագրեր, ինչպիսիք են Dreamweaver- ը, Expression Web- ը և այլն: Եթե դուք պարզապես կատարում եք ձեր առաջին քայլերը HTML ծրագրավորման լեզվով, օգտագործեք սովորական «նոթատետր»:
Քայլ 2
Կպցրեք հետևյալ կոդը «գլուխ» և «/ գլուխ» պիտակների միջև.
.thumbnail {դիրքը: հարաբերական; z- ինդեքս ՝ 0;}
. մանրապատկերը. սավառն {background-color: transparent; z- ինդեքս ՝ 50;}
.thumbnail span {/ * CSS ընդլայնված պատկերի համար * / դիրքը ՝ բացարձակ; ֆոնային գույն ՝ բաց դեղին; լցոնում ՝ 5 հատ; ձախ ՝ -1000px; եզրագիծ. 1px գծավոր մոխրագույն; տեսանելիությունը `թաքնված; գույնը `սև; տեքստային զարդարանք. ոչ մեկը;}
.thumbnail span img {/ * CSS ՝ ընդլայնված պատկերի համար * / եզրագծի լայնություն ՝ 0; լիցքավորում ՝ 2 հատ;}
.thumbnail: hover span {/ * CSS ՝ hover- ի վրա ընդլայնված պատկերի համար * / տեսանելիությունը ՝ տեսանելի վերև ՝ 0; ձախ: 65px; / * դիրքը, որտեղ ընդլայնված պատկերը պետք է հորիզոնական փոխհատուցվի * /}
Քայլ 3
Կարգավորեք ելնող պատկերի հորիզոնական օֆսեթը `փոփոխելով ծածկագրի վերջին տողի արժեքը: Տեղ հատկացրեք «մարմին» և «/ մարմին» պիտակների միջև, որտեղ ցանկանում եք, որ պատկերը հայտնվի համացանցային էջում: Այնուհետև պատճենեք և տեղադրեք հետևյալ կոդը.
Տեքստի վերնագրի օրինակ
Տեքստի վերնագրի օրինակ »
Քայլ 4
Փոխարինեք «թղթապանակը / largepci1.jpg» - ը ելնող լուսանկարի համար օգտագործվող ֆայլով: Նույնը վարվեք ծածկագրի երկրորդ բլոկի հետ: Դրանում փոխեք «Տեքստի վերնագրի օրինակ» տողը `այն, ինչ պետք է գրված լինի ելնող պատկերում: Փոխարկվող պատկերի չափը կարգավորելու համար փոխեք նաև կոդի բարձրության և լայնության արժեքները: Ստեղծեք ծածկագրի լրացուցիչ բլոկներ ՝ ավելի շատ ուրվագծեր ավելացնելու համար: Անհրաժեշտության դեպքում HTML փաստաթղթում մուտքագրեք այլ հատկանիշներ, պիտակներ և տեքստեր: Պահեք HTML ֆայլը և այն վերբեռնեք ձեր վեբ սերվերին:
