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

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



بستن
شرایط تحصیل در استانبول
hexa12 hexa12 0 46
گریتینگ چیست ؟
kian2137 kian2137 0 38
کبد چرب و علائم آن؟؟
ghazal_01 niloofarmajdi 4 3729
انواع مختلف شارژرهای مختلف را می شناسید؟
niloofarmajdi niloofarmajdi 0 37
مزیت های سرور مجازی میکروتیک چیست
pouyanweb98 pouyanweb98 0 34
رمان شما که غریبه نیستید+لینک دانلود
mohadese mmmmaaammmaann 5 1816
همین الان تو چه فکری هستی؟ (22)
گلایه luna 521 21873
شب های اواکسی ...
user luna 933 114439
"امضاهای " من!!!
دخترمشرقى luna 321 51946
دلت میخواد نفر بعدیت کی باشه ؟ ( 3 )
sana luna 821 63204
به نظرت نفر قبلیت چه رنگیه؟
فرشاد شاه luna 614 30877
ساختار داخلی لنگه درب های ضد سرقت ایستادر و انواع رویه ها
istadoor istadoor 0 50
دندانپزشکی در خواب یا سدیشن چیست؟
دندانپزشکی رایا دندانپزشکی رایا 0 44
آیا استفاده از شارژر فندکی به باتری گوشی آسیب می رساند؟
niloofarmajdi niloofarmajdi 0 46
طراحی سایت آگهی
sitecode sitecode 0 58
با وارد کردن شماره موبایل آدرس مالکش رو از طریق ماهواره پیدا کنید
geddis زهراجزایری 27 55019
دلتنگ و دلتنگی...
غزل m@rzieh 39 6584
دل...
گلایه m@rzieh 189 26631
طراحی سایت و انتخاب رنگ مناسب
sitecode sitecode 0 46
کفش طبی زنانه از کجا اینترنتی بخرم؟
lemonn lemonn 0 49
دلــنوشتــــه (2)
roshanak.m luna 156 28952
تفاوت سرور مجازی و اختصاصی و ویژگی آن ها
pouyanweb98 pouyanweb98 0 48
طراحی فروشگاه اینترنتی
zahrahmd zahrahmd 0 71
انتخاب اجباری برای نفر بعدی (6)
گلایه نینجا 1 658 44034
معرفی ابزارهای ایجاد پالت رنگی در طراحی سایت
sitecode sitecode 0 75
۴ نکته مهم برای افزایش امنیت سرور مجازی
webpouyanii webpouyanii 0 78
مشخصات کانکس نگهبانی و کیوسک نگهبانی
pouriaci pouriaci 0 69
بیا بگو همین الان دلت چی میخواد؟ (5)
گلایه luna 218 13238
تایپیک عکس های سیاه و سفید
niloofar niloofar 103 69721
دوستان آواکسی هر وقت وارد سایت آواکس شدی یه جمله اینجا بنویس.
rapr niloofar 739 87285
عکس نوشته های من
niloofar niloofar 3 1786
معرفی بهترین گوشی های برای گرفتن سلفی
niloofarmajdi moonlover 1 72
برای ساخت استخر کدوم روش بهتره؟
volghan moonlover 1 77
محلی برای طرح سوالات و مشکلاتی که به ان برخورد میکنید
admin farhadsevoom 1965 240481
عکس مدل ساعت مردانه سال 2020 (سری2)
bitaaa moonlover 13 231
عکس مدل ساعت مردانه سال 2020
bitaaa moonlover 9 119
عکس از مدل های جدید انگشتر 2020 (سری 3)
javane75 moonlover 14 303
عکس از مدل های جدید انگشتر 2020 (سری 2)
javane75 moonlover 9 137
عکس از مدل های جدید انگشتر 2020
javane75 moonlover 9 178
گالری تصاویر طراحی ناخن مخصوص فصل زمستان 2020
setare-76 moonlover 24 348

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینهزمان کنونی: Saturday 22 February 2020, 07:56
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: magbot
آخرین ارسال: magbot
پاسخ: 1
بازدید: 242
 
امتیاز دهید:
  • 0 رأی - میانگین امیتازات : 0
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
Tuesday 18 June 2019, 00: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 312 Thursday 24 June 2010 18:56
آخرین ارسال: omid
Cool دکتر جفری تامپسون از بزرگترین اساتید در زمینه استفاده از ترکیب ام omid 0 1,004 Tuesday 19 January 2010 11:00
آخرین ارسال: omid
Cool چرخاندن صفحه نمایش در مواقع ضروری با iRotate omid 0 439 Monday 11 January 2010 10:10
آخرین ارسال: omid
  نخستين تصاوير واقعي از رايانه فاقد صفحه كليد منتشر شد aria 0 449 Wednesday 19 August 2009 09:14
آخرین ارسال: aria
  مخفی کردن یک فولدر یا فایل به شکلی جدید و حیرت انگیز nakhoda_abbas 0 446 Sunday 07 October 2007 20:46
آخرین ارسال: nakhoda_abbas

پرش به انجمن:



زمان کنونی: Saturday 22 February 2020, 07:56