2019 September 20 - جمعه 29 شهرويور 1398
آموزش Css3 – قسمت دهم – Multiple Columns
کد خبر: ١٩٤٠ تاریخ انتشار: ١٧ بهمن ١٣٩١ - ١٩:٢١ تعداد بازدید: 1359
آموزش Css3 – قسمت دهم – Multiple Columns

سلام
امروز راجع به قابلیت درج مطالب چند ستونی مثل یک روزنامه در صفحات وب برای شما می گویم.
در این مقاله راجع به خاصیتهای
column-count
column-gap
column-rule برای شما می نویسم.

سلام

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

در این مقاله راجع به خاصیتهای

column-count

column-gap

column-rule برای شما می نویسم.

پشتیبانی مرورگرها

مرورگر IE از هیچکدام از خاصیتها پشتیبانی نمی کند.

مرورگر Firefox با پیشوند -moz-. پشتیبانی می کند.

مرورگر Safari و Chrome با پیشوند -webkit- پشتیبانی می کند.

ایجاد چند ستون با Css3

خاصیت column-count تعداد ستونها در صفحه را تعیین می کند.

مثال ۱ :

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

در مثال بالا به ۳ ستون تقسیم شده است.

تعیین فاصله بین ستونها در Css3

خاصیت column-gap فاصله بین ستونها در صفحه را تعیین می کند.

مثال ۲ :

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

در مثال بالا فاصله بین ستونها ۴۰ پیکسل تعریف شده است.

ظاهر ستونها در Css3

با استفاده از خاصیت column-rule ما میتوانیم ضخامت , رنگ و نوع ستونها را مشخص کنیم.

مثال ۳ :

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

در مثال بالا ضخامت ۳ پیکسل و نوع outset و رنگ ff00ff تعریف شده است.

موفق باشید




Share
* نام:
ایمیل:
* نظر:

آخرین مطالب


صفحه اصلی | تماس با ما | درباره ما | آرشیو | پیوندها | RSS
طراحی و تولید: مؤسسه احرار اندیشه