CSS: تغيير تنسيق كل قائمة على حده
السلام عليكم
قد يرغب بعض منا بتغيير تنسيق كل قائمة 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>
