CSS3 وسائل الإعلام يستعلم الأمثلة
هذا الفصل سوف تظهر لك بعض الأمثلة للوسائط المتعددة.
قبل أن نبدأ في تقديم قائمة من الروابط إلى علبة البريد الإلكتروني. كود HTML كما يلي:
مثال 1
<HTML>
<رئيس>
<نمط>
المجاهدين {
قائمة النمط من نوع: لا شيء؛
}
المجاهدين لى {
اللون: الأخضر،
النص الديكور: لا شيء؛
الحشو: 3PX.
عرض: كتلة.
}
</ النمط>
</ رئيس>
<body>
<UL>
<لي> <a data-email = "[email protected]" أ href = "mailto: [email protected]"> فلان الفلاني </ أ> </ لى>
<لي> <a data-email = "[email protected]" أ href = "mailto: [email protected]"> ماري مو </ أ> </ لى>
<لي> <a data-email = "[email protected]" أ href = "mailto: [email protected]"> أماندا الباندا </ أ> </ لى>
</ UL>
</ الجسم>
</ HTML>
محاولة »
لاحظ أن data-email الخصائص. في HTML يمكننا استخدام مع data- بادئة السمة لتخزين المعلومات.
520 ل699px عرض - إضافة رمز صندوق البريد
عندما عرض المتصفح في 520 ل699px، صندوق البريد قبل إضافة رابط رمز البريد:
مثال 2
المجاهدين لى {
الحشو اليسرى: 30px؛
خلفية: رابط (البريد الإلكتروني icon.png) يسار الوسط عدم تكرار.
}
}
محاولة »
700 إلى 1000px - إضافة معلومات بادئة النص
عندما عرض المتصفح 700 إلى 1000px، سيربط علبة بريد قبل أن يضيف "البريد الإلكتروني:":
مثال 3
المجاهدين لى: قبل {
المحتوى: "البريد الإلكتروني:".
على غرار الخط: مائل.
اللون: # 666666؛
}
}
محاولة »
أكبر من 1001px عرض - إضافة عنوان البريد الإلكتروني
عندما المتصفح هو أوسع من 1001px، ستضاف الاتصال عنوان البريد الإلكتروني بعد الارتباط.
نحن نستخدم data- سمات لإضافة عناوين البريد الإلكتروني بعد كل من الأسماء:
مثال 4
المجاهدين لى: بعد {
المحتوى: "(" ATTR (بيانات -email) ")".
FONT-SIZE: 12px؛
على غرار الخط: مائل.
اللون: # 666666؛
}
}
محاولة »
أكبر من 1151px عرض - إضافة رمز
عندما المتصفح هو أوسع من 1001px، سيتم إضافة أسماء أمام الرمز.
سبيل المثال، ليس لدينا لكتابة كتل الاستعلام إضافية، يمكننا استخدامها في استفسارات وسائل الإعلام الموجودة مفصولة بفواصل لإضافة استفسارات وسائل الإعلام إضافية (على غرار التشغيل OR):
مثال 5
المجاهدين لى {
الحشو اليسرى: 30px؛
خلفية: رابط (البريد الإلكتروني icon.png) يسار الوسط عدم تكرار.
}
}
محاولة »
مزيد من الأمثلة
استخدام الرابط القائمة البريدية على الشريط الجانبي صفحة ويب
الأمثلة في العمود الأيسر من الصفحة لإضافة قائمة بريدية من الروابط.