Saat kami merancang halaman web, kami selalu menemukan beberapa hal yang tidak menyenangkan. Yang paling umum adalah bahwa setelah menambahkan konten di latar belakang, kami menemukan bahwa halaman yang ditampilkan tersebar terbuka, yang membuat halaman web sangat tidak sedap dipandang. Di masa lalu, orang pada dasarnya merancang tabel, sehingga secara alami ada banyak solusi online. Sekarang ada desain standar Div CSS, dan mereka jarang melihat metode yang baik. Sekarang Xiaoxiang Online merangkum metode baik yang ditemukan dalam kehidupan sehari -hari untuk mencegah tabel dari tersebar dan membaginya dengan Anda.
1. Atur ukuran gambar langsung pada halaman web, misalnya, kode: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg width = 600 tinggi = 500 border = 0>. Meskipun ini dapat membatasi ukuran gambar, Anda perlu memodifikasi ukuran gambar secara manual sebelum mengunggah gambar, jika tidak gambar yang diunggah akan berubah bentuk.
2. Gunakan kode berikut: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javascript: if (this.width> 600}> {this.ressized = true; this.style.width = 600;}>
Metode ini akan secara otomatis menyusut ke lebar yang ditentukan saat memanggil gambar, yang tidak akan menyebabkan gambar dideformasi, dan tidak akan merusak tabel. Namun, kerugiannya adalah bahwa jika gambar terlalu besar, selama proses pengunduhan gambar, yaitu, selama proses tampilan gambar, pertama -tama akan ditampilkan dalam ukuran asli gambar, yang akan merusak tabel, dan halaman akan jelek. Kedua, ketika gambar ditampilkan sepenuhnya, gambar akan secara otomatis menyusut.
3. Kita dapat membatasi ukuran tabel untuk mencegahnya terentang, misalnya, tambahkan kode dalam <lebar tabel = 600 border = 0 cellpadding = 0 cellpacing = 0> style = tabel-tabel: diperbaiki; word-word: break-word; break kata; break-all-all-layout tabel: diperbaiki; adalah untuk memperbaiki tata letak tabel, yang secara efektif dapat mencegah tabel agar tidak diregangkan. Word-Wrap: Break-word; adalah untuk mengontrol jeda garis, yaitu untuk menegakkan jeda garis. Ini perlu digunakan ketika ada banyak konten teks. Konten duplikat yang luar biasa muncul dan jika garis istirahat tidak dieksekusi, tabel akan dibentang; dan break kata: break-all; Ini dapat menyelesaikan masalah bahwa kerangka IE disebarkan oleh bahasa Inggris (garis teks non-Asia), tetapi tidak akan memaksa bungkus garis, dan hanya konten dalam lebar tabel yang ditampilkan. Secara umum, cukup gunakan gaya = tabel-tabel: diperbaiki; word-wrap: break-word; Tentu saja, pernyataan yang disebut di atas dapat didefinisikan dalam CSS, misalnya
| meja { tabel-tabel: diperbaiki; Word-Wrap: Break-word; } |
4. Gunakan CSS untuk mengontrol ukuran adaptif gambar, kodenya adalah sebagai berikut:
| img { Max-Width: 600px; lebar: ekspresi (this.width> 600? 600px: this.width); meluap: tersembunyi; } |
Di antara mereka, Max-Width: 600px; Di browser non -e lainnya seperti IE7 dan Firefox, lebar maksimum 600px, tetapi tidak valid di IE6; Lebar: 600px; Di semua browser, ukuran gambarnya adalah 600px. Ketika ukuran gambar lebih besar dari 600px, ia akan secara otomatis menyusut ke 600px, yang valid di IE6; dan meluap: tersembunyi; mengacu pada menyembunyikan bagian di luar ukuran set untuk menghindari deformasi tabel karena kegagalan mengendalikan ukuran gambar. 2 halaman Total halaman sebelumnya halaman berikutnya