تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

باکس ثابت

آسان 19/ دانلود 454 بازدید

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

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

5 جواب

.fix {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 5%;
    height: 5vw;
    margin: 0;
    background: black;}
Unun..ali..nunu دانلود HTML & CSS 
<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device.width, initial-scale=1.0">
  <title> باکس موقعیت ثابت</title>
  </head>
  <style>
    .fix {
    width: 200px;
    height: 200px;
    position: fixed; 
    bottom: 10px;   
    left: 10px;      
    background-color: rgba(189, 12, 12, 0.8); 
    padding: 10px;   
    border-radius: 5px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    z-index: 1000;   /
}
  </style>
<body>
  <div class="fix"></div>

</body>
</html>
Hadi.jalooli دانلود HTML & CSS 
<!DOCTYPE html>
<html lang="en";>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport " content="width=device-width,intial-scale=1.0">
        <title>fixed box</title>
        <style> 
.fix{
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 5%;
    height: 5vw;
    margin: 0;
    background: black;

        }
        </style>
    </head>
    <body>
  <div class="fix"></div>
    </body>
</html>
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); /* سایه */
}
کاربر 136 دانلود 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
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

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

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

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن