{في HTML السابق، كان من الممكن ترتيب مواضع العناصر بشكل تسلسلي فقط، وكان من الصعب علينا تحديد موقع بعض العناصر والتحكم فيها بدقة في صفحة الويب. CSS2؟ المستوى 2 من ورقة الأنماط المتتالية، تظهر سمة التخطيط للإصدار 2 من ورقة الأنماط المتتالية ويتم الحصول عليها بفضل الدعم الواسع النطاق للمتصفحات، لا يمكننا تحقيق الغرض المذكور أعلاه بشكل ثابت فحسب، بل يمكننا أيضًا التنبؤ بناءً على الماوس ولوحة المفاتيح والوقت وما إلى ذلك. الأحداث الخارجية المحددة تغير التخطيط ديناميكيًا. "الطبقة النشطة" في صفحات الويب المشهورة جدًا هي عبارة عن تطبيق صور لها، وما سنتحدث عنه هنا هو كيفية استخدام هذه السمات جنبًا إلى جنب مع بعض كائنات DHTML لتنفيذ قائمة منسدلة مشابهة لنافذة Windows في. صفحة الويب (كما هو موضح في الشكل)). يرجى الاطلاع على الكود التالي والتعليمات التفصيلية.
<?--يجب إدراج الجزء التالي بعد <head> للكود-->
<style><?--
/? هذه بعض أنماط CSS. من بينها، "btnTD" هي فئة النمط التي "ترفع" الزر قبل الضغط عليه: يتم تعيين الحدود على خط متصل بعرض 1 بكسل، حيث تكون الحدود اليسرى والعلوية فاتحة اللون (أبيض هنا) ، ويتم تعيين الحد الأيمن السفلي على خط متصل بعرض 1 بكسل. ويكون الحد داكنًا (رمادي غامق). إذا كان عنصر HTML (مثل الخلية) بخلفية رمادية يستخدم هذا النمط، فسيبدو رائعًا يشبه إلى حد كبير الزر "البارز"؛ ويعني "btnDTD" أن الزر "مقعر" عند الضغط عليه. ?／
.
BTNTD - الحدود1
الصلبة #FFFFFF - اليمين
؟ BTNDTD - الحدود 1 الصلبة # 808080
-
اليمين
؟
> ＞
＜?--
// متغير عام لتحديد الزر الذي سيتم الضغط عليه
var intBlnClk=0?
// يمرر الماوس ويترك وينقر لتغيير
وظيفة نمط CSS للخلية mOvrOut?objSrc
?? strColor?strBgColor?strClass?strClassD?
argv=mOvrOut. الحجج؟ argc=argv. length?
/?لا تقم بتعيين الكائن الحالي على أنه "نشط" افتراضيًا?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?النمط الافتراضي للكائن الحالي عند مرور الماوس هو "شكل الزر البارز"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?الكائن الحالي هو "على شكل زر مقعر" افتراضيًا عند النقر بالماوس؟/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′?
/? اضبط اللون الأمامي للكائن الحالي على اللون الأبيض، ولون الخلفية على اللون الأزرق، ونمط الماوس لشكل اليد
؟ ′?strCursor= 'hand'?
/? IE4 والإصدارات الأحدث تدعم فقط تغييرات JavaScript الديناميكية في
مستند
CSS؟all؟؟
// قم بتعيين نمط الماوس للكائن الحالي على قيمة المعلمة التي تم تمريرها
objSrc. أسلوب. cursor=strCursor?
// إذا دخل الماوس إلى نطاق الكائن الحالي
if??objSrc. محتويات ؟ الحدث. fromElement؟؟؟
/ تعيين كنمط نشط؟ /
إذا؟objSrc. bgColor=strBgColor?objSrc. أسلوب. color=strColor?
/?عندما لا يلزم تعيين الكائن الحالي كنمط نشط، إذا كان النمط الأصلي هو "شكل زر بارز"، فاضبطه على "شكل زر مقعر"، والعكس صحيح؟/
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ?
// يترك الماوس منطقة الكائن الحالية
else if??objSrc. محتويات ؟ الحدث. toElement؟؟؟
// اضبط هذه الأنماط على القيمة الافتراضية
objSrc. bgColor=''?objSrc. أسلوب. color=''?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? وظيفة عامة لإظهار/إخفاء الطبقات. استخدم objNS وobjIE وstrStu كمعلمات، حيث يمثل objNS وobjIE "طبقات" Netscape وIE على التوالي. "Object، strStu هي حالة الطبقة. نظرًا لضيق المساحة، يرجى الاطلاع على التعليمات الموجودة في نهاية هذه المقالة. ?/
وظيفة showHidLayers ؟؟؟؟
/ قم باستدعاء الوظيفة أعلاه لإظهار/إخفاء الطبقة التي تم تمريرها بواسطة المعلمة، وذلك لتبسيط الكود. لا يتم إعطاء وظائف مفصلة هنا. ?/
function showLayer?intCurrent؟؟؟
//--></script> ＜/head＞
Element．style．color＝＝''? showLayer?1?hide′ ?″>
<?-- وظيفة الجزء العلوي من النص هو إخفاء كافة "القوائم" التي يجب إخفاؤها عندما لا يضغط الماوس على أي زر. فيما يلي طبقتان محددتان بتخطيط CSS. الحالة الأولية للطبقة المسماة "القائمة" هي: الموضع المطلق على الشاشة هو (12؟12)، مرئي، وسمة فهرس الطبقة هي 100؛ تكون غير مرئية. -->
<div id="menu" style="position?absolute?visi bility? visual?left?12px?top?12px? z-index? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ UT
? / الجدول ＞ < / DIV>
<DIV ID =″
Menu1 ″ ″ TOP؟ ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
TR ＞ <TD ONMOUSEOVER = ″ Movrout? TRUE ?″ onMouseOut=″mOvrOut?this?″ =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／'? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞ نادي قراء أخبار الكمبيوتر＜/td＞＜/tr＞ ＜/table ＞
＜ /div＞
نظرًا لضيق المساحة، لا يمكن تقديم بعض الوظائف وشرحها بالتفصيل. إذا كنت بحاجة إلى الكود الكامل، فيرجى زيارة الرابط التالي: http?//ctsighｈ t. com.topcool. صافي/المستندات/القائمة. أتش تي أم أل.