Izpratne par to, kā IFrames darbojas mājas lapas dizains
Kad jūs ievietojat elementu savā HTML , tam ir divas iespējas pievienot CSS stilus :
- Jūs varat veidot IFRAME pati.
- Jūs varat veidot lapu IFRAME iekšienē (ar noteiktiem nosacījumiem).
Izmantojot CSS, lai stils IFRAME elementu
Pirmā lieta, kas jums būtu jāņem vērā, ja veidojat iframes, ir IFRAME pati. Lai gan lielākā daļa pārlūkprogrammu ietver arī iframes bez lieliem papildu stiliem, joprojām ir ieteicams pievienot dažus stilus, lai tie būtu konsekventi.
Šeit ir daži CSS stili, kurus es vienmēr iekļauju savā iframe:
- starpība: 0;
- polsterējums: 0;
- robeža: nav;
- platums: vērtība ;
- augstums: vērtība ;
Ar platumu un augstumu iestatījis izmēru, kas atbilst manam dokumentam. Šeit ir piemēri rāmim bez stiliem un viens ar tikai pamatformulēm. Kā redzat, šie stili pārsvarā vienkārši noņem robežu ap iframe, taču nodrošina arī to, ka visās pārlūkprogrammās šis iFrame tiek attēlots ar vienādām malām, polsterējumu un izmēriem.
HTML5 iesaka izmantot pārplūdes īpašumu, lai noņemtu ritjoslu, bet tas nav ticami. Tātad, ja vēlaties noņemt vai mainīt ritjoslu, arī jums vajadzētu izmantot rāpuļa atribūtu savā iFrame. Lai izmantotu ritināšanas atribūtu, pievienojiet to tāpat kā jebkuru citu atribūtu un pēc tam izvēlieties vienu no trim vērtībām: jā, nē vai automātiski. Jā, pārlūks vienmēr ieslēdz ritjoslu, pat ja tas nav nepieciešams. Nē saka, lai noņemtu visus ritjoslu, vai tas ir nepieciešams, vai nē.
auto ir noklusējums un ietver ritjoslu, kad tas ir nepieciešams, un noņem tos, ja tie nav.
Tālāk ir norādīts, kā izslēgt ritināšanu ar ritināšanas atribūtu:
ritinot = "nē" >
Šis ir iframe.
Lai izslēgtu ritināšanu HTML5 formātā, jums vajadzētu izmantot pārpildes īpašumu. Bet, kā jūs varat redzēt šajos piemēros, tā nedarbojas uzticami visos pārlūkprogrammās vēl.
Tālāk ir norādīts, kā jūs vienmēr ieslēgtu pārlūkošanu, izmantojot pārlūkprogrammas rekvizītu:
style = "pārpildīšana: ritiniet;" >
Šis ir iframe.
Nav iespējams pilnībā izslēgt ritināšanu, izmantojot pārplūdes īpašumu.
Daudzi dizaineri vēlas, lai theirrames būtu saplūst ar lapu, kurā tie ir, fona, lai lasītāji nezinātu, ka iframes ir pat tur. Bet jūs varat arī pievienot stilus, lai tos izceltu. Ir viegli pielāgot robežas, lai iframe parādās vieglāk. Vienkārši izmantojiet robežu stila īpašumu (vai tā ir saistīta ar robežas augšdaļu, malu labajā malā, kreiso malu kreiso pusi un robežas-grunts īpašības), lai stilu veidotu robežas:
iframe {
border-top: # c00 1px dotted;
robeža-labajā pusē: # c00 2px dotted;
robeža-kreisajā pusē: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}
Bet jums nevajadzētu apstāties, ritinot un aprobežoties ar saviem stiliem. Jūs varat pieteikties daudz citu CSS stilu jūsu iframe. Šajā piemērā tiek izmantoti CSS3 stili, lai piešķirtu iframe ēnu, noapaļotus stūrus un pagrieztu to par 20 grādiem.
iframe {
margin-top: 20 pikseļi;
maržas apakšdaļa: 30 pikseļi;
-moz-robežas rādiuss: 12px;
-webkit-robežas rādiuss: 12px;
robežas rādiuss: 12 pikseļi;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kaste-ēna: 4px 4px 14px # 000;
-moz-transform: pagriezt (20deg);
-webkit-transform: pagriezt (20deg);
-o-transformēt: pagriezt (20deg);
-ms-transformēt: pagriezt (20deg);
filtrs: progid: DXImageTransform.Microsoft.BasicImage (rotācija = .2);
}
Stils Iframe Saturs
Iframe satura veidošana ir tāpat kā jebkuras citas tīmekļa lapas veidošana. Bet jums ir jābūt iespējai rediģēt lapu . Ja jūs nevarat rediģēt lapu (piemēram, tā ir citā vietnē).
Ja jūs varat rediģēt lapu, tad varat dokumentā pievienot ārējo stilu lapu vai stilus tieši tāpat, kā jūs izveidotu citu tīmekļa vietni savā vietnē.