حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
همهٔ تمرین‌ها

باکس ثابت

تمرین آسان 1494 visibility link download flag

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

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

پاسخ‌ها 15

<!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 
.fix{
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 200px;
    height: 200px;
    background-color: greenyellow;
    text-align: center;
}
Amirabbas.jafarian HTML & CSS 
.fix{
   pisition: fixed;
   left: 10px;
   bottom: 10px;
}
Shahroozchegini HTML & CSS

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

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

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