خوش آمدید , میهمان گرامی! ورود or ثبت نام

تغییر رنگ قالب



بستن
همین الان تو چه فکری هستی؟ (22)
گلایه luna 534 23487
5 دلیل برای طراحی سایت حرفه ای
minaf NimaAm 1 423
کفش طبی کودکان مخصوص صافی پا
lemonn lemonn 0 25
الان داری چه آهنگی گوش میدی ؟
moonlover luna 508 101100
حرف های تکراری ما
moonlover luna 498 71213
گفتگوی آزاد
admin mohammadn11 2627 145744
مزایای ایزولاسیون و عایق بندی کانکس
pouriaci pouriaci 0 33
ورق یونولیت
azade1992 azade1992 0 27
♥تولدت مبارک الهامم ♥
مونا luna 170 25444
شهریار
dusky luna 169 33538
تك بيت هاي زيبا
round_robin luna 374 53089
داری؟نداری؟ (5)
moonlover luna 442 17180
♣♣♣ وصف حال یا احساستان را با یک شعر بگید ♣♣♣
moonlover luna 602 103792
طراحی سایت آگهی
sitecode sitecode 0 40
درخواست کتاب گشایش رمز کتاب الکترونیک بحر المعارف
anasab amir7411 13 4477
مشاعره با ترانه خوانندگان 5
غزل luna 469 43606
با اخر اسم من یه اسم بنویس(2)
گلایه iljimae200 486 34789
نکاتی ارزشمند در مورد "سلامتی"
tree of life tree of life 0 49
اخرین اس ام اسی که دادین چی بوده ؟
sana tree of life 597 40439
سرور اوبونتو چیست و کاربردهای آن در دنیای امروز
webpouyanii webpouyanii 0 38
نرم افزار حسابداری سپیدار
agahhesab agahhesab 0 49
دانلود کتاب آشنایی با علم اسامی ،علوم غریبه $
admin 102falah 1 2153
طراحی سایت شرکتی
sitecode sitecode 0 57
رفیـــق , تولدت مبارکــــــــ ♥
گلایه luna 43 11076
کاربرد سوئیچ شبکه چیست ؟
azade1992 azade1992 0 49
تنگه بسفر استانبول چه جذابیت‌هایی دارد؟
nopardaz sansa 1 103
آموزش افزایش برد بلوتوس-100% تضمینی
aria mom1363 4 3412
دانلود کتاب خود آموز علوم غریبه -میر داماد کبیر- جلد دوم
admin admin 107 821
معرفی کتاب موفقیت و هدفگذاری
yeksho yeksho 0 46
سرور اوبونتو چیست و کاربردهای آن در دنیای امروز
pouyanweb98 pouyanweb98 0 48
مرا به گریه میار ...
round_robin reeraa 118 13834
دل...
گلایه reeraa 191 27270
آه!
jet li reeraa 28 3260
چه کسی . . . .
jet li reeraa 3 602
دلــنوشتــــه (2)
roshanak.m reeraa 158 29943
مهم ترین کاربرد و فایده گلوتن
lemonn lemonn 0 52
مراقبت های مهم بعد از عمل بینی
sinaarya sinaarya 0 57
اسرار اعجاب انگيز فنگ شويي
nevisande20 nevisande20 0 55
بهترین شرکت طراحی سایت
sitecode sitecode 0 62
دانلود کتاب نقش سلیمانی $
admin mhbmhb55 2 799

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینهزمان کنونی: Tuesday 07 April 2020, 07:27
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: magbot
آخرین ارسال: magbot
پاسخ: 1
بازدید: 256
 
امتیاز دهید:
  • 0 رأی - میانگین امیتازات : 0
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
Tuesday 18 June 2019, 01:21
ارسال: #1
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
[font=Cormorant Garamond, Arial, serif]
[size=xxx-large]طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه[/size] مشاهده لینک [/font]
مشاهده لینک
اولین روش ایجاد یک اثر قبل و بعد از یک تصویر است. من قصد دارم برای ایجاد روش دوم که محصول را تغییر می دهد "همانطور که ما به پایین حرکت می کنیم. نگاهی سریع به صفحه محصول نسخه ی نمایشی ما برای دریافت ایده درباره اثری که در این آموزش انجام می دهیم.

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

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

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

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

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

[تصویر: 5.jpg]

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

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

حالا شما می توانید صفحه پایین را پیمایش کنید و شما می توانید اثر پیمایش را همانطور که در زیر نشان داده شده مشاهده کنید.
[تصویر: div%3E%20%20%20%20%20%20%20%20%20%20%20%...v%20class=]مقالات مرتبط مشاهده لینک مشاهده لینک مشاهده لینک
نقل قول


موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  دانلود پس زمینه دسکتاپ omid 0 314 Thursday 24 June 2010 19:56
آخرین ارسال: omid
Cool دکتر جفری تامپسون از بزرگترین اساتید در زمینه استفاده از ترکیب ام omid 0 1,071 Tuesday 19 January 2010 12:00
آخرین ارسال: omid
Cool چرخاندن صفحه نمایش در مواقع ضروری با iRotate omid 0 445 Monday 11 January 2010 11:10
آخرین ارسال: omid
  نخستين تصاوير واقعي از رايانه فاقد صفحه كليد منتشر شد aria 0 465 Wednesday 19 August 2009 10:14
آخرین ارسال: aria
  مخفی کردن یک فولدر یا فایل به شکلی جدید و حیرت انگیز nakhoda_abbas 0 449 Sunday 07 October 2007 21:46
آخرین ارسال: nakhoda_abbas

پرش به انجمن:



زمان کنونی: Tuesday 07 April 2020, 07:27