Supratimas, kaip IFrame veikia svetainės dizaino
Kai įterpiate elementą savo HTML , turite dvi galimybes pridėti CSS stilius :
- Jūs galite sukurti IFRAME.
- Galite stiliaus puslapį IFRAME (tam tikromis sąlygomis).
CSS naudojimas elemento "IFRAME" stiliui
Pirmasis dalykas, kurį turėtumėte apsvarstyti, kai formuojasi jūsų "iframes", yra pats IFRAME. Nors daugelyje naršyklių yra "iframes", kuriuose nėra daug papildomų stilių, vis dar yra tikslinga pridėti keletą stilių, kad jie būtų nuoseklūs.
Štai keletas CSS stilių, kuriuos visada įtraukiu į savo "iframes":
- marža: 0;
- padding: 0;
- siena: nėra;
- plotis: vertė ;
- aukštis: vertė ;
Kai plotis ir aukštis nustatomi pagal dydį, kuris tinka mano dokumente. Čia pateikiami rėmelio, kuriame nėra stilių, pavyzdžiai ir tik pagrindiniai stiliai. Kaip matote, šie stiliai dažniausiai tiesiog pašalina sritį aplink "iframe", tačiau taip pat užtikrina, kad visos naršyklės rodytų tą "iframe" su tomis pačiomis paraštimis, plyšiais ir matmenimis.
HTML5 rekomenduoja naudoti perpildymo nuosavybę, kad pašalintumėte slinkties juostas, bet tai nėra patikima. Taigi, jei norite pašalinti arba pakeisti slinkties juostas, taip pat turėtumėte naudoti ir slankiojančią savybę. Norėdami naudoti przewijanym pobūdžio, pridėkite jį kaip ir bet kurį kitą atributą, tada pasirinkite vieną iš trijų reikšmių: taip, ne, ar auto. Taip, naršyklė visada įtraukia slinkties juostas, net jei jų nereikia. Ne sako, kad pašalintų visas slinkties juostas, ar reikia.
automatinis yra numatytasis ir apima slinkties juostas, kai jos yra reikalingos, ir pašalina juos, kai jos nėra.
Štai kaip išjungti slinkimą slinkties atributu:
scrolling = "no" >
Tai yra iframe.
Norėdami išjungti slinkimą HTML5, turėtumėte naudoti perpildymo nuosavybę. Tačiau, kaip matote šiuose pavyzdžiuose, ji dar neveikia patikimai visose naršyklėse.
Štai kaip galite visą laiką slinkti naudodami perpildymo nuosavybę:
style = "overflow: scroll;" >
Tai yra iframe.
Negalima visiškai išjungti slinkties perpildymo nuosavybės.
Daugelis dizainerių nori, kad jų "frame" susimaišytų su puslapiu, kuriame jie yra, fone, kad skaitytojai nežinotų, kad iframe yra ir ten. Tačiau taip pat galite pridėti stilių, kad jie išsiskirtų. Nustatyti sienas taip, kad iframe būtų lengviau rodyti. Tiesiog naudokite sienų stiliaus nuosavybę (arba tai yra susijusi sienų viršuje, sienų dešinėje, krašto kairėje ir sienų apačioje esančių savybių), kad būtų galima kurti sienas:
iframe {
border-top: # c00 1px dotted;
kairysis kraštas: # c00 2px dotted;
border-left: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}
Bet jūs neturėtumėte sustoti su slinktimi ir ribojasi savo stilių. Galite pritaikyti daugybę kitų CSS stilių jūsų "iframe". Šiame pavyzdyje naudojami CSS3 stiliai, kad "iframe" būtų šešėlis, užapvalinti kampai ir pasukti 20 laipsnių kampu.
iframe {
"margin-top": 20 px;
maržos apačia: 30 px;
-moz-sienos spindulys: 12 px;
-webkit-sienos spindulys: 12 px;
pasienio rutulys: 12 px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transformuoti: pasukti (20deg);
-webkit-transform: sukti (20deg);
-o-transformuoti: pasukti (20deg);
-ms-transformuoti: pasukti (20deg);
filtras: progid: DXImageTransform.Microsoft.BasicImage (rotacija = .2);
}
Stiliaus Iframe turinys
"Iframe" turinys yra stilingas kaip ir kitas tinklalapis. Bet jūs turite turėti galimybę redaguoti puslapį . Jei negalite redaguoti puslapio (pvz., Jis yra kitoje svetainėje).
Jei galite redaguoti puslapį, tuomet galite pridėti išorinį stiliaus lapą ar stilių tiesiai dokumente, taip pat kaip ir kitokį tinklalapį savo svetainėje.