CSS стилове

Псевдоелемент: след

Този псевдоелемент може да се използва за вмъкване на съдържание след елемент. В следващия пример след всеки елемент се вмъква изображение

стилове

CSS псевдоелементи

Име Описание
: след Добавете съдържание след елемент
: Преди Добавете съдържание преди елемент
: Първа буква Добавя стил към първата буква от текст
: Първа линия Добавя стил към първия ред на текст

24. Навигационна лента

За уебсайта е много важно да има лесна за използване навигационна система. С CSS можете да превърнете скучните HTML менюта в добре изглеждащи ленти за навигация. Навигационната лента всъщност е списък с връзки. В примера ще изградим лента за навигация от стандартен HTML списък.

Сега премахваме маркери, полета и подложки от списъка:

  • list-style-type: няма - премахва маркери; те не се изискват в лентата за навигация
  • Имоти маржове и подплата имат стойност 0, за да премахнат настройките на браузъра по подразбиране

Кодът в следващия пример е стандартният код, използван за изграждане на вертикални или хоризонтални ленти за навигация.

Вертикална навигационна лента

За да изградим вертикална лента за навигация, трябва да стилизираме елементите:

  • дисплей: блок - чрез показване на връзките като блокове, цялата област може да се управлява с мишката, не само текстът и ширината могат да бъдат определени
  • ширина: 60px - блоковите елементи заемат цялата налична ширина, поради което е посочена желаната ширина

Хоризонтална лента за навигация

Можем да създадем лента за навигация по два начина, като използваме елементи в редица или плувка. И двата метода са добри, но ако искате връзките да бъдат с еднакъв размер, трябва да използвате елементи като плувка.

Вградени елементи

Един от начините за изграждане на вертикална лента за навигация е декларирането на елементи от списъка с връзки като елементи в редица:

Обяснения:

  • дисплей: вграден - по подразбиране елементите
  • са блокови елементи. Прекъсванията на редовете преди и след всеки елемент бяха премахнати, за да бъдат показани на същия ред.
  • ако зададете подложката за елементи
  • (и не за), връзките ще се преместят извън елемента. Поради тази причина горната и долната подплата са определени за елемента ul.

елементи плувка

В предишния пример връзките имат различна ширина. Така че всички връзки да имат еднаква ширина, елементите трябва да се декларира като плувка и трябва да се посочи ширината за елементите:

  • плувка: ляво - float се използва за преместване на блоковите елементи един до друг
  • дисплей: блок - чрез показване на връзките като блокови елементи, цялата област (не само текстът) може да се управлява с мишката и може да се определи ширината на всяка област
  • ширина: 60px - тъй като блоковите елементи заемат цялата налична ширина, те не могат да се движат един до друг. Поради тази причина е посочена желаната ширина на връзките.

Примери за менюта:

Пример 1: Хоризонтално меню с три нива

Пример 2: Хоризонтално меню с четири нива