الگو:فهرست: تفاوت میان نسخه‌ها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<!DOCTYPE html> | |||
<html lang="fa"> | <html lang="fa"> | ||
<head> | <head> | ||
| خط ۱۵: | خط ۱۶: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | justify-content: space-between; /* ایجاد فاصله مساوی بین عناصر */ | ||
background-color: #2c3e50; /* رنگ | background-color: #2c3e50; /* رنگ پس‌زمینه هدر */ | ||
padding: 10px 20px; | padding: 10px 20px; | ||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | ||
| خط ۲۳: | خط ۲۴: | ||
font-size: 24px; | font-size: 24px; | ||
font-weight: bold; | font-weight: bold; | ||
color: #ffffff; /* رنگ | color: #ffffff; /* رنگ متن در هدر */ | ||
} | } | ||
.header .menu { | .header .menu { | ||
| خط ۲۹: | خط ۳۰: | ||
align-items: center; | align-items: center; | ||
gap: 20px; | gap: 20px; | ||
justify-content: center; /* منوهای میانی را در وسط قرار می‌دهد */ | |||
flex-grow: 1; /* اجازه می‌دهد تا فضا را پر کنند */ | |||
} | } | ||
.header .menu a { | .header .menu a { | ||
text-decoration: none; | text-decoration: none; | ||
color: #ffffff; /* رنگ | color: #ffffff; /* رنگ لینک‌ها */ | ||
font-weight: bold; | font-weight: bold; | ||
padding: 5px 10px; | padding: 5px 10px; | ||
} | } | ||
.dropdown { | .dropdown { | ||
| خط ۴۸: | خط ۴۷: | ||
top: 100%; | top: 100%; | ||
right: 0; | right: 0; | ||
background-color: #34495e; /* رنگ | background-color: #34495e; /* رنگ پس‌زمینه منوهای کشویی */ | ||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | ||
border-radius: 4px; | border-radius: 4px; | ||
| خط ۵۹: | خط ۵۸: | ||
padding: 10px; | padding: 10px; | ||
text-decoration: none; | text-decoration: none; | ||
color: #ffffff; /* رنگ | color: #ffffff; /* رنگ متن لینک‌های کشویی */ | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
.dropdown-content a:hover { | .dropdown-content a:hover { | ||
background-color: #1abc9c; /* رنگ | background-color: #1abc9c; /* رنگ هنگام هاور شدن لینک‌ها */ | ||
} | } | ||
.dropdown:hover .dropdown-content { | .dropdown:hover .dropdown-content { | ||
| خط ۷۰: | خط ۶۹: | ||
.dropdown-title { | .dropdown-title { | ||
color: #ffffff; | color: #ffffff; | ||
background-color: #007BFF; /* رنگ | background-color: #007BFF; /* رنگ عنوان زیرمنوها */ | ||
padding: 8px 10px; | padding: 8px 10px; | ||
text-align: center; | text-align: center; | ||
font-weight: bold; | font-weight: bold; | ||
} | |||
/* تغییر رنگ هنگام هاور بر روی لینک‌های منو */ | |||
.header .menu a:hover { | |||
background-color: #1abc9c; /* رنگ هنگام هاور شدن لینک‌ها */ | |||
} | |||
.header .menu .active { | |||
color: #1abc9c; /* تغییر رنگ برای منو فعال */ | |||
} | } | ||
</style> | </style> | ||
| خط ۸۲: | خط ۹۰: | ||
<div class="logo">تحلیل روز</div> | <div class="logo">تحلیل روز</div> | ||
<div class="menu"> | <div class="menu"> | ||
<a href="#"> | <a href="#">فارکس ارزها</a> | ||
<a href="#">فارکس کالاها</a> | |||
<a href="#">ارز دیجیتال</a> | |||
<a href="#">بازار داخلی</a> | |||
</div> | </div> | ||
<div class="logo">آرشیو تحلیل‌ها</div> | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
نسخهٔ ۱۵ نوامبر ۲۰۲۴، ساعت ۱۳:۲۱
<!DOCTYPE html>
تحلیل روز
آرشیو تحلیل‌ها