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

آموزش نحوه استفاده از 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 {
  float: left;
  رنگ: #f2f2f2;
  ترازبندی متن: وسط;
  پاداش: 14px 16px;
  نمایش متن: none;
  اندازه فونت: 17px;
}
/* تغییر رنگ لینک‌ها در حالت قرارگیری موشواره */
.topnav a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}
/* در داخل ناوبری ایجاد یک لینک (برش) راست‌چین */
.topnav a.split {
  float: right;
  رنگ پس‌زمینه: #04AA6D;
  رنگ: سفید;
}

亲自试一试

相关页面

تعلیمات:کیس میں کیس: جوابی آپریشن کا آپریشن

تعلیمات:CSS ناویگیشن بار