CSS Website Layout
✅ **۱. ساختار HTML (بدنه وب‌سایت)**
“`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>
<header>
<h1>وب‌سایت من</h1>
</header>
<nav>
<ul>
<li><a href=“#”>خانه</a></li>
<li><a href=“#”>درباره ما</a></li>
<li><a href=“#”>خدمات</a></li>
<li><a href=“#”>تماس با ما</a></li>
</ul>
</nav>
<div class=“container”>
<main>
<h2>خوش آمدید</h2>
<p>این بخش اصلی محتوای سایت است.</p>
</main>
<aside>
<h3>نوار کناری</h3>
<p>محتوا یا لینک‌های اضافی در اینجا قرار می‌گیرد.</p>
</aside>
</div>
<footer>
<p>© ۲۰۲۵ وب‌سایت من</p>
</footer>
</body>
</html>
“`
—
✅ **۲. استایل CSS (فایل styles.css)**
“`css
/* ریست کردن برخی استایل‌های پیش‌فرض مرورگر */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background: #f4f4f4;
}
/* سربرگ */
header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
/* منوی ناوبری */
nav {
background: #444;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 14px 10px;
display: block;
}
nav ul li a:hover {
background: #555;
}
/* بخش‌بندی اصلی صفحه */
.container {
display: flex;
padding: 20px;
gap: 20px;
}
/* بخش اصلی محتوا */
main {
flex: 3;
background: white;
padding: 20px;
}
/* نوار کناری */
aside {
flex: 1;
background: #eee;
padding: 20px;
}
/* پاصفحه */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
margin-top: 20px;
}
“`
—
✅ **۳. واکنش‌گرایی (Responsive) — اختیاری**
اگر می‌خواهید سایت شما در موبایل و تبلت هم خوب نمایش داده شود، این کد را به آخر فایل CSS اضافه کنید:
“`css
@media (max-width: 768px) {
.container {
flex-direction: column;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin: 10px 0;
}
}
“`
دیدگاهتان را بنویسید