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