جداسازی صفحات به بلوک در css. مدل بلوک

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

بیایید یک مقدار عرض برای هر بلوک اضافه کنیم:

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

حال این سوال پیش می آید که چگونه باید ترتیب داد بلوک های div در یک خط، یکی پس از دیگری؟

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

ویژگی float دارای مقادیر زیر است:

• سمت چپ - بلوک تراز چپ است و در سمت راست پیچیده می شود
• سمت راست - بلوک به سمت راست تراز شده است، به سمت چپ پیچیده می شود
• هیچ - بسته بندی تنظیم نشده است، بلوک به طور پیش فرض مانند نمونه های قبلی رفتار می کند.

بیایید یک float:left به بلوک های خود اضافه کنیم تا بلوک ها در سمت چپ تراز شوند:

در نتیجه بلوک ها در یک خط قرار گرفتند. خوب، فرض کنید می‌خواهیم یک div دیگری در پایین اضافه کنیم، و می‌توانیم بدون مشخص کردن ویژگی float این کار را انجام دهیم:

بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

واحد 4

بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

واحد 4

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

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

بیایید یک ویژگی clear:left را به بلوک 4 اضافه کنیم، که از پیچیده شدن این عنصر در اطراف سایر عناصر شناور در سمت چپ جلوگیری می کند.

بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

واحد 4

بلوک 4 بر روی یک خط جدید قرار می گیرد، همانطور که ما نیاز داریم.

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

لازم به یادآوری است که بلوک ها ارزش شناوراگر عرض اجازه دهد در همان خط واقع شده است عنصر والد. اگر عناصر بلوک در یک ردیف قرار نگیرند، در یک خط جدید قرار می گیرند. اگر این مهم است، به عنوان مثال، هنگام چیدمان چیدمان ها، باید این را در نظر بگیرید، و برای بلوک های دارای شناور، حتماً عرض را تنظیم کنید - ثابت (px) یا لاستیک (٪، rem و غیره). بیایید نگاهی به این موقعیت ها بیندازیم.

اگر بخواهیم این بلوک ها را در مرکز قرار دهیم چگونه روی بلوک ها تأثیر بگذاریم؟

راه حل کلاسیک این است که یک والد به بلوک ها اضافه کنید و از حاشیه استفاده کنید: ویژگی خودکار 0;

چرا به خود والد کلاس .wrapper دادیم؟ لفاف در ترجمه به معنای لفاف است. زمانی که یک عنصر بلوک‌های دیگر را می‌پیچد و بنابراین اجازه می‌دهد با تغییر خود والد، آن‌ها را دستکاری/تأثیر بگذارند، نوعی روش معمول است که یک کلاس را تعریف کنیم.

بیایید نشانه گذاری را از نمونه های قبلی بگیریم و آن را اصلاح کنیم.

بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

واحد 4

به نظر می رسد اینجا همه چیز ساده است.

و اگر دوست نداریم که متن به لبه بلوک والد نزدیک شود و بخواهیم بدون ایجاد تغییرات در نشانه گذاری، حاشیه اضافه کنیم، فقط با css. بیایید ویژگی padding را به عناصر اضافه کنیم:

بلوک 1. لورم

بلوک 2. Lorem ipsum

بلوک 3. لورم ایپسوم

بلوک 4. لورم

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

بلوک 1: 10 + 200 + 10 = 220 پیکسل

بلوک 2: 10 + 150 + 10 = 170 پیکسل

بلوک 3: 10 + 100 + 10 = 120 پیکسل

بلوک 4: 10 + 450 + 10 = 470 پیکسل

220 + 170 + 120 = 510 پیکسل

عرض کل سه بلوک 510 است، آنها در عرض والد (450) قرار نمی گیرند و بنابراین به یک خط جدید بسته می شوند.

چگونه رفع کنیم؟ می توانید کارهای زیر را انجام دهید:

1. با در نظر گرفتن حاشیه، مقادیر عرض را برای هر بلوک بازنشانی کنید. کاهش اندازه بلوک همه چیز دوباره در یک خط قرار می گیرد. موافقید، ناراحت کننده است؟ هر بار برای صعود به طرح و ویرایش چیزی.
2. استفاده از ویژگی box-sizing: border-box. به طوری که محاسبه از عرض کل بلوک گرفته می شود. من به شما توصیه می کنم که بدانید مدل بلوک css چیست.

ما از گزینه دوم استفاده می کنیم، به این صورت معلوم می شود:

بلوک 1. لورم

بلوک 2. Lorem ipsum

بلوک 3. لورم ایپسوم

بلوک 4. لورم

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

ایجاد نشانه گذاری طرح بندی:

سبک های نوشتاری:

بدنه (حداکثر عرض: 900 پیکسل؛ /* محدودیت حداکثر عرض*/حاشیه: 0 خودکار; ) /* برای همه بلوک های داخل بدنه، الگوریتم محاسبه عرض بلوک را تغییر دهید و 10 پیکسل حاشیه به همه بلوک ها اضافه کنید */ body div ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; اندازه جعبه: جعبه حاشیه؛ بالشتک: 10 پیکسل؛ ) .هدر ( پس زمینه: #CCA69E؛ بالشتک: 10 پیکسل؛ ) .نوار کناری سمت چپ (عرض: 20%؛ پس‌زمینه: #8ED9B6؛ شناور: سمت چپ؛ ) .content ( شناور : چپ؛ عرض: 60%؛ .نوار کناری سمت راست (عرض: 20%؛ پس‌زمینه: #FF9282؛ شناور: چپ؛ ) .footer (پس‌زمینه: #000؛ روشن: هر دو؛ /* بسته‌بندی را در هر دو طرف غیرفعال کنید، بلوک در یک خط جدید نمایش داده می شود */ رنگ: #ccc؛ )

اگر چیزی واضح نیست، در نظرات بپرسید.

با سلام خدمت دوستداران IT عزیز. امروزه راه اصلی ایجاد سایت های چند صفحه ای زیبا بر اساس طرح بندی بلوک با استفاده از تگ div است.

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

ویژگی های عناصر بلوک

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

همه عناصر بلوک از 4 ویژگی تشکیل شده اند که محتوای شی را مانند فریم ها احاطه می کنند.

سر بلوک است محتوا.

در اطراف آن فیلدهایی وجود دارد که نامیده می شود لایه گذاری. حاشیه ها مسئول فاصله بین محتوای یک شی و لبه داخلی مرزها هستند.

پس از آن خود مرزها می آیند که به آنها می گویند کلمه انگلیسی مرز.

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

به عنوان مثال، اجازه دهید شماره 2 را برنامه ریزی کنیم و عناصر ایجاد شده را با متن پر کنیم.

در این لحظهدر این کد به صورت دو جمله عادی نمایش داده می شود. برای طراحی بلوک ها باید یک style sheet و زبان cssویژگی های خاصی را تنظیم کنید

بیایید رنگ های روشن را به زندگی روزمره html بیاوریم

برای اینکه اشیاء بلوک جالب و جذاب به نظر برسند، قطعاً باید یک شیوه نامه آبشاری قرار دهیم.

برای انجام این کار، در ظرف سر بعد از برچسب

مسدود کردن در css - 2.

مسدود کردن در css - 3.

در نتیجه:

اکنون در CSS، چند ترفند را نشان خواهم داد که در آن امکانات بلوک‌های HTML گسترش می‌یابد.

مرز بلوک CSS

ویژگی "مرز»
من اغلب هنگام ایجاد صفحات وب از فریم استفاده می کنم. فریم ها به من کمک می کنند ببینم بلوک از کجا شروع می شود و کجا به پایان می رسد. این کار من را راحت تر می کند. همچنین می توان از قاب برای طراحی بلوک ها استفاده کرد.
برای ایجاد فریم برای بلوک‌ها، قاعده‌ای را که از قبل می‌دانید «حاشیه» را بنویسید.

نحو:

حاشیه: مرز_ضخامت مرز_نوع مرز_رنگ;

در css -1 بلاک کنید.

مسدود کردن در css - 2.

مسدود کردن در css - 3.

اگر نمی دانید کجا و کجا CSS را وارد کردم، به خطوط 4 تا 17 توجه کنید. و اگر هنوز هم چنین سؤالی دارید، چه کار کردم، سپس درس شماره 3 را تکرار کنید - "".

نتیجه:

حالا می توانید مرزهای بلوک را ببینید و وقتی حاشیه ها قابل مشاهده هستند، کار با بلوک ها راحت تر است.

بالشتک بلوک CSS

ویژگی "لبه»
برای تعیین فاصله (تورفتگی) از بلوک، از قانون "حاشیه" استفاده کنید.
به نمودار توجه کنید. پارامترها از بلوک تنظیم می شوند:

خواص:

• بالا- سمت بالا
• درست- سمت راست
• پایین- سمت پایین
• ترک کرد- سمت چپ

margin-top:30px; /* سمت بالا */ margin-right:70px; /* سمت راست */ margin-bottom:90px; /* سمت پایین */ margin-left:120px; /* سمت چپ */

فرم مخفف

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

نحو:

حاشیه: بالا_سمت راست_سمت_پایین_سمت چپ;

حاشیه: 30px 70px 90px 120px; /* علامت کوتاه */

در css -1 بلاک کنید.

مسدود کردن در css - 2.

مسدود کردن در css - 3.

نتیجه:

اگر یک پارامتر را روی قانون "حاشیه" تنظیم کنید (خط شماره 22):

حاشیه: 100 پیکسل /* علامت کوتاه */

سپس فاصله بلوک از هر طرف 100 پیکسل خواهد بود.

padding در یک بلوک در CSS

ویژگی "لایه گذاری»
برای تنظیم فاصله (تورفتگی) در داخل بلوک، از قانون " padding" استفاده کنید.
به نمودار توجه کنید:

خواص:

• بالا- سمت بالا
• درست- سمت راست
• پایین- سمت پایین
• ترک کرد- سمت چپ

padding-top:30px; /* سمت بالا */ padding-right:70px; /* سمت راست */ padding-bottom:90px; /* سمت پایین */ padding-left:120px; /* سمت چپ */

فرم مخفف

شما می توانید تمام آنچه را که در بالا نوشتم به صورت مختصر بنویسید.

نحو:

بالشتک: بالا_سمت_سمت_راست_پایین_سمت_سمت چپ;

پد: 30px 70px 90px 120px; /* علامت کوتاه */

در فایل HTML به صورت زیر بنویسید:

در css -1 بلاک کنید.

مسدود کردن در css - 2.

مسدود کردن در css - 3.

نتیجه:

اگر یک پارامتر را روی قانون "padding" تنظیم کنید (خط 21):

padding: 50px; /* علامت کوتاه */

سپس فاصله داخل بلوک از هر طرف 50 پیکسل خواهد بود.

بلوک عرض و ارتفاع در CSS

ویژگی "WIDTH"و"HEIGHT»
می توانید عرض و ارتفاع بلوک ایجاد کنید. برای انجام این کار، از قوانین "عرض" - عرض و "ارتفاع" - ارتفاع استفاده کنید.

نحو:

• ارتفاع - ارتفاع بلوک؛
• عرض - عرض بلوک؛

معنی:
مقدار به px یا ٪ داده شده است.

عرض: 600 پیکسل /* عرض بلوک */ ارتفاع: 250 پیکسل. /* ارتفاع بلوک */

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

نتیجه:

بلوک دارای عرض و ارتفاع ثابت خواهد بود.

اگر نیاز به رفع نشدن دارید و بلوک لاستیکی(بلوکی که در طول مانیتور کشیده می شود)، سپس به جای px، باید ٪ را مشخص کنید. فقط به یاد داشته باشید: کل مانیتور 100٪ است.

عرض: 90%; /* عرض بلوک لاستیکی */

پس زمینه را در CSS مسدود کنید

ویژگی "زمینه»
شما قبلاً قانون "پس زمینه" را می دانید، بنابراین دلیلی برای تکرار خودم نمی بینم.
و کسی که نمی داند، شما به صفحه با آن خوش آمدید.

بلوک 1.

خط شماره 7 - با قانون "پس زمینه"ما پس زمینه را با سبز جایگزین کردیم

نتیجه:

می توانید پس زمینه را نه تنها با رنگ، بلکه با یک عکس نیز پر کنید:

تصویر پس زمینه: url(bg.gif); /* تصویر پس زمینه */

بلوک 1.

خط شماره 7 - با قانون "تصویر پس زمینه"، پس زمینه را با تصویر پس زمینه جایگزین کردیم.
bg.gif تصویر پس زمینه است.

نتیجه:

اضافه کردن

شفافیت در CSS را مسدود کنید

ویژگی OPACITY
یک بلوک را می توان با استفاده از قانون CSS "Opacity" شفاف کرد.

نحو:

Opacity: ارزش

معنی:
مقادیر عددی در محدوده 0 تا 1 هستند.

• مقدار 0 - شفافیت کامل بلوک.
• مقدار 1 - کدورت بلوک (بلوک همانطور که هست باقی می ماند).
• مقدار در کسری (0.5) شفافیت بلوک است.

بلوک 1.

نتیجه:

مخفی کردن بلوک در CSS

ویژگی "نمایش دادن»
قانون "نمایش" به پنهان کردن بلوک صفحه وب کمک می کند. اغلب این قانون در یک منوی کشویی یا زمانی که شما نیاز به پنهان کردن برخی از بلوک ها در نسخه موبایل سایت دارید استفاده می شود.

Block1 (نمایش: هیچ؛)

ویژگی "کدورت»
قاعده "تعوض" همچنین به پنهان کردن بلوک در صفحه وب کمک می کند.

Block1 (تاری: 0;)

ویژگی "دید»
"قابلیت مشاهده" قانون دیگری است که به پنهان کردن بلوک یک صفحه وب نیز کمک می کند. در قاعده "Visibility" مقدار "hidden" را بنویسید:

Block1 (قابلیت مشاهده: پنهان؛)

دارایی سرریز

دارایی «سرریز».
با قانون "سرریز"، می توانید تعریف کنید که اگر محتوای یک عنصر از اندازه آن بیشتر شود، چه کاری انجام می شود. به عنوان مثال، یک تصویر یا متن بزرگتر از خود بلوک است.

نحو:

سرریز: ارزش;

معنی:

• قابل رویت- نشان می دهد که وقتی عنصر از محتوا سرریز می شود، قطع نمی شود، بلکه به سادگی از محدوده خارج می شود (مقدار پیش فرض).
• پنهان شده است- نشان می دهد که محتوایی که در عنصر قرار نمی گیرد بریده می شود (قسمت بریده شده نامرئی خواهد بود).
• طومار- نشان می دهد که محتوایی که در عنصر مناسب نیست بریده می شود، اما می توانید از نوار اسکرول برای مشاهده قسمت بریده شده استفاده کنید.
• خودکار- هنگامی که عنصر مملو از محتوا می شود، نوارهای اسکرول به طور خودکار اضافه می شوند.

مثال با "Visible" (مقدار پیش فرض):

بلوک 1.

نتیجه:

به عنوان مثال با "پنهان»:

Blok1 ( ارتفاع: 200 پیکسل؛ /* ارتفاع */ عرض: 250 پیکسل؛ /* عرض */ حاشیه: 2 پیکسل نقطه‌دار #cc0000؛ /* حاشیه */ سرریز: پنهان؛ )

نتیجه:

به عنوان مثال با "Scroll»:

Blok1 ( ارتفاع: 200 پیکسل؛ /* ارتفاع */ عرض: 250 پیکسل؛ /* عرض */ حاشیه: 2 پیکسل نقطه‌دار #cc0000؛ /* حاشیه */ سرریز: اسکرول؛ )

نتیجه:

مثال با "Auto":

Blok1 ( ارتفاع: 200 پیکسل؛ /* ارتفاع */ عرض: 250 پیکسل؛ /* عرض */ حاشیه: 2 پیکسل نقطه‌دار #cc0000؛ /* حاشیه */ سرریز: خودکار؛ )

نتیجه:

سایه جعبه در CSS

دارایی "BOX-SHADOW".
شما می توانید یک سایه از بلوک ایجاد کنید. قانون جعبه سایه.

نحو:

Blok1 ( ارتفاع: 200 پیکسل؛ /* ارتفاع */ عرض: 250 پیکسل؛ /* عرض */ حاشیه: 1 پیکسل یکپارچه #cccc؛ /* حاشیه */ box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*block shadow*/ )

نتیجه:

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

دارایی "MARGIN".
برای تراز کردن بلوک در مرکز، قانون حاشیه را روی "0 خودکار" تنظیم کنید:

حاشیه: 0 خودکار;

Blok1 ( ارتفاع: 100 پیکسل؛ /* ارتفاع */ عرض: 100 پیکسل؛ /* عرض */ حاشیه: 1 پیکسل ثابت #cccc؛ /* حاشیه */ حاشیه: 0 خودکار؛ )

همین! وقت آن است که این درس را تمام کنید، وگرنه خیلی بزرگ شد! و من قبلاً صدای خروپف را بیرون از مانیتور می‌شنوم.
کمی بیشتر و یادگیری اصول CSS را به پایان خواهیم رساند.

برای به روز رسانی مشترک شوید!

پست قبلی
پست بعدی

پیش از این، در اینترنت، یک نوع طرح بندی جدولی رایج بود که به آن . با این حال، با گذشت زمان، این رویکرد برای ایجاد ساختار سایت منسوخ شد و طرح بندی بلوکی جایگزین آن شد.

تفاوت بین طرح بلوک و جدول

اگر چیدمان جدولی به این معنی باشد که محتوای صفحه در داخل تگ است

، سپس مفهوم طرح بندی بلوک بر اساس استفاده فعال از برچسب های جهانی است

، که محتوا در داخل آن قرار می گیرد، از جمله برچسب های دیگر.

طرح بندی بلوک عاری از مضرات طرح بندی جدولی است - توسط موتورهای جستجو بهتر ایندکس می شود، کد آن چندان گسترده نیست و مسدود می شود

، که خیلی دوست دارند آن را "لایه" بنامند، در ابتدا به عنوان جهانی، یعنی "برای همه چیز" تصور می شد، در حالی که

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

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

ماهیت چیدمان بلوک

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

هر قسمت از صفحه در بلوک خود قرار می گیرد

: بالای سایت - در اول، منو - در دوم، محتوا - در سوم و غیره. هر بلوک با استفاده از HTML با محتوا پر می شود و همچنین با استفاده از نشانه گذاری CSS موقعیت و استایل داده می شود.

سند نهایی HTML مجموعه ای از بلوک ها است

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

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

نتیجه این مثالنشان داده شده در شکل 2.

برنج. 2. بلوک با گوشه های گرد

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

در اینجا مثال دیگری برای ایجاد یک بلوک با شعاع گرد سه پیکسل است. در بسیاری از موارد این بیشترین است بهترین گزینه، هم از نظر طراحی و هم فشرده بودن کد (مثال 3).

مثال 3. شعاع گرد کردن سه پیکسل

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

نتیجه این مثال در شکل نشان داده شده است. 3.

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

چرا آیفون روشن نمی شود: وقتی اپل روشن است و آیفون 4 خاموش و روشن و خاموش می شود چه باید کرد.

نحوه چسباندن شیشه محافظ به گوشی هوشمند نحوه چسباندن شیشه محافظ در آیفون 5

آیا باید شیشه محافظ آیفون را بچسبانم؟

دسته بندی ها:

• برنامه ها
• ایمنی
• ویندوز 10
• اهن
• ویندوز 8
• در تماس با
• اشتباهات

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