إنشاء ألبوم صور




يمكن إنشاء البوم صور بسهولة عند استخدام لغة CSS



ألبوم الصور


في هذا المثال تم انشاء ألبوم صور باستخدام لغة CSS
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>

<body>

<p>يمكن إنشاء ألبوم صور من خلال لغة CSS.</p>
<div class="img">
<a href="css-images/nature_large1.jpg" target="_blank">
<img src="css-images/nature_small1.jpg" alt="المعهد العربي للبرمجة" title="المعهد العربي للبرمجة" />
</a>
<div class="desc">
ضع شرح بسيط عن الصورة
</div></div>
<div class="img">
<a href="css-images/nature_large2.jpg" target="_blank">
<img src="css-images/nature_small2.jpg" alt="المعهد العربي للبرمجة" title="المعهد العربي للبرمجة" />
</a>
<div class="desc">
ضع شرح بسيط عن الصورة
</div></div>
<div class="img">
<a href="css-images/nature_large5.jpg" target="_blank">
<img src="css-images/nature_small5.jpg" alt="المعهد العربي للبرمجة" title="المعهد العربي للبرمجة" />
</a>
<div class="desc">
ضع شرح بسيط عن الصورة
</div></div>
<div class="img">
<a href="css-images/nature_large6.jpg" target="_blank">
<img src="css-images/nature_small6.jpg" alt="المعهد العربي للبرمجة" title="المعهد العربي للبرمجة" />
</a>
<div class="desc">
ضع شرح بسيط عن الصورة
</div></div>
</body>
</html>

ليست هناك تعليقات:

إرسال تعليق