Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Решение: Икона име и длъжност
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Как да позиционираме и стилизираме икона, име и длъжност
Ключът в тази задача е правилната комбинация между float и margin, включително отрицателни стойности, за да позиционираме изображението извън контейнера с текста. Така постигаме чисто подравняване, без текстът да преминава под снимката. Използването на краткия синтаксис за отстояния прави кода по-четим и подреден.
Стъпка по стъпка: реализиране на решението
- Задайте изображението да „отплува“ наляво чрез
float: left;, за да може текстът да го обтича. - Използвайте краткия синтаксис на
marginс четири стойности в реда: top, right, bottom, left. - Приложете отрицателен ляв margin (напр. -130px), за да изместите снимката извън текстовия контейнер.
- Добавете ляво отстояние на обвиващия
header(напр. 150px), за да определите началната позиция на съдържанието. - Поставете името в
h1, но премахнете удебеляването сfont-weight: normal;и задайте размер (напр. 40px). - Използвайте
br, за да разделите името на два реда. - Задайте
font-family: Arial;заbodyи определете цвят за длъжността. - Настройте размер на изображението така, че визуално да съвпада с височината на текста.
Използвани CSS свойства и елементи
margin– задава външно отстояние (кратък синтаксис: top, right, bottom, left)float: left;– позиционира елемента вляво и позволява текстът да го обтичаfont-weight– контролира дебелината на шрифтаfont-size– задава размера на текстаfont-family– определя шрифта на страницата
Дискусия към урока
Въпроси
Отговори





