لوحة المتصدرين

مساء الخير أخي "سعيد" كما تفضل الاخ فيمكنك القيام بالعمل بهذه الطريق ولكن للحصول علي افضل نتيجة واعلي جودة للبيكسل يفضل إستخدام برنامج الاليستريتور حيث تقوم بالضغط علي view ثم حدد show grid وايضا snap to grid كما هو بالصورة ثم قم بتصديرها الي فوتوشوب كـــ smart object

الdiv هو عنصر html يستخدم لتقسيم الصفحة إلى أجزاء بحيث يعرض كل جزء محتوى معين . Id : خاصية ضمن عناصر html تستخدم لتعريف عنصر html . يكتب الid في ملف css مسبوقا برمز # . لا يمكن إعطاء العنصر الواحد أكثر من id . لا يمكن إعطاء نفس المعرف id لأكثر من عنصر في صفحة html واحدة . Class: إسم الفئة ، يستخدم لتحديد خصائص و تنسيقات لعناصر html عبر إسنادهم لفئة معينة . يكتب الclass في ملف css مسبوقا برمز . يمكن إسناد الفئة الواحدة لأكثر من عنصر html. و العكس صحيح يمكن أن يرتبط عنصر html الواحد بأكثر من فئة class . مثال : في ملف الcss لديك }Red. ;Background-color:red { في ملف html لتطبيق التنسيق السابق على عنصر معين و ليكن div < "div class="red>

div بمعني طبقة أو حاوية و id هي تعني هوية و class تعني فئة وهما الاثنين بيأدوا نفس الغرض لكن تختلف فقط في تعريفها من خلال الـ css مثلا سأقوم بعمل طبقة جديدة باستخدام div ثم استخدم id كهوية ثم استخدم container أو أى اسم أخر مناسب لك مثل header رأس الصفحة أو sidebar للعمود الجانبي أو post للمقالة المنفردة ....إلخ يتم كتابة الكود على هذا الشكل <div class='container'></div> مثال أخر <div id='container'></div> ولكي نقوم بتعريف id و class بطريقة صحيحة من خلال css فيكون كالتالى إذا كان المعرف container ضمن id سنضيف رمز # قبل المعرف #container{ هنا يتم إضافة خصائص css المراد تطبيقها على معرف container } أما إذا كان معرف container ضمن فئة class سنضيف رمز نقطة قبل المعرف ليصبح هكذا .container{ هنا يتم إضافة خصائص css المراد تطبيقها على معرف container } إذا قمت بإضافة معرف container مرتين في نفس الصفحة وكان مرة ضمن فئة id ومرة فئة class فعند تطبيق خصائص css على فئة id فقط فلن يتم تطبيقها على فئة class ويمكنك تطبيق نفس الخصائص على الفئتين سواء id أو class للمزيد يمكنك متابعة مدونة كود ويب