Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
2. Box моделът в HTML

Направа на визитка

-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.


Най-важното за добре подредена визитка

За да изглежда една визитка професионално, подравняването и отстоянията са ключови. Списъкът с контакти трябва да бъде структуриран като неподреден списък без bullets, подравнен спрямо снимката и визуално отделен чрез margin. Малките разстояния между елементите правят текста по-четим и ясно разграничават всеки контакт.

Стъпка по стъпка: оформление на секция „Контакти“

  1. Използвайте неподреден списък (ul) за телефон, имейл и адрес.
  2. Премахнете точките чрез list-style: none;.
  3. Добавете външно отстояние на списъка – margin-top: 20px; и margin-left: 20px;, за да се подравни спрямо снимката.
  4. Задайте подходящ цвят на текста (например сив), за по-елегантен вид.
  5. Добавете заглавие с h2 – „Контакти“, премахнете удебеляването и добавете margin: 20px;.
  6. За по-добра четимост добавете отстояние между елементите на списъка с margin: 5px 0;.

Използвани CSS свойства

  • list-style: none; – премахва стандартните bullets от списъка.
  • margin – задава външно отстояние; при запис 5px 0 горе и долу са 5px, ляво и дясно – 0.
  • color – променя цвета на текста.
  • font-weight – контролира удебеляването на текста (например normal).

Ползвайте кратката форма на margin, когато стойностите се повтарят – това прави кода по-чист и четим.