software:development:demo:cms:ucms:appendix:appendix_css:nav:icon_bar_v
Содержание
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: 90px; /* Установите определенную ширину */ background-color: #555; /* Темно-серый фон */ } .icon-bar a { display: block; /* Сделайте так, чтобы ссылки располагались друг под другом, а не бок о бок */ text-align: center; /* Выравнивание текста по центру */ padding: 16px; /* Добавить немного отступы */ 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_v.txt · Последнее изменение: — VladPolskiy