امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
#1
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
آموزش طراحی سایت
 


[تصویر:  %D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DB%8C%DA...%D9%87.jpg]



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


ابتدا باید یک تصویر پسزمینه را به یک ظرف HTML اضافه کنید. سپس ویژگی پسوند دلخواه تعریف می کند که آیا تصویر را با محتوا پیمایش کنید یا آن را ثابت نگه دارید. شما می توانید ثابت یا پیمایش را به عنوان مقدار پس زمینه دلبستگی استفاده کنید. 


بگذارید بگوییم شما دارای 4 ظروف با ضمیمه های پس زمینه ثابت در همان موقعیت است. در چنین مواردی تصاویر در بالای صفحه بعدی قرار می گیرند و محتوا به صورت عمودی مانند آنچه که معمولا انجام می شود، تراز می شود. بیایید سعی کنیم این مفهوم را با استفاده از نمای گرافیکی درک کنیم. 


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


[تصویر:  fixed-scroll-01-480x267src%20=]


اکنون اجازه می دهد نگاهی به نحوه قرار دادن ظروف در مثال بالا بگذارید. 


[img=0x0]http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%db%8c%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d9%85%d8%ad%d8%b5%d9%88%d9%84-%d8%b4%da%af%d9%81%d8%aa-%d8%a7%d9%86%da%af%db%8c%d8%b2-%d8%a8%d8%a7-%d9%be%db%8c%d9%88%d8%b3%d8%aa-%d9%87%d8%a7%db%8c-CSS-%d9%be%d8%b3-%d8%b2%d9%85%db%8c%d9%86%d9%87/5.jpg[/img]


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


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

صفحه محصول شامل محصولات در مرکز صفحه به عنوان تصاویر است. سپس ما دو بخش ناوبری برای پائین و نوار کناری را توسعه خواهیم داد. بخش محصولات شامل اثر اصلی این آموزش است. بنابراین شروع کنیم به طراحی تصاویر محصول. 
ما 4 تصویری که در قسمت قبلی استفاده کردیم. در اینجا، ارتفاع کانتینگیها را به اندازه 700px تنظیم کردم. در نسخه ی نمایشی این ارتفاع با استفاده از ارتفاع پنجره مرورگر محاسبه می شود از آنجایی که برای کنترل ناوبری مورد نیاز است و اثر را درست نشان می دهد. 


حالا شما می توانید صفحه پایین را پیمایش کنید و شما می توانید اثر پیمایش را همانطور که در زیر نشان داده شده مشاهده کنید. 
[تصویر:  div%3E%20%20%20%20%20%20%20%20%20%20%20%...v%20class=]مقالات مرتبط
[تصویر:  %DA%86%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB...%D8%AF.jpg]

[size=undefined]
[تصویر:  40-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-...%DB%8C.jpg]
[/size]

[size=undefined]
[تصویر:  %D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D8%...%D8%A7.jpg]
[/size]

پاسخ


پیام‌های داخل این موضوع
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه - توسط hostcode - 2019/06/17، 09:28 PM

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  3 روشی که طراحی وب و بازاریابی با هم برای رشد کسب و کار شما کار می کنند kkhojasteh 1 251 2024/09/16، 05:08 AM
آخرین ارسال: raffae
  طراحی سایت آگهی: sitecup1 2 3,776 2020/10/02، 05:17 PM
آخرین ارسال: DONYA66
  .طراحی سایت با وردپرس sitecup1 1 2,242 2020/10/01، 07:06 AM
آخرین ارسال: vantopc
  طراحی سایت خرید و فروش اینترنتی sitecup1 1 2,502 2018/07/29، 01:07 PM
آخرین ارسال: 8908190
  اضافه نمودن بعد شخصیتی در طراحی سایت sitecup1 0 1,365 2018/07/23، 11:10 AM
آخرین ارسال: sitecup1
  طراحی سایت مشاغل خانگی: sitecup1 1 2,434 2018/07/08، 03:56 AM
آخرین ارسال: 8908190
  طراحی سایت و نکات طلایی درمورد گوگل sitecup1 1 2,753 2018/07/08، 03:54 AM
آخرین ارسال: 8908190
  .طراحی سایت صنعنی sitecup1 0 2,328 2018/07/02، 02:14 PM
آخرین ارسال: sitecup1
  طراحی سایت مدارس sitecup1 0 2,537 2018/07/01، 11:39 AM
آخرین ارسال: sitecup1
  طراحی سایت هتل و اقامتگاه: sitecup1 0 1,821 2018/06/27، 02:17 PM
آخرین ارسال: sitecup1

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان