أول محاولة تكويد PSD TO HTML قمت به ، نصائحكم لو سمحتو ..

قمت اليوم و لأول مرة بتكويد ملف psd

وكانت النتائج كالتالي :

لا تبخلوا عليي بالنصائح

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

الموقع بسيط و لانة بداية جيدة

رؤيتى المتواضعة جدا

الجزء الخاص بال home

اخى لكى تضع شىء فى المنتصف ممكن ان تقوم بعمل

margin-left:auto; and margin-right:atuo; هذا سوف يضع المراد وضعة فى المنتصف بدل من اعطاء margin كبير

ايضا وضعت كل من الشعار و القائمة فى ul واحد و هذا غلط كان من الممكن تقسم ال div البيرة جزئان جزء يمين و هنا تضع بة ul and lis خاصة بال links و جزء يسار عبارة عن div ايضا يوجد بها الشعار هذ افضل :)

يجب تحديد لكل div الموضع relative or absolute حسب المراد و ايضا وضع ال height , width الخاص بها بدل من ال padding الكثير الذى عملتة

و لكى تتحكم فى ف بعد النص استخدم خاصية line-height :) هذا افضل

وفقك الله :)

شكراً لردك :)

لكن margin-left:auto; and margin-right:atuo; لم تنجح مع ايقونات التواصل الاجتماعي و نجحت مع سواها

لتنجح يجب أن يكون العنصر بعرض محدد وdisplay:block

بداية جيدة (:

  • في join now في الـinput الخاص بإدخال الايمايل يمكنك استعمال ال cursor:pointer في ال hover: الخاص بالزر join now ليتحول السهم لليد

  • لجعل الصفحة في المنتصف تماما ضع كل محتويات الصفحة في div و أعطه هذه الخصائص في الcss

div{

margin-left:auto;

margin-right:auto;

}

  • لا تضع الشعار logo و القائمة في نفس ال div اجعلهما منفصلين و استعمل ال float:right للقائمة و float:left للشعار.

  • من الأحسن استعمل عرض الصفحة 1070 px الله أعلم هو عرض الصفحات في bootstrap

  • أعد تصميم حوالي 3 الى 4 صفحات رئيسية للمواقع و استعين بأفكار من هنا themforest.net

  • بعدما تجد نفسك سريع في كتابة الأكواد و لديك معلومات بجميع نواحي ال HTML&CSS تعلم HTML5+CSS3

جربت هذه

لجعل الصفحة في المنتصف تماما ضع كل محتويات الصفحة في div و أعطه هذه الخصائص في الcss

div{

margin-left:auto;

margin-right:auto;

}

نجحت مع جميع العناصر ما عدا ايقونات التواصل الاجتماعي فلم تنجح هل تعرف ما هو السبب ؟

و شكراً لردك :)

أولا هل هي في div خاص بها و هذا ال div يكون داخل الdiv الذي يحتوي على جميع محتويات الموقع

يجب أن يكون للعناصر width كما يجب إضافة display:block;