روش‌های ایجاد Layout در طراحی سایت
روش‌های ایجاد Layout در طراحی سایت چیا هستن ؟
تو VSCode چزور باید این کار رو بکنیم ؟
١ پاسخ
۱. روش‌های اصلی ایجاد Layout در طراحی سایت:
1. Flexbox
مناسب برای طراحی‌های یک‌بعدی (افقی یا عمودی)
بسیار پرکاربرد برای چیدمان منوها، دکمه‌ها، فرم‌ها، کارت‌ها و...
.container {
display: flex;
justify-content: space-between;
}
---
2. CSS Grid
مناسب برای چیدمان‌های دوبعدی (سطر و ستون)
برای طراحی ساختار کلی صفحه خیلی قدرتمنده (مثل بخش هدر، سایدبار، محتوا، فوتر)
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
---
3. Positioning (absolute, relative, fixed, sticky)
بیشتر برای قرار دادن دقیق یک عنصر استفاده میشه (مثل منوهای شناور، دکمه‌های ثابت)
---
4. Float (روش قدیمی)
دیگه خیلی استفاده نمی‌شه چون Flex و Grid اومدن جاشو گرفتن، ولی گاهی تو پروژه‌های قدیمی می‌بینی.
---
5. استفاده از Frameworkها (مثل Bootstrap, Tailwind)
این‌ها کلاس‌های آماده دارن برای چیدمان سریع و واکنش‌گرا (responsive)
مثال با Bootstrap:
<div class="row">
<div class="col-4">سمت چپ</div>
<div class="col-8">سمت راست</div>
</div>
---
۲. تو VSCode چطور این کار رو بکنیم؟
گام‌به‌گام ساده:
1. VSCode رو باز کن
2. یک پوشه بساز، مثلا: my-layout-site
3. فایل‌های زیر رو ایجاد کن:
index.html
style.css
---
نمونه کد ساده Layout با Flexbox:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
</body>
</html>
style.css
.container {
display: flex;
justify-content: space-around;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: steelblue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
پاسخ شما
