Tartalom
Az IFrames működésének megértése a weboldal kialakításában
felülvizsgálta
Az első dolog, amelyet az iframe-keretek formázásakor figyelembe kell vennie, a
IFRAME
- maga. Bár a legtöbb böngésző iframe-kereteket tartalmaz sok extra stílus nélkül, mégis érdemes néhány stílust hozzáadni, hogy azok következetesek legyenek. Íme néhány CSS stílus, amelyeket mindig belefoglalunk az iframe-ekbe:
margin: 0;
párnázás: 0;
határ: nincs;
szélesség: érték;
magasság: érték;
A ... val
szélesség
és
magasság
beállítva arra a méretre, amely illeszkedik a dokumentumomba. Íme néhány példa egy stílus nélküli keretre, és csak az alapokat tartalmazó stílusú keretre. Mint láthatja, ezek a stílusok általában csak eltávolítják az iframe körüli szegélyt, ugyanakkor biztosítják, hogy minden böngésző ugyanazokkal a margókkal, betétekkel és méretekkel jelenítse meg az iframe-et .HTML5 azt ajánlja, hogy használja a
túlcsordulás
tulajdonsággal eltávolíthatja a görgetősávokat a görgetődobozban, de ez nem megbízható. Tehát, ha eltávolítani vagy megváltoztatni szeretné a görgetősávokat, akkor használja a
görgetés
attribútum az iframe-en is. A
görgetés
attribútumot, add hozzá, mint bármely más attribútumot, majd válasszon a három érték közül:
Igen
,
nem
vagy
kocsi
.
Igen
azt mondja a böngészőnek, hogy mindig tartalmazzon görgetősávokat, még akkor is, ha nincs rá szükség.
nem
azt mondja, hogy távolítsa el az összes görgetősávot, akár szükséges, akár nem.
kocsi
az alapértelmezett érték, és magában foglalja a görgetősávokat, amikor szükség van rájuk, és eltávolítja azokat, ha nem. Így kapcsolhatja ki a görgetést a
görgetés
attribútum: görgetés = "no">
Ez egy iframe.
A HTML5 görgetésének kikapcsolásához a
túlcsordulás
ingatlan. Mint azonban ezekből a példákból kitűnik, ez még nem működik megbízhatóan minden böngészőben. Így kapcsolhatja be a görgetést egész idő alatt a
túlcsordulás
tulajdonság: style = "túlcsordulás: görgetés;">
Ez egy iframe.
Van semmiképpen a görgetés teljes kikapcsolásához a
túlcsordulás
ingatlan. Sok tervező azt akarja, hogy iframe-keretei beleolvadjanak annak a oldalnak a háttérével, amelyen vannak, hogy az olvasók ne tudják, hogy az iframe-ek még ott vannak. De stílusokat is hozzáadhat, hogy kiemelkedjenek. Könnyű beállítani a szegélyeket az iframe könnyebb megjelenése érdekében. Csak használja a
határ
stílus tulajdonság (vagy rokon
border-top
,
border-jobbra
,
border-left
és
border-bottom
tulajdonságok) a szegélyek stílusához: iframe {
border-top: # c00 1px pontozva;
jobb oldal: # c00 2px pontozva;
szegély-bal: # c00 2px pontozott;
szegély alsó: # c00 4px pontozott;
}
De ne hagyja abba a stílusokhoz való görgetést és a határokat. Sok más CSS-stílust alkalmazhat az iframe-ben. Ez a példa a CSS3 stílusokat használja, hogy árnyékot adjon az iframe-nek, lekerekített sarkokkal és 20 fokkal elforgatva.
iframe {
margin-top: 20 képpont;
margó alja: 30 képpont;
-moz-határ-sugár: 12 képpont;
-webkit-border-sugar: 12 képpont;
határ-sugár: 12 képpont;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transzformáció: Forgatás (20deg);
-webkit-transzformáció: Forgatás (20deg);
-o-transzformáció: Forgatás (20deg);
-MS-transzformáció: Forgatás (20deg);
szűrő: ProgAzon: DXImageTransform.Microsoft.BasicImage (forgatóképesség = .2);
}
Az Iframe tartalmának stílusa
Az iframe tartalmának stilizálása ugyanúgy, mint bármely más weboldal stílusa. De te hozzáféréssel kell rendelkeznie az oldal szerkesztéséhez. Ha nem tudja szerkeszteni az oldalt (például egy másik webhelyen).
Ha szerkesztheti az oldalt, akkor külső stíluslapot vagy stílusokat is hozzáadhat közvetlenül a dokumentumhoz, ugyanúgy, mint a többi weboldal stílusa.
