CSS يمكن استخدامها لإنشاء معرض صورة.
إضافة وصف للصورة هنا
إضافة وصف للصورة هنا
إضافة وصف للصورة هنا
إضافة وصف للصورة هنا
معرض الصور
يتم إنشاء معرض الصور التالية مع CSS:
مثال
<html>
<head>
<style>
div.img
{
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover
{
border: 1px solid #777;
}
div.img img
{
width: 100%;
height: auto;
}
div.desc
{
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="lights.jpg">
<img src="lights.jpg" alt="Northern Lights" width="300"
height="200">
</a>
<div class="desc">Add a description
of the image here</div>
</div>
<div class="img">
<a
target="_blank" href="mountains.jpg">
<img src="mountains.jpg"
alt="Mountains" width="300" height="200">
</a>
<div
class="desc">Add a description of the image here</div>
</div>
</body>
</html>
انها محاولة لنفسك » 
المزيد من الأمثلة
معرض الصور تستجيب
كيفية استخدام CSS3 استفسارات وسائل الإعلام لخلق معرض الصور استجابة.
المتقدمة: القابلة للنقر عليها صور مشروط (JS)
مثال على كيفية استخدام جافا سكريبت مع CSS لعرض الصور بالنقر فوقه في مربع مشروط.