صور عرض
تقريب:
دائرة:
يحدها:
نص:
طبيعة
صورة مقربة
الطبقة W3-الجولة يضيف تدوير الزوايا على صورة:
صورة دائري
الطبقة W3-دائرة الأشكال صورة إلى دائرة:
صورة يحدها
الطبقة W3-الحدود يضيف الحدود حول الصورة:
صورة Hoverable
وتضيف الطبقة W3-تحوم-التعتيم الشفافية في الصورة على الماوس فوق:
صورة ك بطاقة
التفاف أي من الفئات-W3 الفؤاد * حول العنصر <IMG> لعرضه كورقة (إضافة الظلال):
سيمون
مدرب من جميع الزعماء
نص الصورة
ضع النص في صورة مع الطبقات-W3 عرض-:
أعلى اليسار
اعلى اليمين
الزرار اليساري
أسفل يمين
وسط
مثال
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> انها محاولة لنفسك » بناء ألبوم الصور
في هذا المثال نحن نستخدم نظام الشبكة المستجيبة W3.CSS لإنشاء ألبوم صور التي تبدو جيدة على جميع الأجهزة. سوف تتعلم المزيد عن ذلك لاحقا.
صيف 2015
5 تير
مونتيروسو
فيرنازا
مانارولا
كورنيجليا
ريوماجيوري
مثال
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
انها محاولة لنفسك »