01 من 06
كيفية إنشاء الملاحة تبويب مع المغلق ولا الصور
التنقل على صفحات الويب هو شكل من أشكال القائمة ، ويشبه التنقل المبوب القائمة الأفقية. من السهل إلى حد ما إنشاء التنقل الأفقي المبرمج مع CSS ، لكن CSS 3 يعطينا بضعة أدوات أخرى لجعلها تبدو أجمل.
سوف يأخذك هذا البرنامج التعليمي من خلال HTML و CSS اللازمين لإنشاء قائمة مبوبة CSS. انقر على هذا الرابط لترى كيف سيبدو.
لا تستخدم هذه القائمة المبوبة أي صور ، فقط HTML و CSS 2 و CSS 3. يمكن تعديلها بسهولة لإضافة المزيد من علامات التبويب أو تغيير النص فيها.
دعم المتصفح
ستعمل قائمة علامات التبويب هذه في جميع المتصفحات الرئيسية . لن يظهر مستكشف الإنترنت الزوايا المستديرة ، ولكن سيتم عرض علامات تبويب مثل Firefox و Safari و Opera و Chrome.
02 من 06
اكتب قائمة القائمة الخاصة بك
جميع قوائم التنقل وعلامات التبويب هي في الحقيقة مجرد قائمة غير مرتبة. لذا فإن أول شيء تريد القيام به هو كتابة قائمة غير مرتبة من الروابط إلى المكان الذي تريد الانتقال إليه.
يفترض هذا البرنامج التعليمي أنك تكتب HTML في محرر نصوص وأنك تعرف مكان وضع HTML لقائمتك على صفحة الويب الخاصة بك.
اكتب قائمة غير مرتبة لديك على هذا النحو:
- الطبقة = "tablist">
- CSS 3
- id = "current"> علامات التبويب
- إلى عن على
- القوائم
ستلاحظ أن الشفرة تستدعي أمرين: class = "tablist" و id = "current". الأول مطلوب . إذا لم تضع فصل القائمة على قائمة غير مرتبة ، فلن تعمل علامات التبويب. والثاني هو اختياري. ضع id = "current" على أي علامة تبويب ترغب في إبرازها في هذه الصفحة. عادة ما أستخدم هذا لإبراز الصفحة التي أقوم بها ، ولكن يمكنك استخدامها لتمييز علامة التبويب الأكثر أهمية. أو يمكنك إزالته تمامًا.
03 من 06
بدء تحرير ورقة الأنماط الخاصة بك
يمكنك استخدام إما ورقة أنماط خارجية أو ورقة أنماط داخلية . تستخدم صفحة قائمة النماذج ورقة أنماط داخلية في
للمستند.أولا سنقوم بتصميم ماي بنفسه
هذا هو المكان الذي نستخدم فيه قائمة علامات التبويب للفئة .في HTML. بدلاً من تصميم علامة UL ، التي ستقوم بنمط كل القوائم غير المرتبة على صفحتك ، يجب عليك فقط تصميم فئة UL. tablist لذا يجب أن يكون الإدخال الأول في CSS الخاص بك:
.tablist {}أحب أن أضع في نهاية المشط المتعرج (}) في وقت مبكر ، لذلك لا ننسى ذلك في وقت لاحق.
في حين أننا نستخدم علامة قائمة غير مرتبة لقائمة علامة التبويب ، لكننا لا نريد أن تتسلل أية أرقام أو أرقام. لذا ، فإن النمط الأول الذي يجب عليك إضافته هو. على غرار القائمة: لا شيء؛ هذا يخبر المتصفح أنه في حين أنها قائمة ، فهي قائمة لا تحتوي على أنماط محددة مسبقًا (مثل الرموز النقطية أو الأرقام).
بعد ذلك ، يمكنك تعيين ارتفاع القائمة لتطابق المساحة التي تريدها لملئها. اخترت 2em لارتفاعي ، حيث أن هذا هو ضعف حجم الخط القياسي ، ويعطي حوالي نصف م أعلى وأسفل نص علامة التبويب. الطول: 2em. ولكن يمكنك ضبط عرضك على الحجم الذي تريده. ستشغل علامات UL تلقائيًا 100٪ من العرض ، لذلك ما لم ترغب في أن يكون أصغر من الحاوية الحالية ، يمكنك ترك العرض خارجًا.
وأخيرًا ، إذا لم يكن لديك ورقة أنماط رئيسية إعدادات مسبقة لعلامات UL و OL ، فستحتاج إلى وضعها. وهذا يعني أنه يجب عليك إيقاف تشغيل الحدود والهوامش والحشو على UL الخاص بك. الحشو: 0؛ هامش: 0؛ الحدود: لا شيء ؛ إذا قمت بالفعل بإعادة تعيين علامة UL ، فيمكنك تغيير الهوامش أو الحشو أو الحد إلى شيء يتناسب مع التصميم الخاص بك.
يجب أن تبدو فئة .tablist النهائية كما يلي:
.tablist {list-style: none؛ الطول: 2em. الحشو: 0؛ هامش: 0؛ الحدود: لا شيء ؛ }04 من 06
تحرير عناصر قائمة LI
بمجرد أن تقوم بطباعة قائمة غير مرتبة ، يجب عليك وضع علامات LI داخله. وإلا ، فسيعملون كقائمة قياسية وينتقل كل منهم إلى السطر التالي دون وضع علامات التبويب بشكل صحيح.
أولاً ، قم بإعداد خاصية النمط الخاص بك:
.tablist li {}ثم تريد تعويم علامات التبويب الخاصة بك بحيث تصطف على المستوى الأفقي. تعويم: اليسار؛
ولا تنس إضافة بعض الهامش بين علامات التبويب ، حتى لا يتم دمجهما معًا. الهامش اليمين: 0.13em؛
يجب أن تبدو أنماطك كالتالي:
.tablist li {float: left؛ الهامش اليمين: 0.13em؛ }05 من 06
جعل علامات التبويب تبدو مثل علامات التبويب مع CSS 3
لتنفيذ معظم الرفع الثقيل في ورقة الأنماط هذه ، أستهدف الروابط ضمن القائمة غير المرتبة. تتعرف المتصفحات على أن الروابط تعمل أكثر على صفحة ويب أكثر من العلامات الأخرى ، لذلك من الأسهل بالنسبة للمتصفحات القديمة الالتزام بأشياء مثل حالات التمرير إذا قمت بإرفاقها بعلامة الربط (الروابط). لذا اكتب أولاً خصائص نمطك:
.tablist li a {} .tablist li a: hover {}نظرًا لأن علامات التبويب هذه يجب أن تكون بمثابة علامات تبويب في تطبيق ما ، فإنك تريد أن تكون منطقة علامة التبويب بأكملها قابلة للنقر ، وليس فقط النص المرتبط. للقيام بذلك ، يجب عليك تحويل علامة A من الحالة " المضمّنة " العادية إلى عنصر كتلة . العرض محجوب؛ (إذا كنت مهتمًا بمعرفة المزيد حول الاختلاف ، اقرأ Block-Level vs. Inline Elements .)
ثم ، طريقة سهلة لفرض علامات التبويب الخاصة بك لتكون متناظرة مع بعضها البعض ، ولكن لا يزال المرن لتتناسب مع عرض النص هو جعل اليمين واليسار حشو نفسه. استخدمت خاصية اختزال الحشو لتعيين الأعلى والأسفل إلى 0 واليمين واليسار إلى 1em. الحشو: 0 1em.
اخترت أيضًا إزالة الرابط المضمن ، بحيث تبدو علامات التبويب أقل مثل الروابط. ولكن إذا كان هناك حيرة لدى جمهورك ، فاترك هذا الخط. الارتباط الديكور: لا شيء؛
بوضع حد رفيع حول علامات التبويب ، يجعلها تبدو كعلامات تبويب. استخدمت خاصية اختزال الحدود لوضع الحدود حول حدود الأطراف الأربعة: 0.06em solid # 000؛ ثم استخدم خاصية الحد السفلي لإزالتها من الأسفل. الحدود القاع: 0؛
ثم قمت بإجراء بعض التعديلات على الخط واللون ولون الخلفية لعلامات التبويب. قم بضبطها على الأنماط التي تطابق موقعك. font: bold 0.88em / 2em brial، geneva، helvetica، sans-serif؛ اللون: # 000؛ لون الخلفية: #CCC.
يجب أن تنتقل جميع الأنماط أعلاه إلى محدد .tablist li ، القاعدة بحيث تؤثر على علامات الربط بشكل عام. بعد ذلك ، لجعل علامات التبويب تبدو قابلة للنقر بشكل أكبر ، يجب عليك إضافة بعض قواعد الولاية .tablist li a: hover.
أحب تغيير لون النص والخلفية لجعل علامة التبويب تنبثق عند الماوس فوقها. خلفية: # 3cf. اللون: # الاتحاد الفرنسي.
وقمت بتضمين تذكير آخر للمتصفحات التي أرغب في عدم ظهور رابط تحتها. النص الديكور: لا شيء؛ طريقة أخرى شائعة هي إعادة تشغيل التسطير عند الماوس فوق علامة التبويب. إذا كنت ترغب في القيام بذلك ، قم بتغييره إلى زخرفة النص: تسطير ؛
لكن أين CSS 3؟
إذا كنت مهتمًا ، فربما لاحظت أنه لم يتم استخدام أي أنماط CSS 3 في ورقة الأنماط. هذا له ميزة العمل في أي متصفح حديث ، بما في ذلك Internet Explorer. لكنه لا يجعل علامات التبويب تبدو كأي شيء أكثر من مربعات مربعة. عن طريق إضافة نصف قطر حد اتصال نمط CSS (والمكالمات المرتبطة بالمستعرض المرتبط بها) ، يمكنك جعل الحواف مدورة ، لتبدو أكثر مثل علامات التبويب في مجلد manila.
الأنماط التي يجب إضافتها إلى قاعدة .tablist li هي: -webkit-border-top-right-radius: 0.50em؛ -webkit الحدود أعلى من اليسار دائرة نصف قطرها: 0.50em؛ -moz الحدود، دائرة نصف قطرها topright: 0.50em؛ -moz الحدود، دائرة نصف قطرها topleft: 0.50em؛ أعلى الحد من اليمين دائرة نصف قطرها: 0.50em؛ دائرة نصف قطرها الحد العلوي من اليسار: 0.50em؛
هذه هي قواعد النمط النهائي التي كتبتها:
.tablist li a {display: block؛ الحشو: 0 1em. النص الديكور: لا شيء؛ border: 0.06em solid # 000؛ الحدود القاع: 0؛ font: bold 0.88em / 2em brial، geneva، helvetica، sans-serif؛ اللون: # 000؛ لون الخلفية: #CCC. / * CSS 3 elements * / webkit-border-top-right-radius: 0.50em؛ -webkit الحدود أعلى من اليسار دائرة نصف قطرها: 0.50em؛ -moz الحدود، دائرة نصف قطرها topright: 0.50em؛ -moz الحدود، دائرة نصف قطرها topleft: 0.50em؛ أعلى الحد من اليمين دائرة نصف قطرها: 0.50em؛ دائرة نصف قطرها الحد العلوي من اليسار: 0.50em؛ } .tablist li a: hover {background: # 3cf؛ اللون: # الاتحاد الفرنسي. النص الديكور: لا شيء؛ }باستخدام هذه الأنماط ، لديك قائمة tabbed تعمل في جميع المتصفحات الرئيسية وتبدو وكأنها علامات تبويب مطبوعة في المتصفحات المتوافقة مع CSS 3. توفر لك الصفحة التالية خيارًا إضافيًا يمكنك استخدامه لارتدائه أكثر.
06 من 06
قم بتمييز علامة التبويب الحالية
في HTML الذي قمت بإنشائه ، كان لدى UL عنصر قائمة واحد بمعرف. هذا يسمح لك بإعطاء واحد LI نمط مختلف عن الباقي. الموقف الأكثر شيوعًا هو جعل علامة التبويب الحالية مميزة بطريقة ما. هناك طريقة أخرى للتفكير في ذلك وهي أنك تريد حجب علامات التبويب غير النشطة. يمكنك حينئذٍ تغيير مكان المعرف على الصفحات المختلفة.
أقوم بتمييز كلا من #current A و #current A: huer sta بحيث يكون كلاهما مختلفين بعض الشيء. يمكنك تغيير اللون ولون الخلفية وحتى الارتفاع والعرض والحشو الخاصين بهذا العنصر. قم بإجراء أي تغييرات منطقية في التصميم الخاص بك.
.tablist li # current a {background-color: # 777؛ اللون: #fff؛ } .tablist li # current a: hover {background: # 39C؛ }إنتهيت! لقد قمت للتو بإنشاء قائمة تبويب لموقع الويب الخاص بك.