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

تراز کردن بلوک ها در مرکز

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

< div id = "wrapper" > < div id = "header" > < / div > < / div >

بیایید فرض کنیم که این هدر سایت است. در تمام عرض پنجره کشیده نمی شود و باید آن را در مرکز قرار دهیم. اینگونه می نویسیم:

#سرتیتر( عرض / حداکثر عرض : 800 پیکسل . حاشیه: 0 خودکار;

باید عرض دقیق یا حداکثر را مشخص کنیم و سپس ویژگی کلید - margin: 0 auto را یادداشت کنیم. حاشیه‌های بیرونی هدر ما را تعیین می‌کند، مقدار اول حاشیه‌های بالا و پایین را تعیین می‌کند و دومی حاشیه‌های راست و چپ را تعیین می‌کند. مقدار auto به مرورگر می‌گوید که به طور خودکار padding را در هر دو طرف محاسبه کند تا عنصر دقیقاً روی والد خود متمرکز شود. راحت!

تراز متن

این نیز یک تکنیک بسیار ساده است. برای تراز کردن تمام عناصر درون خطی، می توانید از ویژگی text-align و مقادیر آن استفاده کنید: چپ، راست، مرکز. دومی متن را در مرکز قرار می دهد، چیزی که ما به آن نیاز داریم. حتی می‌توانید یک عکس را به همین روش تراز کنید، زیرا به طور پیش‌فرض یک عنصر درون خطی است.

متن را به صورت عمودی تراز کنید

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

ارتفاع بلوک را با استفاده از padding تنظیم کنید. راه این است که با استفاده از ارتفاع، ارتفاع مشخصی را تعیین نکنید، بلکه آن را به صورت مصنوعی با استفاده از لایه های بالا و پایین ایجاد کنید، که باید یکسان باشد. بیایید هر بلوکی ایجاد کنیم و ویژگی های زیر را روی آن بنویسیم:

div( پس‌زمینه: #cccc؛ padding: 30px 0; )

div( پس زمینه: #ccc; padding: 30px 0;

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

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

div( ارتفاع: 60 پیکسل؛ ارتفاع خط: 60 پیکسل؛ )

div( ارتفاع: 60 پیکسل؛ ارتفاع خط: 60 پیکسل؛

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

یک بلوک را به سلول جدول تبدیل کنید. ماهیت این روش این است که سلول جدول دارای ویژگی vertical-align: middle است که عنصر را به صورت عمودی در مرکز قرار می دهد. بر این اساس، در این حالت بلوک باید به صورت زیر تنظیم شود:

div(نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

div( نمایش: جدول - سلول. عمودی - تراز : وسط ;

این روش خوب است زیرا می توانید هر مقدار متن را که می خواهید در مرکز تراز کنید. اما بهتر است در بلوکی که div ما در آن قرار دارد، display: table بنویسیم، در غیر این صورت ممکن است کار نکند.

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

تورفتگی ها را به صورت درصد تنظیم کنید. اگر ارتفاع یک عنصر والد را می‌دانید و عنصر بلوکی دیگری را درون آن قرار می‌دهید، می‌توانید آن را با استفاده از درصد padding در مرکز قرار دهید. به عنوان مثال، ارتفاع والد 600 پیکسل است. یک بلوک با ارتفاع 300 پیکسل در آن قرار می دهید. چقدر باید از بالا و پایین عقب نشینی کنید تا آن را در مرکز قرار دهید؟ هر کدام 150 پیکسل که 25 درصد قد والدین است.

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

یک عنصر را در سلول جدول وارد کنید. مجدداً، اگر عنصر والد را به یک سلول جدول تبدیل کنیم، بلوک درج شده در آن به طور خودکار به صورت عمودی در مرکز قرار می گیرد. برای انجام این کار، والدین فقط باید vertical-align: middle را تنظیم کنند.

و اگر علاوه بر این، margin: 0 auto را نیز بنویسیم، عنصر به صورت افقی وسط می شود!

پنجره ها: Internet Explorer 3.0+، Firefox 1.0+، Google Chrome، Opera 3.51 - 6.xx و 9.0+، Safari 3.1+، SeaMonkey 1.0+ [1].

لینوکس: Firefox 1.0+، Chromium، Opera 5.0 - 6.xx و 9.0+، SeaMonkey 1.0+ [2].

مرکز کردن محتوای صفحه در ناحیه قابل مشاهده پنجره مرورگر با استفاده از HTML - بدون CSS. ظرفی که محتوای صفحه وب در آن قرار خواهد گرفت در مرکز تراز شده است - از نظر عرض و ارتفاع: [صفحه نمونه را باز کنید].

و همچنین در Netscape 2.02 - 4.80 و Offbyone. در Netscape 2.02 - 4.80، به دلیل اینکه این برنامه ها فضا را برای نوارهای اسکرول ذخیره می کنند، مقداری تغییر محتوای صفحه به گوشه سمت چپ بالای ناحیه قابل مشاهده پنجره مرورگر وجود دارد.

و همچنین در Netscape 2.02 - 4.80. در Netscape 2.02 - 4.80، به دلیل اینکه این برنامه ها فضا را برای نوارهای اسکرول ذخیره می کنند، مقداری تغییر محتوای صفحه به گوشه سمت چپ بالای ناحیه قابل مشاهده پنجره مرورگر وجود دارد.

زیرمجموعه های متفاوت و تم

چندین برنامه برای گرفتن اسکرین شات در DOS وجود دارد. به عنوان مثال، SNARF. با استفاده از این برنامه ما توانستیم در بیشتر موارد اسکرین شات بگیریم. همچنین، کیفیت اسکرین شات ها (فایل های BMP) گرفته شده توسط SNARF در بین برنامه های آزمایش شده بهترین است: ScreenThief، VideoThief، FLIP، GRABBER، SNARF. استفاده از SNARF با تنظیمات پیش فرض آسان است، اما یک اشکال وجود دارد - SNARF همیشه اسکرین شات را در پوشه ای که کاربر در حال حاضر در آن قرار دارد ذخیره می کند. که ممکن است ناخوشایند یا غیر قابل قبول باشد. و هیچ راه آشکاری برای تغییر این وجود ندارد. با این حال، یک راه حل وجود دارد. ایده اصلی در این لینک یافت شد. بر این اساس موارد زیر اتفاق افتاد: 1. SNARF [دانلود] 2. با استفاده از یک ویرایشگر متن، فایل SNARF.EXE را در حالت متن باز کنید، snarf000.bmp را پیدا کنید و به s:scn000.bin تغییر دهید. 3. یک فایل دسته ای ایجاد کنید. به عنوان مثال S.BAT، که در آن، علاوه بر خط راه‌اندازی SNARF.EXE، دستوری برای ایجاد شبه درایو S وجود دارد: برای مسیر پوشه‌ای که هنگام اجرای SNARF، اسکرین‌شات‌ها در آن ذخیره می‌شوند. پوشه و مسیر آن می تواند هر چیزی باشد: C:\SOFT\SNARF.EXE SUBST S: C:\SCREENS\ 4. SNARF: S [یا S.BAT] را اجرا کنید 5. برای گرفتن اسکرین شات: Alt + S وجود خواهد داشت دو سیگنال صوتی باشد اولی در آغاز و دومی به عنوان نشانه ای از اتمام موفقیت آمیز فرآیند. پس از گرفتن اسکرین شات ها، باید به پوشه ای که در آن ذخیره شده اند بروید و پسوند فایل را از .BIN به .BMP SNARF - Freeware جایگزین کنید.

تراز عمودی یک عنصر بلوک CSS حاوی متن و تصاویر. برای ترکیب های مختلف عناصر بلوک و درون خطی کار می کند. مثال: CSS Vertical Alignment CSS HTML/XHTML Vertical Alignment. کد:

CSS. کد: .parent (موقعیت: نسبی؛ چپ: 0 پیکسل؛ بالا: 0 پیکسل؛ ارتفاع: 200 پیکسل؛ نمایشگر: جدول؛) .child (موقعیت: نسبی؛ سمت چپ: 0 پیکسل؛ بالا: 0 پیکسل؛ نمایش: سلول جدول؛ تراز عمودی : وسط;).childcontent (موقعیت: نسبی؛ چپ: 0px؛ بالا: 0px؛) توجه: .parent و .childcontent را می توان تراز چپ ("float: left;") یا بدون تراز کرد، اما به این ترتیب تراز عمودی CSS کار می کند. , .child باید بدون «شناور: چپ؛» باشد. [ 1 ] و همچنین در Netscape 6.01+، Mozilla 0.6+. [ 2 ] و همچنین در Netscape 6.01+، Mozilla 0.6+.

برای انتخاب عناصر ورودی مورد نظر با نوع "چک باکس" می توانید از انتخابگر استفاده کنید ':چک باکس'. مثال:

جایی که کنترل کننده- یک کنترل کننده که هنگام وقوع رویداد تغییر فراخوانی می شود

کار با آبجکت Callbacks در jQuery: استفاده از لیستی از توابع Callback

شی Callbacks در jQuery به شما امکان می دهد چیزی شبیه به لیستی از callback ها ایجاد کنید که با فراخوانی متد ابزار fire() اجرا شوند. علاوه بر این، هنگام فراخوانی متد ()fire، می‌توان مقداری آرگومان ارسال کرد که توسط هر تابع callback استفاده می‌شود. اکنون با استفاده از چندین مثال به نحوه عملکرد آن خواهیم پرداخت.

گرفتن از دست دادن تمرکز متد blur() در جی کوئری

متد blur() در jQuery به شما اجازه می دهد تا یک کنترلر را به یک عنصر خاص در صفحه اختصاص دهید که به محض از بین رفتن فوکوس از آن عنصر فراخوانی می شود. در ابتدا، این رویداد عمدتاً برای عناصر شکل - برچسب‌های ورودی اعمال می‌شد، اما نسخه‌های اخیر مرورگرها می‌توانند این رویداد را برای تقریباً همه انواع عناصر DOM مدیریت کنند.

محتوا را قبل از محتوای شی انتخاب شده درج می کند. متد Before() در jQuery

متد Before() در جی کوئری به شما اجازه می دهد تا محتوای یا اشیاء خاصی را قبل از محتوای هر یک از مجموعه ای از اشیاء مشخص شده درج کنید.
نحو روش ساده است:

1	.پیش از (محتوا، )

تغییر دوم:

1	.before (عملکرد)

جی کوئری. متد attr(). نحوه دریافت یا اضافه کردن یک ویژگی به یک عنصر

jQuery دسترسی به ویژگی های عنصر مورد نظر، بازیابی مقدار آن یا برعکس، تنظیم و تغییر آن را بسیار آسان می کند. برای چنین دستکاری هایی از متد attr() استفاده می شود.

متد .appendTo() در جی کوئری. افزودن محتوا به انتهای عناصر

متد appendTo() اساساً همان وظیفه متد ()append را انجام می دهد. تفاوت، به طور کلی، فقط در نحو است. اگر برای append() انتخابگر مورد نظر را مشخص کنیم، این متد را به آن اضافه کنیم، جایی که در پرانتز مشخص می کنیم که دقیقاً چه چیزی باید به انتهای محتویات شی مشخص شده اضافه شود، سپس برای appendTo() چیزی که باید اضافه شود دیگر به عنوان پارامتر متد در براکت نیست و بلافاصله قبل از خود متد به عنوان شیئی که appendTo() فراخوانی می شود. تفاوت با مثال زیر بهتر درک خواهد شد.

روش .animate() jQuery: تصاویر، متن و هر چیزی را متحرک کنید

متد animate() به شما این امکان را می دهد که با استفاده از ویژگی های CSS خود اشیا، افکت های انیمیشن ایجاد کنید. این روش دارای دو تغییر با تعداد پارامترهای مختلف است

تبدیل فیلم ها با استفاده از Movavi

اخیراً، برای استفاده مناسب از زمان سفر به محل کار و برگشتن به محل کار، سعی می‌کنم از قبل ویدیوهای مفیدتری را در گوشی خود دانلود کنم. گوشی اندرویدی است و اخیراً زمانی که گوشی هوشمند به دلایلی از پخش ویدیو با فرمت AVI خودداری کرد با مشکلی مواجه شدم. اینکه آیا پخش کننده ضعیف است یا مشخصات سیستم عامل، من نمی دانم. با این حال، حل این مشکل طولی نکشید: من یک مبدل ویدئویی نسبتاً کاربردی در اینترنت پیدا کردم که نه تنها می تواند آن را از یک فرمت به فرمت دیگر تبدیل کند، بلکه با در نظر گرفتن ویژگی های دستگاه شما، فایلی را نیز آماده می کند. در اینجا توضیح مختصری در مورد نحوه استفاده از این برنامه فوق العاده وجود دارد.

تراز متن ظاهر آن و جهت لبه های پاراگراف را تعیین می کند و می تواند به چپ، راست، وسط یا توجیه شود. روی میز شکل 1 گزینه هایی را برای تراز کردن یک بلوک متن نشان می دهد.

جدول 1. راه های تراز کردن متن

تراز چپ	تراز سمت راست	تراز وسط	توجیه
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

تگ پاراگراف معمولاً برای تنظیم تراز متن استفاده می شود

با ویژگی align که روش تراز را مشخص می کند. همچنین امکان تراز کردن یک بلوک از متن با استفاده از یک برچسب وجود دارد

بهترین مقالات در این زمینه