چگونه ایجاد شود: ناوبری برش دار

آموزش نحوه استفاده از CSS برای ایجاد ناوبری برش دار.

ناوبری برش دار ایجاد کنید

مرحله اول - اضافه کردن HTML:

<div class="topnav">
  <a href="#home">خانه</a>
  <a href="#news">اخبار</a>
  <a href="#contact">تماس</a>
  <a href="#about" class="split">کمک</a>
</div>

مرحله دوم - اضافه کردن CSS:

/* یک ناوبری با پس‌زمینه سیاه ایجاد کنید */
.topnav {
  رنگ پس‌زمینه: #333;
  پنهان کردن: نه;
}
/* استایل لینک‌های ناوبری را در ناوبری تنظیم کنید */
.topnav a {
  چپ چرخانده;
  رنگ: #f2f2f2;
  ترازبندی متنی: وسط;
  پاداش: 14px 16px;
  زیرخط نداشته باشد;
  اندازه فونت: 17px;
}
/* رنگ لینک را در حالت قرارگیری موشواره تغییر دهید */
.topnav a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}
/* یک لینک (برش) را در داخل ناوبری ایجاد کنید */
.topnav a.split {
  چپ چرخانده;
  رنگ پس‌زمینه: #04AA6D;
  رنگ: سفید;
}

آزمایش شخصی کنید

صفحات مرتبط

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

آموزش‌ها:ناوبری CSS