Mõiste, kuidas IFrames töötab veebisaidi kujundamisel
HTML-i elemendi sisestamisel on teil CSS-i stiilide lisamiseks kaks võimalust:
- Võite stiili IFRAME ise.
- Võite sisestada IFRAMEi lehe (teatud tingimustel).
CSS-i kasutamine IFRAME-elemendi stiili jaoks
Esimene asi, mida peaksite mõtlema, kui your IFRAMi kujundamine on IFRAME ise. Kuigi enamik brauseritest sisaldavad andrameid, millel pole palju lisatalle, on ikkagi hea mõte lisada mõned stiile, et need oleksid järjepidevad.
Siin on mõned CSS-i stiilid, mida ma alati lisan oma kaartidele:
- marginaal: 0;
- padding: 0;
- piir: ükski;
- laius: väärtus ;
- kõrgus: väärtus ;
Kui laius ja kõrgus on määratud suurusele, mis sobib minu dokumendiga. Siin on näiteid raamidest, millel pole stiile, ja ainult stiilidega põhitõdesid. Nagu näete, eemaldavad need stiilid enamasti just piirid iirimaa ümber, kuid tagavad ka, et kõik brauserid näitavad, et iframe on sama marginaaliga, laiendusega ja mõõtmetega.
HTML5 soovitab kerimisriba eemaldamiseks kasutada üleliigne omandi, kuid see ei ole usaldusväärne. Nii et kui soovite eemaldada või muuta kerimisriba, peate kasutama ka iirimeedi kerimise atribuuti. Kerimise atribuudi kasutamiseks lisage see sarnaselt mis tahes teise atribuudiga ja valige seejärel üks kolmest väärtusest: jah, ei või automaatne. Jah ütleb, et brauser sisaldab alati kerimisribasid isegi siis, kui neid pole vaja. Ei ütleb, et kõik kerimisribad eemaldada, kui vaja või mitte.
auto on vaikimisi ja sisaldab kerimisribasid, kui neid vajatakse, ja eemaldab need, kui neid pole.
Siin on kuidas kerimise kõrval olevat atribuuti välja lülitada:
scrolling = "no" >
See on iframe.
HTML5-s kerimisega väljalülitamiseks peate kasutama üleliigne vara. Kuid nagu näete nendes näidetes , ei tööta see veel usaldusväärselt kõigis brauserites.
Siin on, kuidas lülitada üleliigse olekuga kogu aeg kerimisriba:
style = "overflow: scroll;" >
See on iframe.
Ümbervooluomadustega ei saa kerimise täielikult välja lülitada.
Paljud disainerid soovivad, et nende iidraamid oleksid lehe taustaga segunenud, nii et lugejad ei tea, et iframe on seal olemas. Kuid võite ka stiile lisada, et need eristuksid. Piiride muutmine nii, et iframe kuvatakse kergemini, on lihtne. Piiride stiilimiseks kasutage lihtsalt piiri stiili vara (või sellega seotud piirjoont, piiri paremale, vasakule piiri ja piiriäärseid omadusi):
iframe {
border-top: # c00 1px dotted;
paremale paremale: # c00 2px dotted;
border-left: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}
Kuid ärge peatudes oma stiilide kerimisel ja piiridel. Võite oma IFRAME-i jaoks kasutada palju teisi CSS-i stiile. Selles näites kasutatakse CSS3 stiile, et anda iframe varje ümardatud nurgad ja pöörata seda 20 kraadi.
iframe {
margin-top: 20px;
marginaal-põhi: 30px;
-moz-piiriraadius: 12px;
-webkit-piiriraadius: 12px;
piiriraadius: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kasti varju: 4px 4px 14px # 000;
-moz-transform: pöörata (20deg);
-webkit-transform: pöörata (20deg);
-o-muundamine: pöörata (20deg);
-ms-transform: pöörata (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (pööramine = .2);
}
Iframe sisu sisustamine
Iframe sisu kujundamine on nagu mõne muu veebilehe kujundamine. Kuid teil peab olema juurdepääs lehe redigeerimiseks . Kui te ei saa lehte muuta (näiteks on see mõnes teises saidil).
Kui saate lehte redigeerida, võite dokumendis lisada välise stiililehe või stiilid otse nii, nagu oleksite oma veebisaidil mõne muu veebilehe stiilis kujundanud.