illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش طراحی باکس وب برای وبلاگ و وب سایت

7115 ۲۸ آبان ۹۲

طراحی و چیدمان یک سایت همیشه بحث مهمی در بحث طراحی سایت و جذب کاربران برای حضور و فعالیت در سایت بوده و هست و خواهد بود،انتخاب و ترکیب رنگ ها هم میتونه یکی از المان های مهم در این بحث باشه،در این مطلب قصد داریم یک باکس وب برای وبلاگ ها و وب سایت ها طراحی کنیم و از رنگ بندی ساده و زیبا برای این کار استفاده کنیم،طرح اولیه در فتوشاپ پیاده شده و ما قصد داریم در اینجا اونو به صورت HTML,CSS پیاده سازی کنیم.پس با سون لرن همراه باشید.

نتیجه نهایی

پیشنهاد میشه به خاطر داشتن سایه در div اصلی دوستان در زمینه های سفید از این باکس استفاده کنن.

خوب کد قسمت HTML رو به صورت زیر می نویسیم.

کد های CSS

خوب اینجا تگ اصلی رو به صورت زیر استایل دهی میکنیم.

عرض و ارتفاع به صورت ثابت تعریف شده و شما باید در طراحی اصلی فقط قسمت عرض رو بذارید بمونه،پوزیشن رو به صورت relative تعریف کردیم تا بتونیم به المان های داخل باکس پوزیشن absolute بدیم و دستمون در مکان یابیشون باز تر باشه،براش یه border سفید رنگ (تفاوتش با پس زمینه که دارای سایه هست مشخص بشه) با عرض 2px تعریف کردیم،margin رو شما باید تغییر بدین اینجا برای آموزش برای اینکه وسط صفحه قرار بگیره ما اینطوری بهش margin دادیم.بقیه اش هم تقریبا مشخصه.

استایل قسمت عنوان رو به صورت زیر تعریف میکنیم.

مهمترین قسمتش همون قسمت انتخاب پوزیشن هست که با دادن مقدار absolute و ست کردن مقادیر top و right به اندازه مناسب خواستیم عنوان دقیقا بالای باکس قرار بگیره.از z-index اینجا برای این استفاده کردیم که تصویر سایه پشت عنوان رو بتونیم دقیقا در پشت تگ h3 نگه داریم.

برای قسمت تصویر سایه به این ترتیب استایل دهی کردم.

اینجا فقط تصویر مورد نظر رو ست کردیم و مقدار پوزیشن absolute و مقادیر top و right برای اینکه دقیقا پشت سر عنوان قرار بگیره.

خوب استایل خط قرمز رنگ رو هم به این صورت تعریف کردیم که با ارتفاع 4px و رنگ مطابق رنگ عنوان و با پوزیشن absolute برای تطبیق دقیق بالای باکس،شاید پرسیده بشه که چرا از border-top استفاده نکردیم؟خوب جوابش اینه که border-top به تنهایی در مقادیر بالای عرض گوشه هاش شکسته میشن و ما در اینجا نخواستیم که این اتفاق بیفته،حالا این سلیقه است شما خواستین از border-top استفاده کنید.

خوب برای قسمت محتوا هم کمی استایل دهی میکنیم،تا باکس ما کامل بشه.

دانلود فایل های HTML

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 16 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    ممنون کیوان جان؛
    مث همیشه عالی و کاربردی …. 😉

  • ‏‏
    محمد سلطان زاده(۲۹ آبان ۱۳۹۲)

    ممنون. کاربردی بود. ای کاش تب هم براش میزاشتین با جی کوئری…

    • ‏‏
      کیوان علی محمدی(۲۹ آبان ۱۳۹۲)

      سلام پیشنهاد خوبی بود،شاید مطلب بعدی همین کارو کردیم.

  • ‏‏

    خیلی آقایی 😛

  • ‏‏

    سلام ببخشید یه سوال راجب wamp داشتم من نصبش کردم مراحل رو هم درست رفتم ویندوزم هم مطابق با wamp 32 بیتیه اما فقط وارد localhost میشه و وارد phpmyadmin نمیشه.شما میتونید راهنماییم کننید؟ مشکل خاصی هست به نظرتون؟؟؟

    • ‏‏
      کیوان علی محمدی(۲۹ آبان ۱۳۹۲)

      سلام در انجمن مطرح کنید تا سریعتر جواب بگیرید.ممنون.

  • ‏‏

    ُسلام
    با تشکر از آموزش
    میخاستم بپرسم آیا شما کلاس آموزشی php خوب و مفید در مشهد سراغ دارید؟
    میشه منو راهنمایی کنید
    ممنونم

    • ‏‏
      کیوان علی محمدی(۳۰ آبان ۱۳۹۲)

      سلام،شرمند ما اهل مشهد نیستیم و طبیعتا هم آموزشگاه های خوب مشهد رو نمیشناسیم.حالا شاید دوستان اهل مشهد بشناسن همین قسمت معرفی کنن.

  • ‏‏
    مهشاد کلانتری(۱ آذر ۱۳۹۲)

    بکگراند سایت چشم منو اذیت میکنه :sad:

    • ‏‏
      لقمان آوند(۱ آذر ۱۳۹۲)

      به خاطر محرم مشکی شده بود که دوباره به حالت قبل برگردوندیم .
      موفق باشید

  • ‏‏
    امیر(۲ آذر ۱۳۹۲)

    سلام خوب بود .
    اگه آموزش ارسال مطلب رو به سایت با php رو آموزش بدید ممنون میشم ..! 😀

    • ‏‏
      کیوان علی محمدی(۲ آذر ۱۳۹۲)

      سلام آقا امیر عزیز این همه مطلب ارسال کردیم که تقریبا در اکثرشون محتوا داخل دیتابیس ثبت کردیم،شما دسته بندی قالب و اسکریپت رو بگرد به هدفت میرسی.

  • ‏‏
    طراحی سایت(۵ آذر ۱۳۹۲)

    بسیار عالی بود ممنون

  • ‏‏
    رایموند باغومیان(۷ شهریور ۱۳۹۳)

    با سلام….
    من کد این باکس رو میخوام که شما ساختی…
    http://8pic.ir/images/jxfp978fl5whuhnd5eiu.png
    سایت من دانلود سریال نیکلودئون هستت و از افزونه advanced-vip استفاده میکنه و می خوام این باکس رو در مطلب قرار بدم….
    این که شما ساختی بسیار زیباست…
    فوری می خوام….
    ممنون میشم 😉

    • ‏‏
      وحید صالحی(۱۸ شهریور ۱۳۹۳)

      کدهاش در آموزش موجوده میتونید استفاده کنید…

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram