نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی

ستون هایی با همان ارتفاع در CSS. چیدمان سه ستونی سیال

06.04.2019 تلفن ویندوز

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

AT وبلاگ نویسکد را به ابزار HTML/Javascript در تب Design اضافه کنید. اگر از یکی از آنها استفاده می کنید موضوعات اخیردر وبلاگ خود (Emporio، Contempo، Soho، قابل توجه)، فراموش نکنید که قابلیت مشاهده ویجت را فعال کنید (تیک "Visible for all"، "Show "HTML/JavaScript" widget" را بزنید).
در وردپرسکد را به ویجت Text اضافه کنید.

نویسنده: ایوانووا ناتالیا

2019-03-03

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

شما می توانید از همان خدماتی که ما استفاده کردیم استفاده کنید.

خدمات کارت پستال آماده

کارت پستال 8 مارس را به صورت آنلاین ایجاد کنید

از خدمات زیر برای ایجاد کارت پستال از ابتدا استفاده کنید.

  1. Canva یک ویرایشگر عکس کاربردی شناخته شده است. در اینجا شما الگوهای زیادی را پیدا خواهید کرد. ثبت نام الزامی است.
  2. چاپ کلیک کنید اگر کسب و کار خود را دارید، می توانید یک دسته کارت پستال با آرم و مخاطبین شرکت خود سفارش دهید. همچنین می توانید از مولد کارت پستال princlick استفاده کنید. تبلیغات عالی و ارزان.
  3. Crello ویرایشگری است که نیاز به ثبت نام دارد. نترس از زبان انگلیسی، در تنظیمات می توانید به روسی تغییر دهید.
  4. کارت پستال آنلاین - برای کسانی که تخیل خوبی دارند، زیرا باید یک کارت پستال از ابتدا ایجاد کنند.
  5. Mumotiki - آماده کنید عکس زیبا، و می توانید یک متن تبریک را در اینجا اضافه کنید. به هر حال، اگر فقط نیاز به اضافه کردن متن به تصویر دارید، می توانید آن را بررسی کنید.

امیدوارم با استفاده از یکی از این ژنراتورها بتوانید به اندازه کافی 8 مارس را به بانوان خود تبریک بگویید!

نویسنده: ایوانووا ناتالیا

2019-02-17

محتوای مقاله:

گوگل پلاس در حال خاموش شدن است

سکو گوگل پلاسامیدهای توسعه دهندگان را برآورده نکرد و در تاریخ 2 آوریل 2019 به طور کامل حذف خواهد شد. همراه با او، آلبوم های مرتبط با او ناپدید می شوند Google Photos، خواهد شد مجوز غیر قابل دسترسدر سایت هایی با حساب گوگل پلاس از 4 فوریه تبدیل شده است ویژگی در دسترس نیستایجاد پروفایل ها، کانال ها و صفحات گوگل پلاس. اگر محتوای ارزشمندی در حساب شما ذخیره شده است، می توانید دانلود کنید پشتیبان گیری.
بسیاری از تغییرات بر وبلاگ نویسانی که وبلاگ های خود را در Blogspot اجرا می کنند تأثیر می گذارد. برخی از ویجت‌های G+، نظرات G+، و نمایه گوگل+ این در اعلان در پانل مدیریت بلاگر بیان شده است:
پس از اعلام فسخ کار API Google+, که برای مارس 2019 برنامه ریزی شده است، در 4 فوریه تغییرات زیادی در ادغام Blogger با Google+ وجود خواهد داشت.
ابزارک های Google+.ویجت‌های 1+، دنبال‌کنندگان Google+ و نشان Google+ دیگر در طرح‌های وبلاگ پشتیبانی نمی‌شوند. همه نمونه‌های این ویجت‌ها از وبلاگ شما حذف خواهند شد.
دکمه های +1.دکمه‌های +1 و G+ و همچنین پیوندهای «اشتراک‌گذاری در +Google» در زیر پست‌های وبلاگ و در نوار پیمایش حذف خواهند شد.
لطفاً توجه داشته باشید که اگر از یک الگوی سفارشی استفاده می‌کنید ویژگی های گوگل+، ممکن است نیاز به تغییر داشته باشد. برای راهنمایی با شخصی که این الگو را در اختیار شما قرار داده است تماس بگیرید.
نظرات +Google.نظرات از با استفاده از گوگل+، و همه وبلاگ هایی که از این ویژگی استفاده می کنند نظرات پیش فرض Blogger خود را بازیابی می کنند. متأسفانه، نظرات ارسال شده از طریق +Google نمی توانند به Blogger منتقل شوند، بنابراین دیگر در وبلاگ شما ظاهر نمی شوند.

حذف نظرات گوگل پلاس

متاسفانه نظراتی که در سامانه منتشر شده اند برای همیشه حذف خواهند شد. شما فقط می توانید از همان ابزار استفاده کنید https://takeout.google.comبرای گفتن نظرات پشتیبان از +Google به رایانه خود. فقط یک بوت لودر برای آن ارائه نشده است و شما فقط می توانید نظرات را به صورت دستی به روشی نسبتاً کج بازیابی کنید. خیلی خوب است که به موقع به وقتم رسیده ام.

چگونه پروفایل گوگل پلاس را با پروفایل بلاگر جایگزین کنیم؟

اگر در Blogspot وبلاگ نویسی می کنید، بهتر است اکنون از نمایه Google Plus خود به نمایه Blogger خود برگردید (برای کسانی که در گذشته به Google Plus تغییر داده اند). توصیه می کنم همین الان این کار را انجام دهید تا از موقعیت های پیش بینی نشده ای که ممکن است هنگام حذف رخ دهد جلوگیری کنید حساب های گوگلبه علاوه.

چگونه نمایه بلاگر خود را برگردانیم

انجام این کار در تنظیمات مدیریت بلاگر آسان است:
تنظیمات -> تنظیمات کاربر–> نمایه کاربر – در اینجا Blogger را انتخاب کنید


تغییرات خود را ذخیره کنید

انتقال به را تأیید کنید و نام یا نام مستعار خود را وارد کنید.

فراموش نکنید که یک آواتار را در نمایه بلاگر خود آپلود کنید.

چگونه پروفایل گوگل پلاس را حذف کنیم

اگر تصمیم دارید یک بار برای همیشه از پروفایل G+ خود خلاص شوید، به صفحه Google Plus خود بروید -> تنظیمات -> به پایین صفحه بروید -> حساب Google Plus خود را حذف کنید:


نویسنده: ایوانووا ناتالیا

امروز به شما خواهم گفت که CSS3 چیست، با چه چیزی خورده می شود، کجا آن را جستجو کنید، چگونه آن را به درستی بنویسید. اخطار میدم از خودم میگم به نظرم ساده شده برای عموم + مثالها. بنابراین، اجازه دهید از راه دور شروع کنیم.
CSS سبک هایی است که ویژگی های یک شی را توصیف می کند. این بدان معنی است که آنها در تمام موتورهای موجود هستند، اگر نمی توانید آنها را پیدا کنید، یا در جای اشتباهی جستجو کنید، یا واقعا وجود ندارند ( سایت منحنی). معمولا کجا پیدا می شوند؟ معمولاً این ریشه سایت، نام فایل style.css است، اگرچه در اصل اگر فایل با چنین پسوندی یک فایل سبک باشد، نام آن به اندازه پسوند css مهم نیست.
در وبلاگ من هم ببینید

کجا به دنبال آنها بگردیم؟

مسیر فایل در قالب بین نسبت داده می شود
" />
Blogspot کمی متفاوت است، جایی که سبک ها درست در کد، قبل از برچسب نوشته می شوند بین
اینجا سبک ها

استایل ها چگونه به نظر می رسند؟

