Beranda>Tutorial Desain Web>Efek khusus web

Gunakan ukuran kotak untuk mengimplementasikan bingkai imitasi div

Penulis：Eve Cole Waktu Pembaruan：2009-12-07 16:08:04

[ Browser yang berpartisipasi dalam pengujian : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[ Sistem operasi : Windows]

Mari kita lihat kodenya terlebih dahulu:

Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<meta name="penulis" content="Chomo" />
<link rel="mulai" href=" http://www.14px.com " title="Beranda" />
<title>Menggunakan ukuran kotak untuk mengimplementasikan bingkai imitasi div</title>
<gaya tipe="teks/css">
* { margin:0; bantalan:0;}
html { -ukuran kotak-webkit:kotak-perbatasan; -ukuran-kotak-moz:kotak-perbatasan; ukuran-kotak:kotak-perbatasan; padding:100px 0;
html,badan { tinggi:100%;}
.top { posisi:relatif; margin-atas:-100px; tinggi:100px latar belakang:#f60;}
.side { posisi:relatif; tinggi:100%; latar belakang:#fc0; overflow:auto; lebar:200px; float:left:0 !penting;
.main { posisi:relatif; luapan:otomatis; tinggi:100%;
.bottom { posisi:relatif; tinggi:100px; latar belakang:#f60;
</gaya>
</kepala>
<tubuh>
<div kelas="atas">
atas
</div>
<div kelas="sisi">
samping
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div kelas="utama">
utama
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div kelas="bawah">
dasar
</div>
</tubuh>
</html>

[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]

Bagian penting :

html { -ukuran kotak-webkit:kotak-perbatasan; -ukuran-kotak-moz:kotak-perbatasan; ukuran-kotak:kotak-perbatasan; padding:100px 0;

Prinsipnya mungkin begini :

Seribu kata tidak sebanding dengan gambarannya. Melalui perbandingan sebelum dan sesudah operasi plastik, setiap orang seharusnya dapat melihat efek dari ukuran kotak: kotak batas.

Siswa yang memahami ukuran kotak harus tahu bahwa itu berasal dari dunia CSS3 yang jauh dari Weiguo, jadi IE6/IE7 tidak didukung, tetapi saya sangat bertanggung jawab dan berkata: demo ini biasanya kompatibel dengan IE6/IE7.

Karena...

di bawah IE6/IE7, nilai ukuran kotak default <html> adalah border-box (Catatan: IE7 sedikit tidak normal, dan kesadaran telah pulih setelah overflow:hidden, yang tidak akan mempengaruhi pengoperasian normal demo ini). ,

Pertanyaannya sekarang adalah apakah akan menggunakan metode ini. Mari kita bandingkan kelebihan dan kekurangannya, dan Anda dapat memutuskan sendiri:

Lebih baik menggunakan metode penentuan posisi absolut. Metode ini saat ini memiliki dua keunggulan utama:

  1. pada dasarnya untuk setiap browser caranya sama, kode cssnya sederhana, mudah dimodifikasi, dan mudah dimengerti.
  2. kompatibel. Metode penentuan posisi absolut ada di bawah OP10. Saat ini tidak ada cara untuk memperbaiki bug tersebut, jadi saya harus mengambil jalan memutar.

Kerugian terbesarnya adalah tidak fleksibel. Jika tidak ada IE6, saya rasa saya pasti akan memilih metode penentuan posisi absolut.

Berikut contoh demo aplikasinya.

Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<meta name="penulis" content="Chomo" />
<link rel="mulai" href=" http://www.14px.com " title="Beranda" />
<title>Menggunakan ukuran kotak untuk mengimplementasikan bingkai imitasi div</title>
<gaya tipe="teks/css">
* { margin:0; bantalan:0;}
html { -ukuran kotak-webkit:kotak-perbatasan; -ukuran-kotak-moz:kotak-perbatasan; ukuran-kotak:kotak-perbatasan; padding:100px posisi:relatif;
html,badan { tinggi:100%;}
.top { posisi:relatif; margin-atas:-100px; tinggi:100px latar belakang:#f60;}
.side { posisi:relatif; tinggi:100%; latar belakang:#fc0; overflow:auto; lebar:200px; float:left:0 !penting;
.main { posisi:relatif; luapan:tersembunyi; tinggi:100%; latar belakang:#f30; padding-atas:100px; margin-atas:-100px; indeks-z:2;}
.iframe utama { tinggi:100%; lebar:100%; latar belakang:#fff; posisi:absolute;
.bottom { posisi:relatif; tinggi:100px; latar belakang:#f60;
</gaya>
</kepala>
<tubuh>
<div kelas="atas">
atas
</div>
<div kelas="sisi">
samping
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div kelas="utama">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div kelas="bawah">
dasar
</div>
</tubuh>
</html>

[Ctrl+A Semua tip pemilihan: Anda dapat memodifikasi sebagian kode terlebih dahulu, lalu tekan Jalankan]

Masalah yang harus diperhatikan :

Jangan berikan overflow:hidden ke badan, itu akan dengan kejam menyembunyikan apa pun di luarnya Hal-hal, termasuk top/bottom (header/footer);

satu hal penting yang harus dipahami :

Metode menghasilkan tinggi [100%+(N)px]: div { height:100%; )px;} .

 

 
Artikel Terkait