أمثلة من علامة التبويب CSS
هذا الفصل سوف نقدم كيفية إنشاء مثيل من الترحيل من خلال استخدام CSS.
علامات بسيطة
إذا كان موقعك يحتوي على عدة صفحات، سوف تحتاج إلى استخدام علامة التبويب لجعل التنقل لكل صفحة.
يوضح المثال التالي كيفية استخدام HTML و CSS لإنشاء الصفحة:
أمثلة CSS
عرض: مضمنة كتلة.
الحشو: 0؛
هامش: 0؛
}
ul.pagination لى {عرض: مضمنة؛}
ul.pagination لى {
اللون: أسود؛
تطفو: اليسار،
الحشو: 8px 16px؛
النص الديكور: لا شيء؛
}
محاولة »
انقر فوق علامة التبويب وتحوم أسلوب
إذا نقرت على هذه الصفحة، يمكنك استخدام .active لتعيين نمط الصفحة الحالية، يمكنك استخدام الماوس ينته :hover محددات لتعديل نمط:
أمثلة CSS
لون الخلفية: # 4CAF50.
اللون: أبيض؛
}
ul.pagination لى: تحوم: لا ( .active) {لون الخلفية: #DDD؛}
محاولة »
أمثلة CSS
لون الخلفية: # 4CAF50.
اللون: أبيض؛
}
ul.pagination لى: تحوم: لا (.active) {لون الخلفية: #DDD؛}
محاولة »
أسلوب مدورة
يمكنك استخدام border-radius الممتلكات للالصفحة المحددة لإضافة مقربة أسلوب زوايا:
أمثلة CSS
الحدود بين دائرة نصف قطرها: 5px؛
}
ul.pagination لى a.active {
الحدود بين دائرة نصف قطرها: 5px؛
}
محاولة »
الانتقال من آثار تحوم
يمكننا أن نضيف transition الملكية لتحريك الماوس على الصفحة عند إضافة انتقال آثار:
مع علامة التبويب الحدود
يمكننا استخدام border سمة لإضافة صفحة مع الحدود:
تدوير الزوايا
نصيحة: في الروابط الأولى والأخيرة ترقيم الصفحات رابط الصفحة إضافة شرائح:
أمثلة CSS
أعلى الحد من اليسار دائرة نصف قطرها: 5px؛
الحدود أسفل يسار نصف قطرها: 5px؛
}
.pagination لى: الماضي والطفل و{
أعلى الحد من اليمين دائرة نصف قطرها: 5px؛
الحدود من الأسفل من اليمين دائرة نصف قطرها: 5px؛
}
محاولة »
فترة الترحيل
نصيحة: يمكنك استخدام margin خاصية لإضافة مسافة مباشرة إلى كل صفحة:
حجم الخط الترحيل
يمكننا استخدام font-size الملكية لتحديد حجم الخط الصفحة:
علامة التبويب مركز
إذا كنت تريد أن تركز التبويب، يمكنك (مثل <div>) لإضافةالنص محاذاة على العنصر الحاوية:أسلوبمركز:
مزيد من الأمثلة
فتات الخبز
ملاحة جديد كما فتات الخبز، والأمثلة على النحو التالي:
أمثلة CSS
الحشو: 8px 16px؛
على غرار القائمة: لا شيء؛
لون الخلفية: #eee.
}
ul.breadcrumb لى {عرض: مضمنة؛}
ul.breadcrumb لى لى +: قبل {
الحشو: 8px؛
اللون: أسود؛
المحتوى: "/ \ 00a0".
}
محاولة »