Verstaan hoe IFrames werk in webwerf ontwerp
As jy 'n element in jou HTML insluit , het jy twee geleenthede om CSS-style daaraan te voeg:
- Jy kan die IFRAME self styl.
- U kan die bladsy binne die IFRAME styl (onder sekere omstandighede).
Gebruik CSS om die IFRAME-element te vorm
Die eerste ding wat jy moet oorweeg wanneer jy jou iframes stilmaak, is die IFRAME self. Terwyl die meeste blaaiers bevat iframes sonder baie ekstra style, is dit steeds 'n goeie idee om 'n paar style by te voeg om hulle konsekwent te hou.
Hier is 'n paar CSS-style wat ek altyd op my iframes insluit:
- marge: 0;
- vulling: 0;
- grens: geen;
- breedte: waarde ;
- hoogte: waarde ;
Met die breedte en hoogte wat ingestel is op die grootte wat in my dokument pas. Hier is voorbeelde van 'n raam sonder style en een met net die basiese style. Soos u kan sien, verwyder hierdie style meestal net die rand rondom die iframe, maar hulle verseker ook dat alle blaaiers die iframe vertoon met dieselfde marges, opvulling en afmetings.
HTML5 beveel aan dat jy die oorloop-eiendom gebruik om die blaaiers te verwyder, maar dit is nie betroubaar nie. So as jy die skuifbalk wil verwyder of verander, moet jy ook die skuif kenmerk op jou iframe gebruik. Om die skuif kenmerk te gebruik, voeg dit by soos enige ander kenmerk en kies dan een van drie waardes: ja, nee of outomaties. Ja, die blaaier moet altyd blaaiers insluit, selfs al is dit nie nodig nie. nee sê om al die rolstawe te verwyder of dit nodig is of nie.
Outomaties is die verstek en sluit die skuifbalk in wanneer dit benodig word en verwyder dit as dit nie is nie.
Hier is hoe om af te skuif met die skuif kenmerk:
blaai = "nee" >
Hierdie is 'n iframe.
Om af te skuif in HTML5, is dit veronderstel om die oorloop-eiendom te gebruik. Maar soos u in hierdie voorbeelde kan sien, werk dit nie betroubaar in alle blaaiers nie.
Hier is hoe jy die hele tyd met die oorloop-eiendom sal blaai:
style = "overflow: scroll;" >
Hierdie is 'n iframe.
Daar is geen manier om die blaai heeltemal af te skakel met die oorloop eiendom nie.
Baie ontwerpers wil hê hulle iframes moet inmeng met die agtergrond van die bladsy waarop hulle is, sodat lesers nie weet dat die iframes daar selfs is nie. Maar jy kan ook style byvoeg om hulle uit te steek. Om die grense aan te pas sodat die iframe makliker vertoon, is maklik. Gebruik net die grensstyl eiendom (of dit is verwante grens-bo, grens-regs, grens-links en onderkant-eienskappe) om die grense te stileer:
iframe {
border-top: # c00 1px gestippeld;
grens-regs: # c00 2px gestippeld;
border-left: # c00 2px gestippeld;
randbodem: # c00 4px stippel;
}
Maar jy moet nie ophou met blaai en grense vir jou style nie. Jy kan baie ander CSS-style aan jou iframe toepas. Hierdie voorbeeld gebruik CSS3-style om die iframe 'n skaduwee, afgeronde hoeke te gee en dit 20 grade te draai.
iframe {
marge-top: 20px;
marge-bodem: 30px;
-moz-grens-radius: 12px;
-webkit-grens-radius: 12px;
grens radius: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: roteer (20deg);
-webkit-transform: roteer (20deg);
o-transform: roteer (20deg);
-MS-transform: roteer (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotasie = 0,2);
}
Die formaat van die Iframe-inhoud
Die styl van die inhoud van 'n iframe is net soos om enige ander webblad te styl. Maar jy moet toegang hê om die bladsy te wysig . As jy nie die bladsy kan wysig nie (byvoorbeeld, dit is op 'n ander webwerf).
As u die bladsy kan wysig, kan u 'n eksterne stylblad of style in die dokument direk byvoeg, net soos u enige ander webblad op u werf wil stal .