'N Baie eenvoudige manier om die elemente van 'n webwerfblad te draai - pas net 'n paar CSS-style toe. As u hierdie les leer ken, kan u 'n oopgevoude kaartwaaier, verspreide blare of stylvolle foto's in 'n album op die bladsy plaas. Die les bevat 'n voorbeeld van die implementering van 'n fotoalbum en neem die oplossing vir alle moderne blaaiers in ag.
Dit is nodig
Vier foto's tot 450 px breed
Instruksies
Stap 1
Hierdie voorbeeld fokus op die skep van 'n stylvolle albumblad met gedraaide foto's.
Ek het vooraf beelde (breedte 400 px) met adresse voorberei:
In die toekoms sal ons ID's aan beelde toeken volgens hul name.
Stap 2
Eerstens sal ons 'n blok vir ons fotoalbum voorberei met behulp van die div-tag, en ook foto's daarby voeg met die img-tag (elke afbeelding moet in sy eie div-tag ingesluit wees), soos volg:
Let daarop dat ons 'n identifiseerder aan die blok toegeken het. Met die identifiseerder kan ons na die blok verwys met behulp van css.
Stap 3
Vervolgens moet u die css-style op die blok instel. Lys van style: "posisie: relatief;" - stel die oorsprong in die linkerbovenhoek van ons blok; "marge: 50 px outomaties;" - sal die inspringing van ons blok "50px" bo en onder die res van die bladsyinhoud stel, asook die outomatiese inspringing na regs en links stel en sodoende ons blok in die middel inlyn; "breedte: 900 px; hoogte: 650 px;" - stel die breedte op onderskeidelik 900px en die hoogte op 650px.
Die gespesifiseerde lys style moet op hierdie manier geplaas word:
#foto_bladsy {
posisie: relatief;
marge: 0 outomaties;
breedte: 900px;
hoogte: 650px;
teksbelyning: middel;
}
Let op die gebruik van "#foto_pagina" - dit is hoe ons na die blok-ID verwys.
Stap 4
Nou sal ons algemene style vir elke prent in die foto_blok toewys. Dit is afgeronde hoeke, grys rand, wit agtergrond, vulling en valskadu.
Dit sal 'n fotografiese effek skep:
#foto_blad img {
grensradius: 7px;
rand: 1px soliede grys;
agtergrond: #ffffff;
opvulling: 10px;
doosskaduwee: 2px 2px 10px # 697898;
}
Let op die gebruik van "#foto_pagina img" - dit verwys na alle beelde in die foto_bladsy
Stap 5
Dit is ook belangrik om 'n kort styl soos volg by te voeg:
#foto_bladsy div {
dryf: links;
}
Dit krimp al die blokke binne die fotobladsyblok links.
Stap 6
Die intermediêre stadium van die les is nou voltooi. As u werk soortgelyk is aan die beeld op die kiekie, het u nie 'n fout gemaak nie en kan u voortgaan met die volgende stap.
Stap 7
Nou draai ons om die geplaasde foto's te draai. Hiervoor het ons die transformasie-styl nodig. Op die oomblik word dit in sy suiwer vorm nie gebruik nie, maar slegs met 'n voorvoegsel vir elke blaaier aan die begin, soos volg:
-webkit-transform: draai (waarde);
-moz-transform: draai (waarde);
-o-transform: draai (waarde);
Dit is die rotasie-styl vir blaaiers: onderskeidelik Google Chrome, Mazilla, Opera. In plaas van die woord "waarde", sal ons 'n getal met deg aan die einde invoeg, soos volg:
90 grade - draai 90 grade kloksgewys.
-5deg - draai -5 grade antikloksgewys.
Ensovoorts
Stap 8
Styl vir foto foto_1:
# foto_1 {
-webkit-transform: draai (5deg);
-moz-transform: draai (5deg);
-o-transform: draai (5deg);
}
Die eerste beeld word 5 grade gedraai.
Stap 9
Styl vir foto foto_2:
# foto_2 {
-webkit-transform: draai (-3deg);
-moz-transform: draai (-3deg);
-o-transform: draai (-3deg);
}
Die tweede beeld word -3 grade gedraai.
Stap 10
Styl vir foto foto_3:
# foto_3 {
-webkit-transform: draai (-2deg);
-moz-transform: draai (-2deg);
-o-transform: draai (-2deg);
}
Die derde beeld word -2 grade gedraai.
Stap 11
Styl vir foto foto_4:
# foto_4 {
-webkit-transform: draai (8deg);
-moz-transform: draai (8deg);
-o-transform: draai (8deg);
}
Die vierde beeld word 8 grade gedraai.
Stap 12
Kom ons kyk hoe u die posisie van beelde kan regstel. U wil byvoorbeeld die eerste beeld 20px van bo en 10px van links verreken. In hierdie geval moet u die kantlynstyl gebruik. Hier is die korrekte manier om dit vir ons saak te gebruik:
# foto_1 {
marge: 20px -10px -20px 10px;
-webkit-transform: draai (5deg);
-moz-transform: draai (5deg);
-o-transform: draai (5deg);
}
Let daarop dat die eerste waarde van die styl die boonste kantlyn is; die tweede is die streep regs; die derde is 'n inspringing van onder af; vierde - linker inspringing.
Belangrik: in ons geval is die onderste marge gelyk aan die negatiewe waarde van die boonste marge. As u wit spasie onder die prentjie op u bladsy sien, probeer om die onderkant van die prent nog negatiefer in te skuif.
Stap 13
Die werk is voltooi, ek bied 'n kiekie (met inagneming van die verandering in die inkeping van die eerste prentjie wat in stap 12 beskryf word).
Voeg inkepingstyl by enige beelde wat nie by u pas nie.
