Калкып чыкма сүрөттү кантип жасоого болот

Мазмуну:

Калкып чыкма сүрөттү кантип жасоого болот
Калкып чыкма сүрөттү кантип жасоого болот

Video: Калкып чыкма сүрөттү кантип жасоого болот

Video: Калкып чыкма сүрөттү кантип жасоого болот
Video: Вязание: ОБУЧАЮЩИЙ МАСТЕР КЛАСС для начинающих ажурная кофточка крючком ВАСИЛЬКОВОЕ ПОЛЕ ЧАСТЬ 2 2024, Апрель
Anonim

Калкыма терезе же калкып чыкма терезелер Интернетте барган сайын популярдуу болууда. Же, жөнөкөй эле, калкыма сүрөттөр. Көпчүлүк сайт ээлери аларды жарнама максатында жасоого аргасыз болушат, бирок алардын жасалышынын алгоритмин баары эле биле бербейт.

Калкып чыкма сүрөттү кантип жасоого болот
Калкып чыкма сүрөттү кантип жасоого болот

Ал зарыл

  • - HTML редактору;
  • - дептер;
  • - хостинг.

Нускамалар

1 кадам

HTML же текст редакторунда жаңы веб баракча түзүңүз же ачыңыз. Бул максатта Dreamweaver, Expression Web жана башкалар сыяктуу популярдуу программаларды колдонсоңуз болот. Эгерде сиз HTML программалоо тилинде алгачкы кадамдарды жасап жаткан болсоңуз, анда кадимки "блокнотту" колдонуңуз.

2-кадам

Төмөнкү кодду "head" жана "/ head" тегдеринин ортосуна чаптаңыз:

.thumbnail {абалы: салыштырмалуу; z-индекс: 0;}

.ичкий сүрөт: hover {background-color: transparent; z-индекс: 50;}

.ичкеленген аралыгы {/ * Кеңейтилген сүрөт үчүн CSS * / позициясы: абсолюттук; өң-түс: ачык сары; толтуруу: 5px; солдо: -1000px; чек: 1px кескин боз; көрүнөө: жашырылган; Кара түс; текстти жасалгалоо: none;}

.thumbnail span img {/ * CSS кеңейтилген сүрөт үчүн * / border-width: 0; толтуруу: 2px;}

.thumbnail: hover span {/ * CSS hover * / visibility кеңейтилген сүрөтү үчүн: көрүнүп турат; top: 0; солдо: 65px; / * чоңойтулган сүрөт горизонталдык ордун толтурушу керек болгон абал * /}

3-кадам

Коддун акыркы сабындагы маанини өзгөртүп, калкып чыккан сүрөттүн горизонталдуу жылышын жөндөңүз. Сүрөттүн веб-баракчасында пайда болушун каалаган "body" жана "/ body" тегдеринин аралыгын бөлүп, андан кийин төмөнкү кодду көчүрүп, чаптаңыз:

Текст аталышынын мисалы

Текст аталышынын мисалы"

4-кадам

"Folder / largepci1.jpg" файлын калкып чыккан сүрөт үчүн колдонулган файл менен алмаштырыңыз. Коддун экинчи блогу менен деле ошондой кылыңыз. Андагы "Тексттин аталышынын мисалы" деген сапты калкыма сүрөттө жазылгандай кылып өзгөртүңүз. Ошондой эле калкып чыкма сүрөттүн көлөмүн жөндөө үчүн коддогу бийиктиктин жана тууранын маанилерин өзгөртүңүз. Кошумча эскиздерди кошуу үчүн коддун кошумча блокторун түзүңүз. Зарылдыгына жараша HTML документине башка атрибуттарды, тегдерди жана текстти киргизиңиз. HTML файлын сактап, андан кийин веб-серверге жүктөңүз.

Сунушталууда: