تغير لون والشكل على حسب اختيارك

الألوان

أشكال الموقع

353036303632303332303937343330343530333330303230343430393132323233373438363435313537383134323035373537343239393035373033333633313331343831343738303536323538373735373035373232393333333638313430323039353535

[ دورة CSS ] الدروس المتقدمة CSS - الدرس التاسع - إنشاء ألبوم صور

يمكن إنشاء البوم صور بسهولة عند استخدام لغة 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>

#



اسمى ايهاب محمد - مصري الجنسية - اقدم لكم فى هذه المدونة تقنية خاصة باخر اخبار التقنية والتطوير وايضأ معرفة طرق الربح بالأساليب الحديثة واخر اخبار الالعاب ومعلومات عامة ايضاً ومهتم بكل جديد فى عالم التقنية



تعليقات