السلام عليكم

قد يرغب بعض منا بتغيير تنسيق كل قائمة Widget لوحدها مما يميزها عن غيرها والتحكم في تنسيق كل قائمه لوحدها << بمعنى أن القائمة 1 تحمل لون الخلفية ازرق , والقائمه 2 تحمل لون الخلفية أخضر >> وهكذا,,,

سأقوم بأذن الله بالتطبيق على لون الخلفية لكل قائمه.

أولاً: نبدأ بكتابة وسوم الـ HTML :

<body>

<div id="sidebar"><!--بداية وسم السايدبار-->

<div class="widget gray">
<h2>التصنيفات</h2>
<ul>
<li><a href="#">تصنيف 1</a></li>
<li><a href="#">تصنيف 2</a></li>
<li><a href="#">تصنيف 3</a></li>
<li><a href="#">تصنيف 4</a></li>
<li><a href="#">تصنيف 5</a></li>
</ul>
</div>

<div class="widget green">
<h2>روابط</h2>
<ul>
<li><a href="#">رابط 1</a></li>
<li><a href="#">رابط 2</a></li>
<li><a href="#">رابط 3</a></li>
<li><a href="#">رابط 4</a></li>
<li><a href="#">رابط 5</a></li>
</ul>
</div>

<div class="widget red">
<h2>اخرى</h2>
<ul>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
</ul>
</div>

</div><!--تسكيرة وسم السايدبار-->

</body>

• • •