باکس ثابت

تمرین آسان 1267 visibility link download

با استفاده از CSS کلاس fix را استایل دهی کنید تا بصورت ثابت در گوشه پایین سمت چپ صفحه (با فاصله 10 پیکسل) قرار گیرد و در صورت اسکرول کاربر، موقعیت آن تغییر نکند.

👨‍💻 2 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

reply 11

این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Unun..ali..nunu HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Hadi.jalooli HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Maryam.n HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال CSS ثابت</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <h1>محتوای صفحه</h1>
        <p>این یک متن آزمایشی است. برای مشاهده اثر اسکرول، به پایین صفحه بروید.</p>
        <div style="height: 1500px;"></div> <!-- برای ایجاد فضای اسکرول -->
    </div>
    <div class="fix">
        این یک عنصر ثابت در گوشه پایین سمت چپ است
    </div>
</body>
</html>

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

.content {
    padding: 20px;
}

.fix {
    position: fixed; /* موقعیت ثابت */
    bottom: 10px;    /* فاصله از پایین */
    left: 10px;      /* فاصله از چپ */
    background-color: rgba(0, 0, 0, 0.7); /* رنگ پس‌زمینه با شفافیت */
    color: white;    /* رنگ متن */
    padding: 10px;   /* فاصله داخلی */
    border-radius: 5px; /* گوشه‌های گرد */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* سایه */
}
User 136 HTML & CSS 
.fix {
    position: fixed;
    bottom: 10px;
    left: 10px;
}
Ai HTML & CSS 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>باکس ثابت</title>
    <style>
    .fix {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 5em;
        height: 5em;
        margin: 0;
        padding: 15px;
        text-align: center;
        background: rgb(82, 190, 190);
    }
    </style>
</head>
<body>
    <div class="fix">d</div>
</body>
</html>
F.sarli HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Box</title>
  <style>
    div.fix{
      background-color: aqua;
      position: fixed;
      max-width: 200px;
      height: 100px;
      bottom: 10px;
      left: 10px;
      box-shadow: 0px 6px 7px #000000;
      padding: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align: center;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="fix">Hello,This box wont move!!!</div>

</body>
</html>
Mhrshad.jfri HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <title>MyFiles</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,  initial_scale=1.0">
  <style>
    .fix {
      border: 2px solid red;
      width: 200px;
      height: 70px;
      color:white;
      background-color: black;
      padding: 12px;
      position: fixed;
      bottom: 10px;
      left: 10px;
      background-color: #333;
      color: white;
      padding: 10px;
    }

    .text {
      text-align: right; 
      padding-right: 20px;
      color: rgb(141, 7, 70);
    }

  </style>
  </head>
  <body>
    <div class="fix">Hello!<br>
      Welcom To The This WebSite.
    </div>
    <div class="text">
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
    </div>
  </body>
</html>
Tavan.alizadeh HTML & CSS 
.fix {
    position: fixed; /* موقعیت ثابت */
    bottom: 10px;    /* فاصله 10 پیکسل از پایین */
    left: 10px;      /* فاصله 10 پیکسل از سمت چپ */
    background-color: rgba(0, 0, 0, 0.7); /* پس‌زمینه نیمه شفاف */
    color: white;    /* رنگ متن سفید */
    padding: 10px;   /* padding داخلی */
    border-radius: 5px; /* گوشه‌های گرد */
    z-index: 1000;   /* اطمینان از اینکه در بالای سایر عناصر قرار گیرد */
}
Mma123 HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <style>
      div.fix{
        position:fixed;
        bottom:10px;
        left:10px;
      }
    </style>
  </head>

  <body>
    <div class="fix">Hi Developers In CodeBezan!</div>
<p>Start</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>End</p>
  </body>
</html>
Programmer HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

reply ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن