العربية
رمز التأثيرات الخاصة لصفحة الويب: قائمة منسدلة لصفحة الويب مصنوعة باستخدام CSS خالص
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | table)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head > <meta http- equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>قائمة منسدلة CSS خالصة، متوافقة مع IE وFF</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font- size:3em؛ text-align: center; 1px; z-index:100; } #ads {position:relative; z-index:10;} .menu {display:none;} #noniemenu {position:absolute;} #noniemenu .holder ul {padding:0; :0;} #noniemenu .holder ul li {list-style-type: none;} #noniemenu .holder li {} #noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {عرض: كتلة؛ الموضع: مطلق؛ اليسار: 105 بكسل؛ الهامش العلوي: -20 بكسل؛ الحدود: 1 بكسل صلب #000؛} #noniemenu .holder .bold {font-weight:bold;} #noniemenu .holder { color:# fff; العرض: 104 بكسل; الارتفاع: 18 بكسل; :auto } #noniemenu a.outer, #noniemenu a.outer:visited { color:#fff width:104px; الديكور: لا شيء: عائلة الخط: verdana، arial، sans-serif؛ } #noniemenu a.outer:hover { الخلفية:#697210؛ داخلي، #noniemenu a.inner: تمت الزيارة {display:block; height:18px; #eee; ]> <style type="text /css"> body {margin-top:-8px;} #head {height:147px;} #noniemenu {display:none;} .menu {display:blockposition:absolute;} .menu a.outer، .menu a.outer:visited { color:#fff; height:18px; -align:center; float:left ; text-decoration:none; hover {background:#697210; :visited {display:block; height:18px; border-bottom:1px Solid #000; color:#000; :10px; محاذاة النص:المركز } .menu a.inner:hover { الخلفية:#add; Font-weight:bold; } .menu a.outer table.first a. Second:hover {position:relative;visible; :-2px left:102px; border-collapse:collapse; border:#eee; border:1px Solid #000; lte IE 6]> <style> #ads {display:none;} #adsie {clear:both; -> </head> <body > <div id = "wrapper"> <div id = "head"> <div id = "positioner"> <div class = "menu"> <a class = "outer" href= "../menu/index.html">العروض التوضيحية <table class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="الصفر صفحة إعلانات بالدولار">صفر دولار</a> <a class="inner" href="../menu/embed.html" title="التفاف النص حول الصور">التفاف النص</a> <a class=" داخلي" href="../menu/form.html" title="نماذج التصميم">نموذج منمق</a> <a class="inner" href="../menu/nodots.html" title="إزالة حدود نشطة/تركيز">تركيز نشط </a> <a class="inner Second" href="../menu/hover_click.html" title="تحوم/انقر بدون حدود نشطة/تركيز">تحوم/انقر > <table><tr><td > <a class="inner" href="../menu/form.html" title="نماذج التصميم">نموذج منمق</a> <a class="inner" href= "../menu/nodots.html" title="إزالة الحدود النشطة/التركيز">التركيز النشط</a> <a class="inner" href="../menu/hover_click.html" title="Hover/ انقر بدون حدود نشطة/تركيز" >تحوم/نقر</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="الظل المسقط متعدد المواضع">ملاكمة الظل</a> <a class="inner" href="../menu/old_master.html" title="خريطة الصورة للحصول على معلومات مفصلة">خريطة الصورة</ a> <a class="inner " href="../menu/bodies.html" title="متعة مع صور الخلفية">خلفيات ممتعة</a> <a class="inner" href="../menu /fade_scroll.html" title=" Fade-Out Scrolling">التمرير التلاشي</a> <a class="inner" href="../menu/em_images.html" title="مقارنة الصور بحجمها">بحجمها الصور</a> </td ><</tr></table> </a> <a class="outer" href="index.html">القوائم <table class="first"><tr><td > <a class="inner" href="spies.html" title="قائمة مشفرة من الجواسيس">قائمة الجواسيس</a> <a class="inner" href="vertical.html" title="أفقي القائمة العمودية">القائمة العمودية</ a> <a class="inner" href="expand.html" title="قائمة غير مرتبة مكبرة">قائمة مكبرة</a> <a class="inner" href="enlarge .html" title="قائمة غير مرتبة تحتوي على صور الروابط">صور الروابط</a> <a class="inner" href="cross.html" title="روابط غير مستطيلة">غير مستطيلة</a> <a class="inner" href ="jigsaw.html" title="jigsaw links">روابط الصور المقطوعة</a> <a class="inner" href="circles.html" title="circular links">روابط دائرية </a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">التخطيطات <table class="first">< tr><td> <a class ="inner" href="../layouts/bodyfix.html" title="التخطيط الثابت عبر المتصفح">تم الإصلاح 1</a> <a class="inner" href=". ./layouts/body2.html" title="التخطيط الثابت عبر المتصفح">تم الإصلاح 2</a> <a class="inner" href="../layouts/body4.html" title="التخطيط الثابت عبر المتصفح" >تم الإصلاح 3</a> < a class="inner" href="../layouts/body5.html" title="تخطيط ثابت عبر المتصفح">تم الإصلاح 4</a> <a class="inner" href= "../layouts/minimum.html" title="تخطيط الحد الأدنى البسيط للعرض">الحد الأدنى للعرض</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">الصناديق <table class="first"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="Left" أشرطة التمرير">التمرير الأيسر</ a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px floatfix">IE6 3pxfix</a> <a class=" داخلي" href="../ boxs/snazzy.html" title="حدود أنيقة">حدود أنيقة</a> <a class="inner" href="../boxes/krazy.html" title="Krazy Korners">الزوايا المجنونة</a> <a class="inner" href="../boxes/outside.html" title="Percentage PLUS بكسل">% PLUS بكسل</a> <a class="inner" href="../boxes/ minwidth.html" title="min-width for IE">العرض الأدنى لـ IE</a> عنوان <a class="inner" href="../boxes/minheight.html" ="min-height for IE" >IE min-height</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index. html">MOZILLA <table class= "first"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="القائمة المنسدلة">القائمة المنسدلة< /a> <a class=" inside" href="../mozilla/cascade.html" title="قائمة متتالية">قائمة متتالية</a> <a class="inner" href="../mozilla /content.html" title=" استخدام المحتوى:">المحتوى:</a> <a class="inner" href="../mozilla/moxbox.html" title=":تم تطبيق التمرير على div">mozzie box</a> <a class ="inner" href="../mozilla/rainbow.html" title="يمكنني بناء قوس قزح">صندوق قوس قزح</a> <a class="inner" href=" ../mozilla/snooker.html " title="Snooker cue">إشارة السنوكر</a> <a class="inner" href="../mozilla/target.html" title="التدريب على الهدف">التدريب على الهدف </a> <a class= "inner" href="../mozilla/splittext.html" title="عناوين ذات نغمتين">عناوين ذات نغمتين</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="نص الظل">نص الظل</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">المستكشف < table class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="المثال الأول">المثال الأول< /a> <a class="Inner" href="../ie/weft.html" title="خطوط اللحمة">خطوط اللحمة</a> <a class="inner" href="../ie/ exampletwo.html" title="Vertical align">محاذاة عمودية</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">التعتيم <table class= "first"><tr><td> <a class="inner" href="../opacty/colours.html" title="عجلة الألوان">ألوان غير شفافة</a> <a class="inner" href ="../opacty/picturemenu.html" title="قائمة تستخدم العتامة">قائمة مبهمة</a> <a class="inner" href="../opacty/png .html" title="partial opacity ">التعتيم الجزئي</a> <a class="inner" href="../opacty/png2.html" title="partial opacity II">التعتيم الجزئي II</a> </td></tr> </table> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">العروض التوضيحية</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="الإعلانات بقيمة صفر دولار page">صفر دولار</a ><</li> <li><a class="inner" href="../menu/embed.html" title="التفاف النص حول الصور">التفاف النص</a> </li> <li>< a class="inner" href="../menu/form.html" title="نماذج التصميم">نموذج منمق</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="إزالة الحدود النشطة/التركيز">التركيز النشط</a></li> <li><a class="inner Second" href=". ./menu/hover_click.html" title="التمرير/النقر بدون حدود نشطة/تركيز">التمرير/النقر </a> <ul id="a3"> <li><a class="inner" href= "../menu/form.html" title="نماذج التصميم">نموذج منمق</a></li> <li><a class="inner" href="../menu/nodots.html" title ="إزالة الحدود النشطة/التركيز" >التركيز النشط</a></li> <li><a class="inner" href="../menu/hover_click.html" title="التمرير/النقر بدون نشط /focus border">تحويم/نقر </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="متعدد -position drop Shadow">ملاكمة الظل </a></li> <li><a class="inner" href="../menu/old_master.html" title="خريطة الصورة للحصول على معلومات مفصلة">خريطة الصورة </a></li> <li><a class="inner" href="../menu/bodies.html" title="متعة مع صور الخلفية">خلفيات ممتعة</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="fade-out التمرير">التمرير التلاشي</a></li> <li><a class="inner" href="../menu/ em_images.html" title="مقارنة الصور بحجمها">صور بحجمها</a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "outer" href="index.html">القوائم</a></li> <li><a class="inner" href="spies.html" title="a مشفر قائمة الجواسيس">قائمة الجواسيس</a></li> <li><a class="inner" href="vertical.html" title="a Horizontal Vertical Menu">القائمة العمودية</a></li > <li><a class= "inner" href="expand.html" title="قائمة غير مرتبة مكبرة">قائمة مكبرة</a></li> <li><a class="inner" href=" تكبير.html" title="قائمة غير مرتبة تحتوي على صور الروابط">روابط الصور</a></li> <li><a class="inner" href="cross.html" title="روابط غير مستطيلة" >غير مستطيلة</a> </li> <li><a class="inner" href="jigsaw.html" title="jigsaw links">روابط بانوراما</a></li> <li>< a class="inner" href= "circles.html" title="circular links">روابط دائرية</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">التخطيطات</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="التخطيط الثابت عبر المتصفح">تم الإصلاح 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="تم إصلاح التوافق بين المتصفحات تخطيط">تم الإصلاح 2</a ><</li> <li><a class="inner" href="../layouts/body4.html" title="تخطيط ثابت عبر المتصفح">تم الإصلاح 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="تخطيط ثابت عبر المتصفح">تم الإصلاح 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="تخطيط الحد الأدنى البسيط للعرض">الحد الأدنى للعرض</a></li> </ul> </div> <div class=" حامل"> <ul> <li ><a class="outer" href="../boxes/index.html">صناديق</a></li> <li><a class="inner" href= "../boxes/scrollbars.html" title="أشرطة التمرير اليسرى">التمرير الأيسر</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px floatfix">IE6 3pxfix</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="حدود أنيقة">أنيق الحدود</a></li > <li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">الزوايا الكرازي</a></li> <li ><a class="inner" href="../boxes/outside.html" title="النسبة المئوية PLUS بكسل">% PLUS بكسل</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="min-width for IE">العرض الأدنى لـ IE</a></li> <li><a class="inner" href="../boxes /minheight.html" title=" min-height for IE">IE min-height</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="outer" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="قائمة منسدلة" >قائمة منسدلة</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="قائمة متتالية"> القائمة المتتالية</a></ li> <li><a class="inner" href="../mozilla/content.html" title="استخدام المحتوى:">المحتوى:</a></li> <li><a class=" inside" href="../mozilla/moxbox.html" title=":تم تطبيق التمرير على div">مربع mozzie</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="أستطيع بناء قوس قزح">صندوق قوس قزح</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="إشارة السنوكر">إشارة السنوكر</a></li> <li><a class="inner" href="../mozilla/target.html" title="الهدف التدريب">التدريب على الهدف</a ><</li> <li><a class="inner" href="../mozilla/splittext.html" title="عناوين ذات نغمتين">عناوين ذات نغمتين</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">نص الظل</a></li> </ul> </div > <div class="holder" > <ul> <li><a class="outer" href="../ie/index.html">المستكشف</a></li> <li><a class ="inner" href=". ./ie/exampleone.html" title="Example one">المثال الأول</a></li> <li><a class="inner" href="../ie /weft.html" title=" خطوط اللحمة">خطوط اللحمة</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="محاذاة عمودية" >محاذاة عمودية</a>< /li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">التعتيم</a> </li> <li><a class="inner" href="../opacty/colours.html" title="colour wheel">ألوان غير شفافة</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="قائمة تستخدم العتامة">قائمة غير شفافة</a></li> <li><a class=" داخلي" href="../ opacty/png.html" title="partial opacity">عتامة جزئية</a></li> <li><a class="inner" href="../opacty/png2 .html" title="partial opacity II">العتامة الجزئية II</a></li> </ul> </div> </div> </div> </div> <!-- نهاية الرأس - -> <div id="info "> <h2>متعة الإسقاط</h2> <h1>بدون جافا سكريبت</h1> <h1>فقط CSS!!!</h1> <h1 class="red">الآن مع تتالي</h1> </h1> div> </div> </body> </html>
