عمودی

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

Navigation Bar عمودی

برای ساخت یک navigation bar عمودی، علامه بر کد صفحه قبل، می‌توانید عناصر <a> درون لیست را استایل دهی کنید:

مثال

li a {
  display: block;
  width: 60px;
}

مشاهدهٔ نتیجه

توضیح مثال:

• display: block; - لینک‌ها را به صورت عناصر block نمایش می‌دهد که موجب می‌شود کل ناحیه لینک (نه فقط متن) قابل کلیک باشد، و به ما اجازه می‌دهد که عرض (به انگلیسی: width) (و padding ,حاشیه، ارتفاع و… را در صورت نیاز) مشخص کنیم

• width: 60px; - عناصر block به صورت پیش‌فرض کل عرض موجود را اشغال می‌کنند. می‌خواهیم عرضی به اندازه 60px را مشخص کنیم

همچنین می‌توانید عرض <ul> را تنظیم کنید، و عرض <a> را حذف کنید، چرا که آنها تمامی عرض موجود را در هنگامی که به صورت عناصر block نمایش داده می‌شوند، اشغال می‌کنند. کد زیر نتیجه ای مشابه نتیجه مثال قبل خواهد داشت:

مثال

 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   width: 60px;
 6 }
 7 
 8 li a {
 9   display: block;
10 }

مشاهدهٔ نتیجه

مثال Navigation Bar عمودی

ساخت یک navigation bar عمومی ساده با پس زمینه خاکستری و تغییر رنگ پس زمینه لینک‌ها هنگامی که کاربر نشانه‌گر موس را روی آنها قرار می‌دهد:

مثال

 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   width: 200px;
 6   background-color: #f1f1f1;
 7 }
 8 
 9 li a {
10   display: block;
11   color: #000;
12   padding: 8px 16px;
13   text-decoration: none;
14 }
15 
16 /* Change the link color on hover */
17 li a:hover {
18   background-color: #555;
19   color: white;
20 }

مشاهدهٔ نتیجه

لینک Navigation فعال/ جاری

یک کلاس "active" به لینک جاری اضافه کنید تا به کاربر اجازه دهید که بداند در کدام صفحه است؟

مثال

1 .active {
2   background-color: #4CAF50;
3   color: white;
4 }

مشاهدهٔ نتیجه

وسط‌چین کردن لینک‌ها و اضافه‌کردن کادرها

text-align:center را به <li> یا <a> اضافه کنید تا لینک‌ها وسط چین شوند.

اضافه‌کردن ویژگی border به <ul> موجب اضافه شدن یک کادر در اطراف navbar می‌شود. همچنین اگر شما می‌خواهید درون navbar هم کادر داشته باشید، ویژگی border-bottom را به تمامی عناصر <li> ، به جز آخری، اضافه کنید:

مثال

 1 ul {
 2   border: 1px solid #555;
 3 }
 4 
 5 li {
 6   text-align: center;
 7   border-bottom: 1px solid #555;
 8 }
 9 
10 li:last-child {
11   border-bottom: none;
12 }

مشاهدهٔ نتیجه

Navbar تمام قد عمودی ثابت

ساخت یک navigation جانبی تمام قد، «چسبیده»:

مثال

 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   width: 25%;
 6   background-color: #f1f1f1;
 7   height: 100%; /* Full height */
 8   position: fixed; /* Make it stick, even on scroll */
 9   overflow: auto; /* Enable scrolling if the sidenav has too much content */
10 }

مشاهدهٔ نتیجه

نکته: این مثال بر روی دستگاه‌های موبایلی ممکن است کار نکند.

صفحهٔ بعد»

«صفحهٔ قبل