بیایید به یک مثال نگاه کنیم:
#header ( پس‌زمینه: #fff؛ اندازه قلم: 13 پیکسل؛ ارتفاع خط: 1.5؛ خانواده قلم: جورجیا، "Times New Roman"، "Bitstream Charter"، Times، serif; رنگ: #333; ) .contacts ( موقعیت: مطلق؛ بالا: 20 پیکسل؛ سمت راست: 10 پیکسل؛ )
مخاطبین نویسنده سایت وب سایت
شما می توانید سبک ها را در هر سایتی مشاهده کنید، تنها چیزی که نیاز دارید یک مرورگر است. اکنون می توانید با خواندن ظاهر آنها در این مقاله به راحتی آنها را تشخیص دهید.
همانطور که می بینید، سبک ها متفاوت نوشته شده اند. سبک‌هایی که با علامت پوند شروع می‌شوند دارای شناسه بلاک خاصی هستند، سبک‌های دارای نقطه دارای کلاس بلوک خاصی هستند. در غیر این صورت، سبک ها کار نمی کنند. شما می توانید هر نامی را که می خواهید بیاورید، نکته اصلی این است که آنها با شناسه و کلاس نوشته شده در html مطابقت دارند. ویژگی های سبک باید در پرانتز محصور شود و پس از آن یک دونقطه ( به مثال بالا نگاه کنید، پارامتر نوشته شده و با نقطه ویرگول بسته می شود. مجاز است که در آخرین ویژگی در انتها نمی توانید نقطه ویرگول قرار دهید، فقط یک براکت بسته.
این اتفاق می‌افتد که CSS بلافاصله در یک بلوک نوشته می‌شود، بدون اینکه آن را به یک فایل جداگانه ارسال کنیم:
سربرگ سایت

CSS در Blogspot

سبک ها را می توان متفاوت نوشت، بعداً به دلیل چیست توضیح خواهم داد. با باز کردن کد، می‌توانیم این را ببینیم (استایل‌ها را با دقت نگاه کنید، تگ‌های وبلاگ‌نویسی آشنا را خواهید دید که استایل‌ها را تنظیم می‌کنند):
همانطور که می بینید، ویژگی style .هدر h1به طور جداگانه در بالا ذکر شده است. چگونه یک ملک را بفهمیم و پیدا کنیم؟ بسیار ساده، فونتیک پارامتر وجود دارد header.font، این چیزی است که ما به دنبال آن هستیم. ما آن را در گروه ویژگی "Blog Title" برای سبک ".header h1"، در داخل 2 ویژگی "header.font" و "header.text.color" پیدا می کنیم. در اینجا ما آنها را تغییر می دهیم. این کار برای سرعت بخشیدن به خواندن سبک ها توسط مرورگر انجام می شود، بنابراین درخواست های کمتری ایجاد می کند. پس از همه، ملک header.text.colorممکن است در جای دیگر تکرار شود در زیر موارد بیشتری وجود دارد header.shadow.offset.leftو دیگران، معنی در آنها یکی است، تکرار نمی کنم.
وقتی می گویند در css (یا سبک ها) جستجو کنید، به این معنی است که ما در بین تگ ها به دنبال نقطه وبلاگ هستیم
و معمولا قبل از برچسب
مگر اینکه مستقیماً در html نوشته شده باشند (مثال بالا، سبک ها در بلوک ها). در cms های دیگر، معمولاً همه چیز در یک فایل جداگانه با پسوند css. قرار می گیرد

نویسنده: ایوانووا ناتالیا

2019-02-15

این آخرین مقاله برای ارائه اطلاعات به روز در مورد حذف پیوندهای اضافی از قالب های Blogspot و همچنین تم های جدید Blogger نوشته شده است. همانطور که می دانید، در سال 2018 تغییراتی در کدهای بلاگر ایجاد شده است، بنابراین بسیاری از اقدامات کد باید به روشی جدید انجام شود. بعلاوه، مضامین جدیدی وجود دارد که به شکل متفاوتی شکل گرفته اند. در رابطه با این تغییرات به تحلیل مبحث حذف لینک ها می پردازیم.
می توانید وبلاگ خود را برای پیوندهای خارجی در سرویس های https://pr-cy.ru/link_extractor/ و https://seolik.ru/links بررسی کنید. فراموش نکنید که شما باید نه تنها صفحه اصلی وبلاگ، بلکه صفحه سوابق (پست ها) و صفحات (صفحه) را نیز بررسی کنید. تعداد زیادی لینک خارجی برای ایندکس کردن باز می شوند.

چگونه پیوندها را از الگوی استاندارد قدیمی بلاگر حذف کنیم

با استفاده از قالب Simple به عنوان مثال.
چنین قالب هایی بیشترین لینک های ورودی را ارائه می دهند. در وبلاگ آزمایشی من، هنگام نصب یک تم ساده، هنگام بررسی، 25 لینک خارجی در صفحه اصلی پیدا شد که 14 مورد ایندکس شده بودند.
یادآوری می کنم که قبل از ایجاد تغییرات در کد قالب، یک نسخه پشتیبان تهیه کنید!
  1. حذف پیوند بلاگر - https://www.blogger.com/.این پیوند در یک ویجت Attribution پیچیده شده است. در برگه "طراحی وبلاگ"، به عنوان ابزار Attribution و . برای حذف آن، به تب "Theme" بروید -> ویرایش HTML. با جستجوی ویجت ها (لیست ویجت ها)، Attribution1 را پیدا می کنیم و تمام کدها را به همراه قسمت فوتر که در آن قرار دارد حذف می کنیم. این همان چیزی است که کد حذف شده به شکل جمع شده به نظر می رسد:


    و به این ترتیب کد کامل:














    ما تغییرات را ذخیره می کنیم و وبلاگ را برای Attribution بررسی می کنیم.
  2. شما مطمئناً نمادهای "آچار و پیچ گوشتی" را در وبلاگ خود برای ویرایش سریع ویجت ها مشاهده کرده اید. هر یک از این نمادها یک پیوند خارجی به بلاگر را به همراه دارد. اکنون آنها توسط تگ nofollow بسته شده اند، اما هنوز باید از شر آنها خلاص شوید. ویجت ها را در تب Design ویرایش خواهید کرد.
    در اینجا یک لیست ناقص از پیوندهایی است که در نمادهای آچار رمزگذاری شده اند (شناسه وبلاگ متعلق به شما خواهد بود)
    - ویجت HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
    - ویجت HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
    - بایگانی وبلاگ: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
    - برچسب های وبلاگ: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
    - پست های محبوب: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
    خلاص شدن از شر همه این پیوندها آسان است. برچسب را در قالب وبلاگ خود پیدا کنید . به تعداد دفعاتی که ویجت‌هایی در وبلاگ شما وجود دارد، رخ می‌دهد. تمام موارد تکرار یک برچسب را حذف کنید .
  3. پیوندهای ویرایش سریع یک ورودی وبلاگ (نماد "مداد") را حذف می کنیم. ویرایش پست‌ها را آسان‌تر می‌کند، اما تهدید را به‌عنوان پیوند خارجی فرم حمل می‌کند: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
    نحوه حذف:
    روش 1. در برگه طراحی، عنصر "پست های وبلاگ" را ویرایش کنید و تیک کادر "نمایش "ویرایش سریع"" را بردارید.
    روش 2. برچسب را در قالب وبلاگ پیدا کنید و آن را حذف کنید. تغییرات خود را ذخیره کنید و وبلاگ خود را برای نماد و پیوند بررسی کنید.
  4. نوار نوار را حذف کنید. ویجت ها را در قالب html وبلاگ Navbar1 جستجو کنید و تمام کدها را به همراه قسمت حذف کنید.

    برای مثال:









    اکنون Navbar در وبلاگ پیوندهای خارجی قابل نمایه سازی را ارائه نمی دهد، اما من معتقدم که این یک عنصر اضافی است که بار عملکردی را حمل نمی کند و بهتر است آن را حذف کنید.
  5. پیوندهای خارجی به تصاویر را حذف کنید. هنگامی که تصاویر در یک پست وبلاگ آپلود می شوند، یک لینک به طور خودکار در آنها تعبیه می شود. برای حذف چنین پیوندهایی، باید همه پست های وبلاگ را ویرایش کنید. در حالت "View" و سپس به نماد "Link". اگر تصویر حاوی پیوند خارجی نیست، وقتی روی عکس در ویرایشگر پست کلیک می کنید، نماد "پیوند" فعال نیست (آیکون برجسته نمی شود).

  6. پیوند به نمایه نویسنده وبلاگ را حذف کنید. نویسنده وبلاگ زیر ورودی را حذف کنید. برای انجام این کار، کد را پیدا کنید درست است، واقعیو به جای درست، غلط بنویسید. معلوم می شود نادرست
  7. پیوند را از ویجت " " از نمایه سازی با تگ nofollow ببندید. اگر از ویجت "نمایه" در وبلاگ خود استفاده می کنید، از جستجوی سریع ویجت در قالب وبلاگ برای یافتن کد ابزار Profile1 استفاده کنید. شما باید کد ویجت را ویرایش کنید و در دو مکان rel='author' را با جایگزین کنید و را به دو لینک اضافه کنید. شما باید چیزی شبیه در تصویر دریافت کنید:


    با استفاده از مثال ویرایش نمایه Google Plus ساخته شده است. به عنوان یادآوری، گوگل پلاس در تاریخ 2 آوریل 2019 به تدریج حذف خواهد شد. بر این اساس، پس از این تاریخ، لازم است تغییرات دیگری در کد ویجت "درباره من" ایجاد شود.

  8. پیوندهای خارجی را در هر صفحه پست Blogspot که نظر دارد بررسی کنید. کد موجود در قالب وبلاگ را پیدا و حذف کنید:

    در تنظیمات وبلاگ در امتداد مسیر تنظیمات وبلاگ -> سایر -> فید سایت -> اجازه فید وبلاگ، تنظیمات زیر را اعمال کنید:

پیوندهای خارجی را از الگوی پیش فرض جدید Blogger حذف کنید

استفاده از تم Notable به عنوان مثال
  1. حذف Attribution (لینک زیر - Blogger Technologies)
    ما Attribution1 را در قالب وبلاگ جستجوی ویجت (فهرست ابزارک ها) می یابیم و کد را به همراه بخش بر اساس قیاس با الگوی قدیمی Blogger حذف می کنیم (به 1 بالا مراجعه کنید).
  2. پیوند را از ویجت "گزارش سوء استفاده" حذف کنید. این ویجت ReportAbuse1 است. ما در جستجوی ویجت ها می یابیم:
    کل کد به صورت زیر است:




  3. ما صفحه پست وبلاگ را با نظرات بررسی می کنیم و پیوندها را با قیاس با الگوهای وبلاگ قدیمی حذف می کنیم (نگاه کنید به بالا - نقطه 8).
  4. پیوندهایی را از پست های وبلاگ که در تصاویر پست تعبیه شده اند حذف کنید (به نقطه 5 مراجعه کنید).

نویسنده: ایوانووا ناتالیا

روز دوبروی! امروز در مورد طرح بندی صفحه سه ستونی صحبت خواهیم کرد. این شبکه راهنمای بسیار جالبی برای و دارد که بدون شک برای هر وب مستر محترمی مفید خواهد بود. این منبع htmlbook.ru است. اطلاعات مفید زیادی در آنجا وجود دارد. در این پست به طرح سه ستونی ارائه شده در این منبع می پردازیم.

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

Wireframe کلی با لایه ای به نام Container تعریف می شود که عرض و تراز طرح را تعیین می کند. ستون ها در داخل قرار دارند و ترتیب آنها در کد به شرح زیر است: چپ (بیایید آن را nav بنامیم)، راست (کنار)، مرکزی (محتوا). ساختار لایه ها در مثال 1 نشان داده شده است.

مثال 1. ستون ها در کد

ستون سمت راست
ستون مرکزی

موقعیت لایه ها از طریق سبک ها شکل می گیرد: برای ستون سمت چپ، عرض (عرض) و بسته بندی در امتداد لبه چپ (شناور: چپ)، برای ستون سمت راست - عرض و بسته بندی در امتداد لبه سمت راست (شناور: سمت راست) ، برای ستون مرکزی - تورفتگی به چپ و راست توسط عرض ستون های چپ و راست (مثال 2).

مثال 2. سبک برای ایجاد ستون

#کانتینر ( عرض: 900 پیکسل؛ /* عرض طرح */ حاشیه: 0 خودکار؛ /* تراز وسط */ ) #nav ( عرض: 200 پیکسل؛ /* عرض ستون سمت چپ */ شناور: چپ؛ ) #کنار ( عرض: 300 پیکسل ; /* عرض ستون سمت راست */ float: right; ) #content ( حاشیه: 0 300px 0 200px؛ /* حاشیه ستون چپ و راست */ )

کد کامل صفحه با در نظر گرفتن این سبک در مثال 3 ارائه شده است.

مثال 3: طرح سه ستونی

طرح بندی سه ستونی

آمار

یازده نفر به فینال رسیدند.

یک نفر به درستی به سبکی که دیگو ولاسکز نوشته است اشاره کرد.

فقط یک نفر می دانست چه کسی قایق بخار را اختراع کرد.

نظرسنجی نشان داد

  • که قایق بخار توسط: پیتر اول، آ. انیشتین و آ. پوپوف اختراع شد.
  • دیگو ولاسکز بوم های نقاشی خود را به سبک: امپریالیسم، کوبیسم و ​​امپریالیسم نقاشی کرد.
  • فانوس دریایی فاروس در فاروس واقع شده است.
  • کنفوسیوسیسم در ایتالیا، کره و فرانسه سرچشمه گرفت.
  • خدایان تجارت و دزدی در یونان باستان عبارتند از: مریخ، عطارد و دیونیسوس.
  • فرانسه یک شهر است.
  • خدایان عالم اموات در مصر عبارت بودند از: هادس، آنوبیس و آشور.
  • پایتخت گروه ترکان طلایی - مغولستان؛
  • مخالفان اصلی اسکندر مقدونی: تاتار-مغول ها، ددالوس و سزار.

این پیاده سازی چندین ویژگی دارد:

  • ستون ها ارتفاع متفاوتی دارند، اما با اعمال پس زمینه، توهم یک ارتفاع برای هر سه ستون ایجاد می شود.
  • ستون‌های چپ و راست دارای رنگ پس‌زمینه یکسانی هستند، این رنگ توسط ویژگی پس‌زمینه برای لایه ظرف تنظیم می‌شود.
  • ظاهر ستون ها تنها زمانی حفظ می شود که ارتفاع ستون مرکزی بیشتر از بقیه باشد. اگر این شرط نقض شود، جلوه ستون ها ناپدید می شود (شکل 2)، در غیر این صورت طرح به درستی نمایش داده می شود.

برنج. 2. ستون سمت راست بالاتر از بقیه است

07/19/16 2.9K

در این مقاله قدم به قدم قوانین چیدمان یک سایت با دو ستون را بررسی می کنیم. کدی که ما ارائه کرده‌ایم به شما این امکان را می‌دهد که یک سرصفحه و پاورقی را در این دو ستون اضافه کنید.

مقدمه

برای تکمیل وظایف این مقاله، باید بتوانید به دو زبان HTML و CSS کدنویسی کنید. اگر اینطور نیست، پس بهتر است از یک ویرایشگر بصری استفاده کنید.

لطفاً توجه داشته باشید که اصلاً لازم نیست در HTML یا CSS متخصص باشید. شما فقط باید دانش اولیه ای از این فناوری ها داشته باشید، در غیر این صورت این مقاله برای شما نامفهوم خواهد بود.

استفاده از ویژگی float برای ایجاد دو ستون

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

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

کد HTML اصلی برای یک وب سایت دو ستونی

بخش HTML کد بسیار ساده است. ما فقط به دو بلوک div نیاز داریم، یکی برای هر ستون:

محتوا

کلمات "Navigation Menu" و "Content" فقط نشانگر نوار کناری پیمایش و محتوای اصلی هستند. بعداً با قرار دادن محتوای واقعی در بلوک‌ها، این کلمات را حذف خواهید کرد. Div "container" یک بلوک حاوی دو ستون است. اگر می خواهید سبک های خاصی را در هر دو ستون اعمال کنید، می تواند استفاده شود.

کد CSS برای یک سایت با دو ستون

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

کد CSS بسیار ساده است:

#content ( شناور: سمت راست؛ عرض: 80%؛ ) #navbar ( شناور: سمت راست؛ عرض: 20%؛ )

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

نحوه عملکرد کد بالا در عمل را می توان در اینجا مشاهده کرد.

چگونه کار می کند: کد CSS توضیح داده شده است

قانون "float: right" تعیین می کند که چگونه بلوک DIV از جریان عمومی سند خارج می شود و همچنین در سمت راست سایر عناصری که از سمت چپ در اطراف آن جریان دارند قرار می گیرد. اولین بلوک DIV که در یک صفحه HTML رخ می دهد ابتدا تورفتگی دارد.

در مثال بالا، "#content" ابتدا به سمت راست منتقل شده و به عرض 80٪ از عرض پنجره مرورگر تنظیم شده است. قانون بعدی ما همچنین "#navbar" را از جریان سند خارج کرده و به سمت راست منتقل می کند.

از آنجایی که ما قبلاً یک عنصر شناور در این موقعیت داریم. با توجه به قوانین چیدمان پاسخگوی داده شده، اگر فضای کافی برای عنصر موجود باشد، بلوک دوم در سمت چپ عنصر موجود قرار می گیرد. در غیر این صورت در زیر عنصر اول قرار می گیرد. با این حساب، مجموع اضلاع هر دو بلوک باید برابر با 100% یا کمتر باشد، در غیر این صورت فضای کافی برای قرار دادن آنها در کنار هم نخواهیم داشت.

نحوه قرار دادن ستون ناوبری در سمت راست

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

#content ( شناور: سمت چپ؛ عرض: 80%؛ ) #navbar ( شناور: سمت چپ؛ عرض: 20%؛ )

با کلیک بر روی دکمه جابجایی در ستون منوی ناوبری سمت راست می توانید این کد را در عمل مشاهده کنید.

نحوه صحیح تغییر عرض

با توجه به قوانین چیدمان فنی تعیین شده، سبک های فوق عرض ستون کناری را به 20٪ از عرض پنجره مرورگر، و به ستون محتوا - 80٪، که در کل 100٪ می دهد تنظیم می کند.

اگر قصد دارید این مقادیر را تغییر دهید، مطمئن شوید که مجموع کل آنها برابر یا کمتر از 100٪ باشد، در غیر این صورت مرورگر یک ستون را زیر ستون دیگر قرار می دهد.

اگر یکی از ستون ها به زیر دیگری منتقل شود: چگونه آن را تعمیر کنیم

اگر متوجه شدید که یکی از ستون ها به جای کنار هم، زیر ستون دیگر قرار می گیرد، به این معنی است که عرض ترکیبی هر دو ستون بیش از 100٪ عرض پنجره مرورگر است.

حتی اگر از مقادیر "20%" و "80%" من استفاده کنید، ممکن است این اتفاق بیفتد. به عنوان مثال، اگر برای یک یا هر دو ستون حاشیه، حاشیه و بالشتک اضافه کنید. عرض این ستون ها نیز افزایش می یابد و باعث می شود که مجموع از 100 درصد فراتر رود.

قوانین چیدمان و سازگاری بین مرورگرها به دو روش برای حل این مشکل اشاره دارد:

  • عرض ستون ها را کم کنید تا مرورگر آنها را به شکل دلخواه شما نمایش دهد. اما به یاد داشته باشید که درصدها یک واحد نسبی اندازه گیری هستند. به عرض پنجره مرورگر کاربر گره خورده است. بنابراین، اگر طرح‌بندی را روی سیستم خود آزمایش کرده باشید و متوجه شده باشید که افزودن 10 پیکسل به یکی از ستون‌های خود به padding-left و کاهش عرض 1% به خوبی کار می‌کند، نمی‌توانید نتیجه بگیرید که 1% = 10px. به عبارت دیگر، 1% از 1024 پیکسل با 1% از 1920 پیکسل متفاوت است و غیره. اطمینان حاصل کنید که تفاوت عرض پنجره را در سایر مرورگرها و اندازه صفحه نمایش در نظر گرفته اید.
  • راه حل ترجیحی من این است که یک DIV تودرتو در داخل بلوک های "#navbar" و "#content" ایجاد کنم و تمام padding ها، حاشیه ها، حاشیه ها و محتوای واقعی را در آن قرار دهیم. بنابراین، برای بلوک های بیرونی، می توانید 20% و 80% قدیمی را بدون نگرانی در مورد تنظیمات حاشیه، تورفتگی و غیره رها کنید.

به عنوان مثال، در سایت دمو با دو ستونبا استفاده از کد HTML زیر برای ایجاد یک بلوک DIV تودرتو:

محتوا

ویژگی های زیر را برای "#innercontent" و "#innernavbar" به سبک های CSS که قبلا نوشتید اضافه کنید:

#innercontent ( padding-left: 10px; padding-right: 10px; ) #innernavbar (padding-left: 5px; padding-right: 5px; )

CSS برای "#content" و "#navbar" همان چیزی است که در نیمه اول این مقاله توضیح داده شد.

از آنجا که بالشتک روی DIV داخلی اعمال می شود، ابعاد جعبه های بیرونی بدون تغییر باقی می مانند و ما یک طرح دو ستونی داریم.

نحوه اضافه کردن سرصفحه و پاورقی سایت که هر دو ستون را در بر می گیرد

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

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

صفحه آرایی

بخش HTML

بیایید دو ستون تعریف کنیم که بعداً با استفاده از CSS همان ارتفاع را ایجاد می کنیم:

1 2 3 4 5 6 7 8 id="page"> <div id="main"> </div>

یعنی باید مطمئن شویم که بلوک

با شناسه اصلی و مسدود کنید

برترین مقالات مرتبط

Punto Switcher - یک مامور مخفی و یک دستیار ضروری!
Punto Switcher - یک مامور مخفی و یک دستیار ضروری!
چگونه سرور VPN خود را راه اندازی کنید
چگونه سرور VPN خود را راه اندازی کنید
نحوه باز کردن فایل rar
نحوه باز کردن فایل rar
دسته بندی ها:
© 2022 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی