كيفية إنشاء: قائمة إرشادية على الصورة

كيفية إنشاء قائمة إرشادية على الصورة

الخطوة الأولى - إضافة HTML:

إنشاء القائمة الإرشادية:

<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

الخطوة الثانية - إضافة CSS:

تعيين تنسيق القائمة الإرشادية:

.bg-img {
  /* الصورة المستخدمة */
  صورة الخلفية: url("img_nature.jpg");
  أعلى الحد الأدنى: 380 بكسل;
  /* وضع الصورة في وسط وتمددها بشكل مناسب */
  موقع الخلفية: وسط;
  تكرار الخلفية: لا تكرار;
  حجم الخلفية: تغطية الكامل;
  /* يحتاج إلى تحديد موقع القائمة الإرشادية */
  موقع: نسبي;
{}
/* وضع حاوية القائمة الإرشادية داخل الصورة */
.container {
  موقع: مطلق;
  هامش: 20 بكسل;
  عرض: تلقائي;
{}
/* القائمة الإرشادية */
.topnav {
  التمدد: غير مرئي;
  لون الخلفية: #333;
{}
/* روابط القائمة الإرشادية */
.topnav a {
  تحرك: يسار;
  لون النص: #f2f2f2;
  محاذاة النص: وسط;
  حجم الحشوة: 14 بكسل 16 بكسل;
  التنسيق النصي: none;
  حجم النص: 17 بكسل;
{}
.topnav a:hover {
  background-color: #ddd;
  color: black;
{}

جرب بنفسك