مرجع مقالات رسمی طراحی و ساخت سایت مرجع مقالات رسمی طراحی و ساخت سایت .

مرجع مقالات رسمی طراحی و ساخت سایت

مینی پروژه CSS | ساخت گالری تصاویر ریسپانسیو (چیدمان چند ستونی)


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

مباحث ما یحتاج برای انجام مینی پروژه چینش یکسری ستونی در CSS
فعالیت با تصاویر در اینترنت
شناخت با خصوصیت‌های Width و height
عمل با media query در CSS
طریق ساخت‌و‌ساز Grid های ریسپانسیو در CSS

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

 

قدم نخستین – ساخت ردیف‌بندی‌ و gridهای CSS
برای آغاز پروژه‌ها معمولاً کدنویسی با تایپ کردن کدهای HTML مقدمه میگردد. البته از‌آنجا که شما در اولِ رویکرد می‌باشید، ما برای شعور بهتر مورد عمل را با ساخت و ساز گرید‌های CSS مقدمه می کنیم تا فهم و شعور مطالب یه خرده معمولی‌خیس شوند.

پس در آغاز مدرک HTML خویش را ساخت‌و‌ساز فرمائید و در قسمت style آن کدهای ردیف‌بندی گردهمایی‌ی قبلی را بنویسید. در کدهای نشست قبلی یکسری col تعریف و تمجید کردیم که همگی‌ی آنان در همه نمایشگرهای متعدد اعم از تلفن همراه، تبلت و دسکتاپ و… یکسان اجرا می‌شدند. البته در کد امروز به امداد مدیاکوئری یک سری نوع ردیف بندی مختلف تولید میکنیم:

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

خب در کد بالا نخست برای همه ردیف‌ها طبق نشست قبلی پهنا استاندارد تعریف‌و‌تمجید شده‌است. ولی در خط۳۰ به یاری یک مدیا کوئری برای نمایشگرهای گسترده‌خیس از ۷۶۸ پیسکل که عمدتاً تبلت‌های وسیع و دسکتاپ‌ها می‌باشند ردیف‌بندی دلخواه را ساخت‌و‌ساز کرده‌ایم. در واقع به عبارتی ردیف‌بندی‌ها گذشته را با اسم متفاوتی ساخت و ساز کردیم تا در شکل به کار گیری از این ردیف‌های نو بتوانیم در مانیتورهای پهناور‌خیس ۷۶۸ پیسکل پهنا هر عنصر را تغییر و تحول دهیم.

مدیا کوئری در گرید بندی CSS
می‌اقتدار چند ردیف‌بندی دیگر برای سایزهای متعدد تمجید کرد تا المان‌های برگه در هر نمایشگر پهنا متفاوتی داشته باشند. برای بی آلایش‌خیس کردن عمل ما همین یک مدیا کوئری را نوشتیم که در شرایط تبلت و لپتاپ یک استایل را دارااست البته شما میتوانید برای هر نمایشگر، ردیف بندی جدیدی تمجید فرمائید. در‌این‌صورت‌ می بایست مدیاهای نو تعریف‌و‌تمجید نمایید:

576px – گوشی
768px – تبلت
992px – مانیتور کوچک
1200px – مانیتور وسیع


برچسب: ،
امتیاز:
 
بازدید:

+ نوشته شده: ۶ آبان ۱۳۹۹ساعت: ۰۱:۴۳:۱۷ توسط:علی موضوع: نظرات (0)