چگونه ایجاد کنیم: نواری ناوبری CSS

چگونه نواری ناوبری ایجاد کنیم

نواری ناوبری لینک‌های هر صفحه‌ای که کاربر قبلاً به آن‌ها دسترسی داشته است را ارائه می‌دهد و موقعیت فعلی کاربر در وب‌سایت را نشان می‌دهد.

ابتدا - HTML اضافه کنید:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

دوماً - CSS اضافه کنید:

/* سبک لیست تنظیم می‌شود */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
/* آیتم‌های لیست به صورت عمودی نمایش داده می‌شوند */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
/* علامت افقی (/) در هر آیتم لیست اضافه می‌شود */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
/* رنگ برای تمامی لینک‌های لیست اضافه می‌شود */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
/* رنگ موس کاری اضافه می شود */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

آپ خود چربا سنجار کریں

مربوط پیج

تدریس:کریپٹو گرافک پیج