پروژه CSS؛ ساخت هدر و منوی صفحه شخصی با Flexbox

پروژه نهایی رو از بالای صفحه شروع می‌کنیم: یک نام مشخص و یک منوی کوتاه. هدر باید به بازدیدکننده بگه این صفحه متعلق به کیه و راه رسیدن به بخش‌ها کجاست. برای چیدن نام و منو در دو سوی یک ردیف، Flexbox انتخاب روشنیه. منوی داخلی هم یک ظرف جداست و فاصله لینک‌ها رو مستقل مدیریت می‌کنه.

توی مثال، نام کتابخانه و لینک قوانین در دو سوی نوار قرار می‌گیرن. پروژه ما درباره معرفی یک طراح تازه‌کاره و سه لینک داخلی داره. خطای رایج اینه که همه فاصله‌ها رو با چند فاصله متنی یا marginهای متفاوت بسازیم؛ طول نام یا عنوان لینک که عوض بشه تعادل از بین می‌ره. برای ظرف بیرونی space-between و برای منوی داخلی gap به کار ببر. این گام فقط قسمت هدر رو می‌سازه و در سند مستقل اجرا می‌شه. هیچ نیازی به اسکریپت، فونت آنلاین یا فایل مرحله قبل نیست؛ همین HTML آماده نقطه شروع کامل فعالیت توست.

✍️ مثال حل‌شده:

<header class="library"><strong>کتابخانه</strong><nav>قوانین</nav></header>
<style>.library { display:flex; justify-content:space-between; align-items:center; background:#ecfeff; }</style>

حالا نوبت توئه: هدر .site-header با عرض ۵۶۰ پیکسل باید display:flex، justify-content:space-between، align-items:center و background-color:navy داشته باشد. nav داخل هدر هم display:flex و gap:16px بگیرد. سه لینک با مقصدهای #about و #projects و #contact و نام «سارا احمدی» را نگه دار؛ این گام فقط هدر را بررسی می‌کند.

فعالیت شما

هدر .site-header با عرض ۵۶۰ پیکسل باید display:flex، justify-content:space-between، align-items:center و background-color:navy داشته باشد. nav داخل هدر هم display:flex و gap:16px بگیرد. سه لینک با مقصدهای #about و #projects و #contact و نام «سارا احمدی» را نگه دار؛ این گام فقط هدر را بررسی می‌کند.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

<!doctype html> <html lang="fa" dir="rtl"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head> <body> <header class="site-header"><strong>سارا احمدی</strong><nav aria-label="منوی اصلی"><a href="#about">درباره</a><a href="#projects">پروژه‌ها</a><a href="#contact">تماس</a></nav></header> </body> </html>

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box} .site-header{width:560px;color:white;padding:16px;box-sizing:border-box;/* چیدمان و زمینه */}.site-header nav{/* ردیف لینک‌ها */}.site-header a{color:white}

فعالیت شما

مطالعهٔ این گام برای همه آزاد است

کد اولیهٔ فعالیت

ظاهر صفحه (CSS)