More

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

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()

يمكن إنشاء البوم صور بسهولة عند استخدام لغة 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>
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()



You may also like  لمة تعمل اي اكونت جديد اول متنزل التاون تاخد اصطفة فري بلص 5 اتو ماتك وفي اصطفة كمان للبروسلي
Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker