Labai paprastas būdas pasukti svetainės puslapio elementus - tereikia pritaikyti kelis „css“stilius. Susipažinę su šia pamoka, galėsite į albumo puslapį įdėti išskleistą kortelių ventiliatorių, išbarstytus nukritusius lapus ar stilingas nuotraukas. Pamokoje pateikiamas nuotraukų albumo įgyvendinimo pavyzdys ir atsižvelgiama į visų šiuolaikinių naršyklių sprendimą.
Tai būtina
Keturios nuotraukos iki 450 taškų pločio
Nurodymai
1 žingsnis
Šis pavyzdys bus sutelktas kuriant stilingą albumo puslapį su pasuktomis nuotraukomis.
Iš anksto paruošiau vaizdus (plotis 400 taškų) su adresais:
Ateityje atvaizdams priskirsime ID pagal jų pavadinimus.
2 žingsnis
Pirma, mes paruošime savo nuotraukų albumo bloką naudodami žymę div, taip pat pridėsime nuotraukas prie jo naudodami žymą img (kiekvienas paveikslėlis turi būti įtrauktas į savo div žymą), pavyzdžiui:
Atkreipkite dėmesį, kad blokui priskyrėme identifikatorių -. Pagal identifikatorių galime nurodyti bloką naudodami css.
3 žingsnis
Tada turite nustatyti css stilius į bloką. Stilių sąrašas: "position: relative;" - nustatys kilmę iš viršutinio kairiojo mūsų bloko kampo; "paraštė: 50 taškų automatinis;" - nustatys mūsų bloko „50px“įtrauką virš ir žemiau likusio puslapio turinio, taip pat nustatys automatinę įtrauką į dešinę ir į kairę, taip sulygindami savo bloką centre; "plotis: 900 taškų; aukštis: 650 taškų;" - nustatys atitinkamai 900 taškų plotį ir 650 taškų aukštį.
Nurodytas stilių sąrašas turi būti pateikiamas taip:
#photo_page {
padėtis: giminaitis;
paraštė: 0 auto;
plotis: 900 taškų;
aukštis: 650 taškų;
text-align: centre;
}
Atkreipkite dėmesį į „#photo_page“naudojimą - taip mes nurodome bloko ID.
4 žingsnis
Dabar kiekvienam paveikslėlyje priskirsime bendruosius stiliaus elementus „photo_page“. Tai yra suapvalinti kampai, pilka siena, baltas fonas, paminkštinimas ir šešėlis.
Tai sukurs fotografinį efektą:
#photo_page img {
krašto spindulys: 7 tšk.
kraštinė: 1px pilka pilka;
fonas: #ffffff;
užpildas: 10 taškų;
langelis-šešėlis: 2px 2px 10px # 697898;
}
Atkreipkite dėmesį į „#photo_page img“naudojimą - tai bus susiję su visais „photo_page“bloko vaizdais
5 žingsnis
Taip pat svarbu pridėti tokį trumpą stilių:
#photo_page div {
plūdė: kairė;
}
Jis sutraukia visus blokus „photo_page“bloko viduje kairėje.
6 žingsnis
Dabar baigtas tarpinis pamokos etapas. Jei jūsų darbas yra panašus į paveikslėlį ekrane, tada nesuklydote ir galite pereiti prie kito veiksmo.
7 žingsnis
Dabar mes pasukame, kad pasuktume paskelbtas nuotraukas. Tam mums reikia transformavimo stiliaus. Šiuo metu grynu pavidalu jis nenaudojamas, o pradžioje tik kiekvienos naršyklės prefiksas:
-webkit-transformuoti: pasukti (reikšmė);
-moz-transformuoti: pasukti (reikšmė);
-o-transformuoti: pasukti (vertė);
Tai yra naršyklių sukimosi stilius: „Google Chrome“, „Mazilla“, „Opera“(atitinkamai). Vietoj žodžio „vertė“įterpsime skaičių su laipsniu deg, taip:
90 laipsnių - pasukite 90 laipsnių pagal laikrodžio rodyklę.
-5 laipsniai - pasukite -5 laipsnius prieš laikrodžio rodyklę.
Ir kt.
8 žingsnis
Nuotraukos foto_1 stilius:
# nuotrauka_1 {
-webkit-transformuoti: pasukti (5deg);
-moz-transformuoti: pasukti (5 laipsniai);
-o-transformuoti: pasukti (5 laipsniai);
}
Pirmasis vaizdas pasuktas 5 laipsniais.
9 žingsnis
Nuotraukos foto_2 stilius:
# photo_2 {
-webkit-transformuoti: pasukti (-3deg);
-moz-transformuoti: pasukti (-3deg);
-o-transformuoti: pasukti (-3deg);
}
Antrasis vaizdas pasuktas -3 laipsniais.
10 žingsnis
Nuotraukos Photo_3 stilius:
# photo_3 {
-webkit-transformuoti: pasukti (-2deg);
-moz-transformuoti: pasukti (-2deg);
-o-transformuoti: pasukti (-2deg);
}
Trečias vaizdas pasuktas -2 laipsniais.
11 žingsnis
Stilius nuotraukai photo_4:
# photo_4 {
-webkit-transformuoti: pasukti (8deg);
-moz-transformuoti: pasukti (8 laipsnių);
-o-transformuoti: pasukti (8 laipsnių);
}
Ketvirtasis vaizdas pasuktas 8 laipsniais.
12 žingsnis
Pažiūrėkime, kaip galite ištaisyti vaizdų padėtį. Pavyzdžiui, norite kompensuoti pirmąjį vaizdą 20 taškų iš viršaus ir 10 taškų kairėje. Tokiu atveju turite naudoti paraštės stilių. Štai kaip teisingai jį naudoti mūsų atveju:
# nuotrauka_1 {
paraštė: 20px -10px -20px10px;
-webkit-transformuoti: pasukti (5deg);
-moz-transformuoti: pasukti (5 laipsniai);
-o-transformuoti: pasukti (5 laipsniai);
}
Atkreipkite dėmesį, kad pirmoji stiliaus vertė yra viršutinė paraštė; antroji yra įtrauka į dešinę; trečias yra įtrauka iš apačios; ketvirta - kairė įtrauka.
Svarbu: mūsų atveju apatinė paraštė yra lygi neigiamai viršutinės paraštės vertei. Jei po savo puslapio vaizdu matote baltą tarpą, pabandykite dar labiau neigiamai įspausti vaizdo apačią.
13 žingsnis
Darbas baigtas, pateikiu ekrano kopiją (atsižvelgiant į pirmojo atvaizdo įtraukos pasikeitimą, aprašytą 12 veiksme).
Pridėkite įtraukos stilių prie visų vaizdų, kurie nėra jums tinkami.
