Memahami bagaimana IFrames berfungsi dalam reka bentuk laman web
Apabila anda memasukkan elemen dalam HTML anda, anda mempunyai dua peluang untuk menambah gaya CSS kepadanya:
- Anda boleh menyusun IFRAME itu sendiri.
- Anda boleh gaya halaman di dalam IFRAME (dalam keadaan tertentu).
Menggunakan CSS ke Gaya Elemen IFRAME
Perkara pertama yang perlu anda pertimbangkan apabila menyusun iframes anda adalah IFRAME itu sendiri. Walaupun kebanyakan penyemak imbas termasuk iframes tanpa banyak gaya tambahan, ia masih merupakan idea yang baik untuk menambah beberapa gaya untuk memastikannya konsisten.
Berikut adalah beberapa gaya CSS saya selalu masukkan pada iframes saya:
- margin: 0;
- padding: 0;
- sempadan: tiada;
- lebar: nilai ;
- ketinggian: nilai ;
Dengan lebar dan ketinggian ditetapkan pada saiz yang sesuai dengan dokumen saya. Berikut adalah contoh-contoh bingkai tanpa gaya dan satu dengan hanya asas yang digayakan. Seperti yang anda lihat, gaya ini kebanyakannya hanya mengalih keluar sempadan di sekeliling iframe, tetapi mereka juga memastikan bahawa semua pelayar memaparkan iframe itu dengan margin, padding dan dimensi yang sama.
HTML5 mengesyorkan bahawa anda menggunakan harta limpahan untuk mengeluarkan bar skrol, tetapi itu tidak boleh dipercayai. Jadi jika anda mahu mengeluarkan atau menukar bar skrol, anda harus menggunakan atribut menatal pada iframe anda juga. Untuk menggunakan atribut menatal, tambahnya seperti mana-mana atribut lain dan kemudian pilih salah satu daripada tiga nilai: ya, tidak, atau auto. ya memberitahu penyemak imbas untuk sentiasa memasukkan bar skrol walaupun mereka tidak diperlukan. tidak berkata untuk membuang semua bar skrol sama ada diperlukan atau tidak.
auto adalah lalai dan termasuk bar tatal bila diperlukan dan membuangnya apabila mereka tidak.
Berikut adalah cara untuk mematikan menatal dengan atribut menatal:
menatal = "tidak" >
Ini adalah iframe.
Untuk mematikan menatal dalam HTML5, anda sepatutnya menggunakan harta limpahan. Tetapi seperti yang anda lihat dalam contoh ini, ia tidak berfungsi dengan pasti di semua pelayar.
Begini bagaimana anda akan menghidupkan menatal sepanjang masa dengan harta limpahan:
style = "overflow: scroll;" >
Ini adalah iframe.
Tidak ada cara untuk mematikan penggilapan sepenuhnya dengan harta limpahan.
Ramai pereka mahukan iframes mereka untuk menggabungkan dengan latar belakang halaman mereka supaya pembaca tidak tahu bahawa iframes ada di sana. Tetapi anda juga boleh menambah gaya untuk menjadikannya menonjol. Melaraskan sempadan supaya iframe muncul lebih mudah adalah mudah. Cuma gunakan gaya gaya sempadan (atau ia berkaitan dengan sempadan atas, sempadan kanan, sempadan kiri, dan sifat sempadan bawah) untuk menyusun sempadan:
iframe {
border-top: # c00 1px dihiasi;
sempadan kanan: # c00 2px bertitik;
border-left: # c00 2px dihiasi;
sempadan bawah: # c00 4px dihiasi;
}
Tetapi anda tidak perlu berhenti dengan menatal dan bersempadan untuk gaya anda. Anda boleh memohon banyak gaya CSS lain ke iframe anda. Contoh ini menggunakan gaya CSS3 untuk memberikan iframe bayangan, sudut bulat, dan diputarnya 20 darjah.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
jejari jejari: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: berputar (20deg);
-webkit-transform: berputar (20deg);
-o-transform: putar (20deg);
-ms-transform: putar (20deg);
penapis: progid: DXImageTransform.Microsoft.BasicImage (putaran = .2);
}
Menggayakan Kandungan Iframe
Menggayakan kandungan iframe adalah seperti menggayakan halaman web yang lain. Tetapi, anda mesti mempunyai akses untuk mengedit halaman . Jika anda tidak boleh mengedit halaman (contohnya, di laman lain).
Sekiranya anda boleh mengedit halaman, anda boleh menambah lembaran gaya luaran atau gaya tepat di dalam dokumen seperti yang anda akan gaya laman web lain di laman web anda.