Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:appendix:appendix_css:nav:icon_bar_h [2026/04/15 12:03] – создано VladPolskiy
+++ software:development:demo:cms:ucms:appendix:appendix_css:nav:icon_bar_h [2026/04/15 12:07] (текущий) – VladPolskiy
@@ Строка 1: / Строка 1: @@
 ====== CSS Панель с иконками ======
-===== Вертикальная =====
+===== Горизонтальная =====
-<code html index.html>
 <html>
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ Строка 7: / Строка 6: @@
 <style>
 .icon-bar {
-  width: 90px; /* Установите определенную ширину */
+  width: 100%; /* Полная ширина */
   background-color: #555; /* Темно-серый фон */
+  overflow: auto; /* Переполнение из-за поплавка */
 }
 .icon-bar a {
-  display: block; /* Сделайте так, чтобы ссылки располагались друг под другом, а не бок о бок */
+  float: left; /* Поплавок одной стороны бок */
   text-align: center; /* Выравнивание текста по центру */
-  padding: 16px; /* Добавить немного отступы */
+  width: 20%; /* Равная ширина (5 иконок с шириной 20% каждая = 100%) */
+  padding: 12px 0; /* Некоторые верхние и нижние отступы */
   transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
   color: white; /* Белый цвет текста */
@@ Строка 41: / Строка 42: @@
 </body>
 </html>
-</code>
+<code html index.html>
 <html>
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ Строка 48: / Строка 48: @@
 <style>
 .icon-bar {
-  width: 90px; /* Установите определенную ширину */
+  width: 100%; /* Полная ширина */
   background-color: #555; /* Темно-серый фон */
+  overflow: auto; /* Переполнение из-за поплавка */
 }
 .icon-bar a {
-  display: block; /* Сделайте так, чтобы ссылки располагались друг под другом, а не бок о бок */
+  float: left; /* Поплавок одной стороны бок */
   text-align: center; /* Выравнивание текста по центру */
-  padding: 16px; /* Добавить немного отступы */
+  width: 20%; /* Равная ширина (5 иконок с шириной 20% каждая = 100%) */
+  padding: 12px 0; /* Некоторые верхние и нижние отступы */
   transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
   color: white; /* Белый цвет текста */
@@ Строка 82: / Строка 84: @@
 </body>
 </html>
+</code>