Front-End
تمرین جدید
HTML & CSS
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
JavaScript - جاوا اسکریپت
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
.fix {
position: fixed;
bottom: 10px;
left: 10px;
width: 5%;
height: 5vw;
margin: 0;
background: black;}
<!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>
<!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>
<!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); /* سایه */
}
.fix {
position: fixed;
bottom: 10px;
left: 10px;
}
<!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>
<!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>
.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; /* اطمینان از اینکه در بالای سایر عناصر قرار گیرد */
}
<!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>
.fix{
pisition: fixed;
left: 10px;
bottom: 10px;
}
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام