Deall sut mae IFrames yn gweithio mewn dylunio gwefannau
Pan fyddwch yn ymgorffori elfen yn eich HTML , mae gennych ddau gyfle i ychwanegu arddulliau CSS ato:
- Gallwch chi arddull yr IFRAME ei hun.
- Gallwch chi arddull y dudalen y tu mewn i'r IFRAME (dan rai amodau).
Defnyddio CSS i Arddull Elfen IFRAME
Y peth cyntaf y dylech ei ystyried wrth ddylunio'ch seramau yw'r IFRAME ei hun. Er bod y rhan fwyaf o borwyr yn cynnwys osramau heb lawer o arddulliau ychwanegol, mae'n syniad da i ychwanegu rhai arddulliau i'w cadw'n gyson.
Dyma rai o arddulliau CSS rwyf bob amser yn eu cynnwys ar fy nhramau:
- ymyl: 0;
- padio: 0;
- ffin: dim;
- lled: gwerth ;
- uchder: gwerth ;
Gyda'r lled a'r uchder yn cael eu gosod i'r maint sy'n cyd-fynd â'm dogfen. Dyma enghreifftiau o ffrâm heb arddulliau ac un gyda'r pethau sylfaenol yn unig. Fel y gwelwch, mae'r arddulliau hyn yn bennaf yn cael gwared ar y ffin o gwmpas yr iframe, ond maent hefyd yn sicrhau bod pob porwr yn dangos bod osrame gyda'r un ymylon, padio a dimensiynau.
Mae HTML5 yn argymell eich bod chi'n defnyddio'r eiddo gorlifo i ddileu'r bariau sgrolio, ond nid yw hynny'n ddibynadwy. Felly, os ydych chi eisiau dileu neu newid y bariau sgrolio, dylech ddefnyddio'r priodoldeb sgrolio ar eich iframe hefyd. I ddefnyddio'r priodoldeb sgrolio, ychwanegwch ef fel unrhyw briodoldeb arall ac yna dewiswch un o dri gwerthoedd: ie, na, neu auto. mae hi'n dweud wrth y porwr i gynnwys bariau sgrolio bob amser hyd yn oed os nad oes eu hangen. ni ddywedaf i gael gwared ar bob bar sgrolio p'un a oes angen neu beidio.
auto yw'r diofyn ac mae'n cynnwys y bariau sgrolio pan fydd eu hangen ac yn eu tynnu pan nad ydynt.
Dyma sut i ddiystyru sgrolio gyda'r priodoli sgrolio:
scrolling = "no" >
Mae hwn yn osrame.
I droi sgrolio yn HTML5, dylech ddefnyddio'r eiddo gorlifo. Ond fel y gwelwch yn yr enghreifftiau hyn , nid yw'n gweithio'n ddibynadwy ym mhob porwr eto.
Dyma sut y byddech chi'n troi'n sgrolio drwy'r amser gyda'r eiddo gorlif:
style = "overflow: scroll;" >
Mae hwn yn osrame.
Nid oes ffordd i ddiffodd y sgrolio yn gyfan gwbl gyda'r eiddo gorlifo.
Mae llawer o ddylunwyr am iddyn nhw gael eu cyd-fynd â chefndir y dudalen maen nhw arno fel nad yw darllenwyr yn gwybod bod y iframau hyd yn oed yno. Ond gallwch hefyd ychwanegu arddulliau i'w gwneud yn sefyll allan. Mae addasu'r ffiniau fel bod y iframe yn ymddangos yn haws yn hawdd. Defnyddiwch yr eiddo arddull ffiniau (neu ei berthyn ar y ffin, y ffin-dde, y ffin a'r chwith, a'r gwaelod ar y ffin) i arddull y ffiniau:
iframe {
border-top: # c00 1px dotted;
ffin-dde: # c00 2px dotted;
ffin-chwith: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}
Ond ni ddylech roi'r gorau i sgrolio a ffiniau ar gyfer eich arddulliau. Gallwch chi ddefnyddio llawer o arddulliau CSS eraill i'ch iframe. Mae'r enghraifft hon yn defnyddio arddulliau CSS3 i roi cysgod, corneli crwn, i'r iframe, a'i gylchdroi 20 gradd.
iframe {
ymyl-top: 20px;
ymyl-waelod: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
radiws ffin: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
cysgod blwch: 4px 4px 14px # 000;
-moz-transform: cylchdroi (20deg);
-webkit-transform: cylchdroi (20deg);
-o-drawsnewid: cylchdroi (20deg);
-ms-transform: cylchdroi (20deg);
hidlydd: progid: DXImageTransform.Microsoft.BasicImage (cylchdroi = .2);
}
Styling Cynnwys Iframe
Mae arddull cynnwys iframe yr un fath â steilio unrhyw dudalen we arall. Ond, mae'n rhaid ichi gael mynediad i olygu'r dudalen . Os na allwch olygu'r dudalen (er enghraifft, mae ar safle arall).
Os gallwch chi olygu'r dudalen, gallwch chi ychwanegu dalen neu arddull arddull allanol yn y ddogfen yn union fel y byddech yn arddull unrhyw dudalen we arall ar eich gwefan.