عندما نقوم بتصميم صفحات الويب ، نواجه دائمًا بعض الأشياء غير السارة. الأكثر شيوعًا هو أنه بعد إضافة محتوى في الخلفية ، نجد أن الصفحة المعروضة تنتشر مفتوحة ، مما يجعل صفحة الويب قبيحة للغاية. في الماضي ، صمم الأشخاص الطاولات بشكل أساسي ، لذلك هناك العديد من الحلول عبر الإنترنت بشكل طبيعي. الآن هناك تصميمات قياسية Div CSS ، ونادراً ما ترى الطرق الجيدة ذات الصلة. الآن يلخص Xiaoxiang Online الطرق الجيدة الموجودة في الحياة اليومية لمنع الطاولات من الانتشار ومشاركتها معك.
1. قم بتعيين حجم الصورة مباشرة على صفحة الويب ، على سبيل المثال ، الكود: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg width = 600 height = 500 border = 0>. على الرغم من أن هذا يمكن أن يحد من حجم الصورة ، إلا أنك تحتاج إلى تعديل حجم الصورة يدويًا قبل تحميل الصورة ، وإلا فإن الصورة التي تم تحميلها ستشوه.
2. استخدم الكود التالي: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javaScript: if (this.width> 600} {this.resized = true ؛ this.style.width = 600 ؛}>
ستتقلص هذه الطريقة تلقائيًا إلى العرض المحدد عند استدعاء الصورة ، والتي لن تتسبب في تشوه الصورة ، ولن تكسر الجدول. ومع ذلك ، فإن العيب هو أنه إذا كانت الصورة كبيرة جدًا ، أثناء عملية تنزيل الصورة ، فإن ، أثناء عملية عرض الصورة ، سيتم عرضها أولاً في الحجم الأصلي للصورة ، والتي ستقوم بتكسير الجدول ، وستكون الصفحة قبيحة. ثانياً ، عند عرض الصورة بالكامل ، ستنكمش الصورة تلقائيًا.
3. يمكننا الحد من حجم الجدول لمنعه من تمديده ، على سبيل المثال ، إضافة الكود في <عرض الجدول = 600 الحدود = 0 cellpadding = 0 cellpading = 0> style = table-layout: fixed ؛ word-wrap: break-break ؛ break-all ؛ ، where table-layout: filed ؛ هو إصلاح تخطيط الجدول ، والذي يمكن أن يمنع الجدول بشكل فعال من تمديده. Word-Wrap: كلمة استراحة ؛ هو للتحكم في فترات الاستراحة ، أي لفرض فترات الراحة. يجب استخدام هذا عندما يكون هناك الكثير من محتوى النص. يظهر محتوى مكرر غير عادي ، وإذا لم يتم تنفيذ عمليات فواصل الخط ، فسيتم تمديد الجدول ؛ و Word-Break: Break-All ؛ يمكن أن يحل المشكلة التي يتم نشرها في إطار IE بواسطة اللغة الإنجليزية (خطوط النص غير الآسيوية) ، ولكنها لن تجبر غلاف الخط ، ويتم عرض المحتوى في عرض الجدول فقط. بشكل عام ، فقط استخدم النمط = الطبقات الجدول: ثابت ؛ Word-Wrap: Word-Word ؛ بالطبع ، يمكن تعريف العبارات المذكورة أعلاه في CSS ، على سبيل المثال
| طاولة { طاولة الطاولة: ثابت ؛ Word-Wrap: كلمة استراحة ؛ } |
4. استخدم CSS للتحكم في الحجم التكيفي للصورة ، والرمز كما يلي:
| IMG { Max-Width: 600px ؛ العرض: التعبير (this.width> 600؟ 600px: this.width) ؛ الفائض: مخفي. } |
من بينهم ، Max-Width: 600px ؛ في متصفحات أخرى غير IE مثل IE7 و Firefox ، فإن الحد الأقصى للعرض هو 600 بكسل ، لكنه غير صالح في IE6 ؛ العرض: 600 بكسل ؛ في جميع المتصفحات ، يكون حجم الصورة 600 بكسل. عندما يكون حجم الصورة أكبر من 600 بكسل ، فإنه سوف يتقلص تلقائيًا إلى 600 بكسل ، وهو صالح في IE6 ؛ والتفوق: مخفي. يشير إلى إخفاء الجزء خارج حجم المجموعة لتجنب تشوه الجدول بسبب الفشل في التحكم في حجم الصورة. صفحتان في إجمالي الصفحة السابقة 12 الصفحة التالية