Веб-баракчанын элементтерин айлантуунун өтө жөнөкөй жолу - бир нече CSS стилин колдонсоңуз болот. Бул сабак менен таанышуу сизге баракчанын ачылбаган желдеткичин, чачырап кеткен кулап калган жалбырактарды же стилдүү сүрөттөрдү альбомго жайгаштырууга мүмкүндүк берет. Сабакта фотоальбомду ишке ашыруунун мисалы келтирилген жана бардык заманбап браузерлер үчүн чечим эске алынган.
Ал зарыл
450px чейин төрт сүрөт
Нускамалар
1 кадам
Бул мисал бурулган сүрөттөр менен саркеч альбом баракчасын түзүүгө багытталат.
Мен алдын ала сүрөттөрдү (туурасы 400px) даректери менен даярдадым:
Келечекте сүрөттөргө алардын ысымдарына жараша ID тапшырабыз.
2-кадам
Биринчиден, биз div альбомун колдонуп, сүрөт альбомубузга блок даярдайбыз жана ага img тегин колдонуп сүрөттөрдү кошобуз (ар бир сүрөт өзүнүн div тегинде камтылышы керек), мисалы:
Блогго идентификатор дайындагандыгыбызды эске алыңыз. Идентификатор боюнча, биз CSS колдонуп блокко кайрыла алабыз.
3-кадам
Андан кийин, CSS стилдерин блокко орнотушуңуз керек. Стилдердин тизмеси: "позиция: салыштырмалуу;" - келип чыгышын биздин блоктун жогорку сол бурчунан орнотот; "margin: 50px auto;" - "50px" блогубуздун чегинүүсүн барактын калган бөлүгүнүн жогору жана ылдый жагына орнотот, ошондой эле автоматтык чегинүүнү оңго жана солго орнотуп, ошону менен биздин блокту борборго тегиздейт; "туурасы: 900px; бийиктиги: 650px;" - туурасын 900px, ал эми бийиктигин 650px кылып орнотот.
Көрсөтүлгөн стилдердин тизмеси мындай жол менен жайгаштырылышы керек:
#photo_page {
кызмат: салыштырмалуу;
маржа: 0 авто;
туурасы: 900px;
бийиктиги: 650px;
текстке тегиздөө: борбор;
}
"#Photo_page" колдонулушуна көңүл буруңуз - биз бөгөт коюучу IDге ушундайча кайрылабыз.
4-кадам
Эми биз photo_page блогунун ичиндеги ар бир сүрөт үчүн жалпы стилдерди белгилейбиз. Алар тегеректелген бурчтар, боз түстөгү чек ара, ак түстөгү фон, төшөмө жана көлөкө.
Бул сүрөткө эффект жаратат:
#photo_page img {
чек-радиусу: 7px;
чек: 1px катуу боз;
фон: #ffffff;
толтуруу: 10px;
көлөкө-көлөкө: 2px 2px 10px # 697898;
}
"#Photo_page img" колдонулушуна көңүл буруңуз - бул photo_page блогундагы бардык сүрөттөргө тиешелүү болот
5-кадам
Ошондой эле кыска стилди кошуу керек:
#photo_page div {
калкуу: сол;
}
Photo_page блогунун сол жагындагы бардык блокторду кичирейтет.
6-кадам
Азыр сабактын ортоңку этабы аяктады. Эгерде сиздин иш скриншоттогу сүрөттөлүшкө окшош болсо, анда сиз ката кетирген эмессиз жана кийинки кадамга өтсөңүз болот.
7-кадам
Эми жайгаштырылган сүрөттөрдү айлантууга бурулдук. Бул үчүн бизге трансформация стили керек. Азыркы учурда, ал таза түрүндө колдонулбайт, бирок башында ар бир браузердин префикси менен гана мындай болот:
-webkit-өзгөртүү: айландыруу (мааниси);
-moz-өзгөртүү: айландыруу (мааниси);
-o-өзгөртүү: айландыруу (мааниси);
Бул браузерлердин ротация стили: Google Chrome, Mazilla, Opera (тиешелүүлүгүнө жараша). "Нарк" деген сөздүн ордуна, аягына deg деген сан киргизебиз, мындайча:
90дег - сааттын жебеси боюнча 90 градус айлануу.
-5deg - сааттын жебесине каршы -5 градус айлануу.
Жана башкалар.
8-кадам
Photo_1 сүрөтүнүн стили:
# фото_1 {
-webkit-өзгөртүү: айландыруу (5дег);
-moz-transform: rotate (5deg);
-өзгөртүү: айлануу (5дег);
}
Биринчи сүрөт 5 градуска бурулган.
9-кадам
Photo_2 үчүн стиль:
# фото_2 {
-webkit-өзгөртүү: айландыруу (-3deg);
-moz-transform: rotate (-3deg);
-o-transform: rotate (-3deg);
}
Экинчи сүрөт -3 градуска бурулган.
10-кадам
Photo_3 сүрөтүнүн стили:
# фото_3 {
-webkit-өзгөртүү: айландыруу (-2deg);
-moz-transform: rotate (-2deg);
-o-transform: rotate (-2deg);
}
Үчүнчү сүрөт -2 градуска бурулган.
11-кадам
Photo_4 сүрөтүнүн стили:
# photo_4 {
-webkit-өзгөртүү: айлантуу (8deg);
-moz-transform: rotate (8deg);
-o-өзгөртүү: айлануу (8deg);
}
Төртүнчү сүрөт 8 градуска бурулган.
12-кадам
Келгиле, сүрөттөрдүн абалын кантип оңдой алаарыңызды карап көрөлү. Мисалы, сиз биринчи сүрөттү жогору жактан 20px жана сол жактагы 10px менен жылдыргыңыз келет. Мындай учурда, маржа стилин колдонуу керек. Биздин иш үчүн аны колдонуунун туура жолу:
# фото_1 {
маржа: 20px -10px -20px 10px;
-webkit-өзгөртүү: айлануу (5дег);
-moz-transform: rotate (5deg);
-o-өзгөртүү: айлануу (5deg);
}
Стилдин биринчи мааниси жогорку маржа экендигин эске алыңыз; экинчиси - оң жактагы чегинүү; үчүнчүсү - төмөндөн чегинүү; төртүнчү - сол чегинүү.
Маанилүү: биздин учурда, төмөнкү маржа жогорку маржанын терс маанисине барабар. Эгерде сиз баракчаңыздагы сүрөттүн астынан боштук көрсөңүз, анда сүрөттүн ылдый жагын ого бетер терс кылып түшүрүңүз.
13-кадам
Жумуш бүттү, скриншот берем (12-кадамда сүрөттөлгөн биринчи сүрөттүн чегинүүсүнүн өзгөрүшүн эске алуу менен).
Сизге ылайык келбеген сүрөттөргө чегинүү стилин кошуңуз.
