software:development:demo:cms:ucms:appendix:appendix_css:nav:icon_bar_h
Содержание
CSS Панель с иконками
Горизонтальная
- index.html
<html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .icon-bar { width: 100%; /* Полная ширина */ background-color: #555; /* Темно-серый фон */ overflow: auto; /* Переполнение из-за поплавка */ } .icon-bar a { float: left; /* Поплавок одной стороны бок */ text-align: center; /* Выравнивание текста по центру */ width: 20%; /* Равная ширина (5 иконок с шириной 20% каждая = 100%) */ padding: 12px 0; /* Некоторые верхние и нижние отступы */ transition: all 0.3s ease; /* Добавить переход для эффектов наведения */ color: white; /* Белый цвет текста */ font-size: 36px; /* Увеличенный размер шрифта */ } .icon-bar a:hover { background-color: #000; /* Добавить при наведении цвет */ } .active { background-color: #4CAF50; /* Добавить активный/текущий цвет */ } </style> <body> <!-- Добавить библиотеку иконок --> <div class="icon-bar"> <a class="active" href="#"><i class="fa fa-home"></i></a> <a href="#"><i class="fa fa-search"></i></a> <a href="#"><i class="fa fa-envelope"></i></a> <a href="#"><i class="fa fa-globe"></i></a> <a href="#"><i class="fa fa-trash"></i></a> </div> </body> </html>
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/appendix/appendix_css/nav/icon_bar_h.txt · Последнее изменение: — VladPolskiy