סידור פריטים
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 73 מתוך 76.
אתגר
קלבואו נתרגל flexbox כדי ליצור סרגל ניווט אופקי פשוט. השתמשו ב-CSS כדי לעצב את התפריט כך שיתאים לעיצוב שבתמונה למטה.
בצעו את השלבים הבאים:
- הגדירו את סרגל הניווט כמכל flex.
- הוסיפו רווח בין הקישורים.
- השתמשו ב-
justify-content: space-aroundכדי לפזר את הקישורים באופן שווה.
- השתמשו ב-
- עצבו את סרגל הניווט.
- הגדירו את צבע הרקע ל-
dark blue. - הוסיפו מעט ריפוד כדי ליצור מרווח סביב הקישורים.
- הגדירו את צבע הרקע ל-
- עצבו את קישורי הניווט.
- בחרו את רכיבי
<a>. - הגדירו את צבע הטקסט ל-
white. - הסירו את הקו התחתון המוגדר כברירת מחדל.
- הגדירו את גודל הגופן ל-
18px. - הוסיפו ריפוד של
8px 15pxלשיפור המרווח.
- בחרו את רכיבי
נסו בעצמכם
<html>
<head>
<title>Arrange Items</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין