آنچه در این مقاله می‌خوانید [پنهان‌سازی]

ساخت بنر ثابت در بالای صفحه یکی از روش‌ های رایج طراحی وب است که به شما این امکان را می‌دهد تا پیام یا اعلان مهمی را به بازدیدکنندگان سایت خود نشان دهید. در این مقاله، به نحوه طراحی بنر ثابت با css خواهیم پرداخت.

ساختار HTML

در ابتدا، باید یک ساختار HTML برای بنر خود ایجاد کنیم. در زیر یک مثال ساده برای تعریف بنر ارائه شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.">
    <link rel="stylesheet" href="styles.css">
    <title>بنر ثابت</title>
</head>
<body>
    <div class="banner">
        <p>این یک بنر ثابت در بالای صفحه است.</p>
    </div>
    <div class="content">
        <h1>محتوا اصلی صفحه</h1>
        <p>اینجا محتوای اصلی صفحه قرار می‌گیرد...</p>
    </div>
</body>
</html>

آموزش html css (رایگان)

استایل‌ دهی طراحی بنر ثابت با css

بعد از ایجاد ساختار HTML، باید CSS را برای طراحی بنر ثابت پیاده‌سازی کنیم. در زیر مثال CSS برای استایل‌دهی بنر آورده شده است:

body {
    margin: ;
    font-family: Arial, sans-serif;
}

.banner {
    position: fixed;
    top: ;
    left: ;
    right: ;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 15px;
    z-index: 100; /* برای آنکه بنر بالاتر از سایر محتوا دیده شود */
}

.content {
    margin-top: 60px; /* برای ایجاد فاصله از بنر */
    padding: 20px;
}

توضیحات CSS

  • position: fixed;: این ویژگی باعث می‌شود که بنر در بالای صفحه ثابت بماند و هنگام اسکرول صفحه، در جای خود باقی بماند.

  • top: ;, left: ;, right: ;: این ویژگی‌ها موقعیت بنر را در بالای صفحه قرار می‌دهند و آن را در عرض صفحه بسط می‌دهند.

  • background-color: #4CAF50;: رنگ پس‌زمینه بنر را تعریف می‌کند. می‌توانید این رنگ را به دلخواه تغییر دهید.

  • z-index: 100;: این خصوصیت اطمینان می‌دهد که بنر در بالای سایر محتوا قرار بگیرد.

  • .content: برای ایجاد فاصله بین محتوای اصلی و بنر از margin-top استفاده شده است.

نتیجه‌ گیری

با استفاده از کدهای بالا، می‌توانید به سادگی یک بنر ثابت در بالای صفحه طراحی کنید که اطلاعات مهم را به کاربران نمایش دهد. این تکنیک به بهبود تجربه کاربری کمک می‌کند و توجه بازدیدکنندگان را به اطلاعات کلیدی جلب می‌کند.