كيف ارتب الصور بطريقة CSS في صفحة مدونة wordpress " التفاصيل والصور هنا "

مصطفى عبد الرحمن · #1 16-11-2009, 02:48 AM

سلام الله عليكم
اخى الكريم
اولا هناك ما يسمى بالكلاس فى ال css بحيث انك تقدر على اضافة كلاس معين فى كود ال css وتستدعى هذا الكلاس على شى معين فى الكود الخاص بك فى صفحة ال html مما يظهر التأثير بشكل فعلى على هذا
والان نحن نتحدث عن تأثير قريب بعمل جالارى لمجموعة من الصور متوفرة لديك
انظر للكود التالى

كود:

<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>

هذا الكود تم اضافته فى صفحة الhtml الموجودة فى موقعك وهنا وضعنا كلاس بسيط جدا يؤثر على مجموعة من الصور وعليه يتم وضع الصور وقبلها استدعاء الكلاس ويظهر الصور كما طلبت وايضا تأثير تحريك الماوس على الصور وايضا يمكن اضافة كود او امممممممم تعليق على الصورة
انظر للكود كامل

كود:

<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>

<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

انسخ الكود السابق فى اى محرر لديك واستبدل الصور اقصد بهذا مسمى الصور بصور اخرى على جهازك وايضا المسميات وستعرف ما اقصد

اسف على الاطالة
مع تحياتى