غالبًا ما نواجه (خاصة المبتدئين مثلي) مشكلة - التكيف مع الصورة. هذه المشكلة شائعة جدًا. في منطقة المقالات والمنتديات، يمكن القول أنه أينما يلزم تحميل الصور، توجد هذه المشكلة، ويسأل الناس عنها من وقت لآخر في المنتديات. لماذا؟ السبب بسيط، لا يمكننا أن نطلب من محرري الويب أو أعضاء المنتدى الخاص بك أن يكونوا قادرين على اقتصاص الصور أو فهم كود HTML الأساسي - على الرغم من أن هذا لا يحتوي على الكثير من المحتوى الفني.
تم تنفيذ الحل السابق بشكل أساسي باستخدام js، ولكن أي شخص استخدمه يعرف أن هذه الطريقة مرهقة بعض الشيء. هناك طريقة أخرى وهي تعريف التدفق الزائد: مخفي في حاوية خارجية. لكن هذه الطريقة لن تؤدي إلا إلى قص الصورة ولن يتم تطبيقها تلقائيًا.
يجب أن يكون ظهور الطريقة التالية ممتنًا لـ CSS2.0 الرائع وحتى Microsoft الأكبر (بدونها لن تكون هناك حاجة لامتلاك مثل هذا الكود المطول ^_^). لقد اجتزت الاختبار فقط على ie6.0 وff1.5 وopera7.0 ضمن نظام التشغيل WinXP. وآمل أن أستخدم هذه المقالة لإلهام الآخرين وآمل أن يتمكن المزيد من الخبراء من تقديم الإرشادات. المفتاح هو: max-width:780px؛ والسطر أدناه.
التكيف بكسل ثابت:
تشغيل مربع التعليمات البرمجية
<!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> <head> <meta http-equiv=Content-Type content=text/html; /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { حجم الخط: 12px; الموافقة المسبقة عن علم { الهامش: 0 تلقائي؛ العرض: 800 بكسل الحشو: 0؛ الحدود: 1 بكسل الصلبة #333 } #pic img{ max-width:780px; width:expression(document.body.clientWidth > 780? 780px: auto ); border:1px Dashed #000 } --> </style> </head> <body> <div id=pic> <img src=http //www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=شكرًا لـ blueidea على الصور ذات الروابط الساخنة! /> </div> </body> </html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
نسبة التكيف:
تشغيل مربع التعليمات البرمجية
<!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> <head> <meta http-equiv=Content-Type content=text/html; /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { حجم الخط: 12px; الموافقة المسبقة عن علم { هامش: 0 تلقائي؛ العرض: 90٪ الحشو: 0؛ الحدود: 1 بكسل الصلبة #333؛ width:expression(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); border:1px Dashed #000 } --> </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=شكرًا لك blueidea على الصورة ذات الارتباط السريع! /> </div> </body> </html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولا ثم الضغط على تشغيل]
يتذكر:
1 هذه الطريقة ليست مخصصة للصور فقط؛
2 الحد الأقصى للعرض، الحد الأقصى للارتفاع، الحد الأدنى للعرض، الحد الأدنى للارتفاع.
مقدمة لاستخدام التعبيرات في CSSالمؤلف: dozb
تعريف
يدعم IE5 والإصدارات الأحدث استخدام التعبير في CSS لربط خصائص CSS بتعبيرات Javascript. يمكن أن تكون خصائص CSS هنا خصائص متأصلة للعنصر أو خصائص مخصصة. وهذا يعني أن سمة CSS يمكن أن يتبعها تعبير Javascript، وقيمة سمة CSS تساوي نتيجة حساب تعبير Javascript. يمكنك الرجوع مباشرة إلى خصائص وأساليب العنصر نفسه في التعبير، أو استخدام كائنات متصفح أخرى. يبدو التعبير كما لو كان ضمن وظيفة عضو لهذا العنصر.
تعيين قيم للسمات الجوهرية للعناصر
على سبيل المثال، يمكنك وضع عنصر بناءً على حجم المتصفح.
#myDiv {
الموقف: مطلق؛
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
اليسار: التعبير (document.body.offsetWidth - 110 + px)؛
أعلى: التعبير (document.body.offsetHeight - 110 + بكسل)؛
الخلفية: أحمر؛
}
تعيين قيم لسمات العنصر المخصصة
على سبيل المثال، قم بإزالة المربعات المنقطة للارتباطات الموجودة على الصفحة.
النهج المعتاد هو:
<a href=link1.htm onfocus=this.blur()>link1</a>
<a href=link2.htm onfocus=this.blur()>link2</a>
<a href=link3.htm onfocus=this.blur()>link3</a>
للوهلة الأولى، قد لا تكون مزايا استخدام التعبير واضحة، ولكن إذا كان هناك العشرات أو حتى المئات من الروابط على صفحتك، فهل ستظل تستخدم Ctrl+C وCtrl+V ميكانيكيًا، ناهيك عن كليهما؟ يولد رمز أكثر زائدة عن الحاجة؟
طريقة استخدام التعبير هي كما يلي:
<نوع النمط=نص/css>
أ {نجمة: تعبير (onfocus=this.blur)}
</نمط>
<a href=link1.htm>link1</a>
<a href=link2.htm>link2</a>
<a href=link3.htm>link3</a>
يوضح:
النجمة الموجودة بالداخل هي سمة تحددها بنفسك، ويمكنك تعريفها كما تريد، فالبيان الموجود في Expression() هو نص JS فهو لا يزال CSS، لذا يتم وضعه في علامة النمط، وليس في البرنامج النصي. حسنًا، من السهل إزالة مربع الارتباط المنقط في الصفحة بجملة واحدة. لكن لا تكن راضيًا إذا كان التأثير الخاص الذي تم تشغيله هو تغيير في سمة CSS، فستكون النتيجة مختلفة عن نيتك الأصلية. على سبيل المثال، إذا كنت تريد تغيير لون مربع النص في الصفحة أثناء تحرك الماوس للداخل والخارج، فمن الطبيعي أن تعتقد أنه يجب كتابته بالشكل
/* النص الأصلي مشوه، ليس لدي الوقت لتصحيحه، آسف!*/
ولكن النتيجة هي خطأ في البرنامج النصي، والطريقة الصحيحة لكتابته هي كتابة تعريف نمط CSS في الوظيفة، كما هو موضح أدناه:
<نوع النمط=نص/css>
الإدخال {نجمة: التعبير (onmouseover=function())
{this.style.backgroundColor=#FF0000}،
onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }
</نمط>
<نوع الإدخال=نص>
<نوع الإدخال=نص>
<نوع الإدخال=نص>
يلاحظ:
ليس من الضروري جدًا استخدام التعبير بشكل عام، لأن التعبير يتطلب موارد متصفح عالية نسبيًا.