Ymmärtää, miten IFrames toimii verkkosivujen suunnittelussa
Kun upotat elementin HTML-muotoon , sinulla on kaksi mahdollisuutta lisätä CSS-tyylit siihen:
- Voit muotoilla IFRAME itse.
- Voit muotoilla sivun IFRAME-sivulla (tietyissä olosuhteissa).
CSS: n käyttäminen tyylin IFRAME-elementtiin
Ensimmäinen asia, jonka sinun pitäisi harkita, kun muotoilee iframes, on itse IFRAME. Vaikka useimmat selaimet sisältävät iframeja ilman paljon ylimääräisiä tyylejä, on silti hyvä lisätä joitain tyylit pitämään ne yhdenmukaisina.
Seuraavassa on joitain CSS-tyyliä, jotka olen aina sisällytetty iframe-tiedostoihini:
- marginaali: 0;
- pehmuste: 0;
- raja: ei yhtään;
- leveys: arvo ;
- korkeus: arvo ;
Leveys ja korkeus asetettu kokoon, joka sopii minun asiakirjassa. Seuraavassa on esimerkkejä kehyksestä, jossa ei ole tyylejä ja joista vain perusasiat on muotoiltu. Kuten näet, nämä tyylejä vain poistavat reunuksen iframe-kehän ympäriltä, mutta ne myös varmistavat, että kaikki selaimet näyttävät, että iframe, samoilla marginaaleilla, pehmusteilla ja mitoilla.
HTML5 suosittelee, että voit käyttää ylivuoto-ominaisuutta vierityspalkkien poistamiseen, mutta se ei ole luotettava. Joten jos haluat poistaa tai muuttaa vierityspalkkeja, käytä myös iframe-kehyksen vieritysominaisuutta. Voit vierittää vieritysominaisuutta lisäämällä sen mihin tahansa muuhun attribuuttiin ja valitsemalla sitten yhden kolmesta arvosta: kyllä, ei tai automaattinen. kyllä kertoo selainta aina vierityspalkkeihin, vaikka niitä ei tarvitsisi. ei sanoa poistaaksesi kaikki vierityspalkit tarpeen mukaan.
auto on oletusarvo ja sisältää vierityspalkit, kun niitä tarvitaan ja poistaa ne, kun niitä ei ole.
Näin voit poistaa vierityksen vierityksen ominaisuuden käytöstä seuraavasti:
scrolling = "ei"
Tämä on iframe.
Jos haluat poistaa HTML5-selauksen käytöstä, sinun on käytettävä ylivuoto-ominaisuutta. Mutta kuten näissä esimerkeissä näet, se ei toimi luotettavasti kaikissa selaimissa.
Näin voit ottaa selaamalla koko ajan ylivuotokohteella:
style = "ylivuoto: vieritys;"
Tämä on iframe.
Ei ole mitään keinoa vierittää vieritystä täysin ylivuoto-ominaisuudella.
Monet suunnittelijat haluavat, että iframit sekoittuvat sivun taustallaan, jotta lukijat eivät tiedä, että iframit ovat edes olemassa. Mutta voit myös lisätä tyylejä, jotta ne erottuvat. Rajojen säätäminen niin, että iframe näyttää helpommin, on helppoa. Käytä vain rajatyyppinen ominaisuus (tai se liittyy raja-alkuun, raja-oikeuteen, raja-vasempaan ja rajatason ominaisuuksiin)
iframe {
border-top: # c00 1px pisteviiva;
raja-oikea: # c00 2px pisteviiva;
raja-vasen: # c00 2px pisteviiva;
raja-pohja: # c00 4px pisteviiva;
}
Mutta sinun ei pitäisi lopettaa selausta ja rajoja tyylillesi. Voit käyttää paljon muita CSS-tyylejä iframe-muotoosi. Tässä esimerkissä CSS3-tyylit antavat iframe-varjon, pyöristetyt kulmat ja pyörivät sitä 20 astetta.
iframe {
margin-top: 20px;
marginaalipohja: 30px;
-moz-raja-säde: 12px;
-webkit-border-radius: 12px;
raja-säde: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
laatikko-varjo: 4px 4px 14px # 000;
-moz-muunnos: pyöritä (20deg);
-webkit-muunnos: kierrä (20deg);
-o-muunnos: kierrä (20deg);
-MS-muunnos: pyöritä (20deg);
suodatin: progid: DXImageTransform.Microsoft.BasicImage (kierto = 0,2);
}
Iframe-sisällön muotoilu
Iframe-sisällön muotoilu on aivan kuin minkä tahansa muun verkkosivun muotoilu. Sinulla on kuitenkin oltava oikeus muokata sivua . Jos sivua ei voi muokata (esimerkiksi se on toisella sivustolla).
Jos voit muokata sivua, voit lisätä ulkoisen tyylitiedoston tai tyylejä suoraan dokumenttiin aivan kuten minkä tahansa sivuston muuhun verkkosivuun.