Зертханалық жұмыс: Макет стильдерін верстка
Мақсаты: Веб-беттің макетін стильдеу үшін CSS қасиеттерін қолдануды үйрену, соның ішінде мәтін, блоктар, түстер, көлеңкелер және адаптивтілікпен жұмыс істеу.
Бағалау критерийлері:
- Макет элементтерін стильдеу үшін CSS қасиеттерін қолдана біледі.
- Ұқыпты верстка жасайды және стиль береді.
- Адаптивті верстка қағидаларын қолданады.
Жұмыс барысы:
1. Дайындық кезеңі
- Макетті стильдеу үшін қажетті CSS қасиеттерімен танысыңыз:
- Мәтін: color, font-size, font-family, text-align.
- Фон: background-color, background-image, background-size.
- Шекаралар мен көлеңкелер: border, border-radius, box-shadow.
- Өлшемдер мен орналасу: width, height, display, flexbox.
- Анимация: transition, transform.
- Кодты тексеру және жөндеу үшін Chrome DevTools қолданыңыз.
2. HTML құжатын жасау
<!DOCTYPE html><html lang=»en»><head> <meta charset=»UTF-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> <title>Макет стильдерін верстка</title> <link rel=»stylesheet» href=»styles.css»></head><body> <header> <h1>Менің макетім</h1> <nav> <ul> <li><a href=»#about»>Жоба туралы</a></li> <li><a href=»#services»>Қызметтер</a></li> <li><a href=»#contact»>Байланыс</a></li> </ul> </nav> </header> <main> <section id=»about» class=»content»> <h2>Жоба туралы</h2> <p>Бұл макет элементтерді стильдеу үшін CSS қолдануды көрсетеді.</p> </section> <section id=»services» class=»content»> <h2>Біздің қызметтер</h2> <div class=»service»> <h3>Қызмет 1</h3> <p>Қызмет 1 сипаттамасы.</p> </div> <div class=»service»> <h3>Қызмет 2</h3> <p>Қызмет 2 сипаттамасы.</p> </div> </section> </main> <footer> <p>© 2024 Барлық құқықтар қорғалған.</p> </footer></body></html>
3. CSS файлын жасау
- Базалық стильдер:
body { font-family: Arial, sans-serif; background-color: #f8f9fa; color: #333; margin: 0; padding: 0;}
- Заголовок пен навигация үшін стильдер:
header { background-color: #4CAF50; color: white; padding: 10px 20px; text-align: center;} nav ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 15px;} nav ul li { display: inline;} nav ul li a { color: white; text-decoration: none; font-weight: bold;} nav ul li a:hover { text-decoration: underline;}
- Негізгі контент үшін стильдер:
.content { padding: 20px; margin: 20px auto; max-width: 800px; background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);} .service { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;}
- Футерге арналған стильдер:
footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: fixed; bottom: 0; width: 100%;}
4. Адаптивтілік қосу
@media (max-width: 768px) { nav ul { flex-direction: column; } .content { padding: 10px; }}
5. Тексеру және сынау
- HTML файлын сақтап, браузерде ашыңыз.
- Стильдердің әртүрлі құрылғыларда дұрыс көрсетіліп тұрғанын тексеріңіз немесе DevTools қолданыңыз.
