software:development:demo:cms:ucms:examples:examples_navbar_fixed_menu
Это старая версия документа!
1.0. Фиксированное верхнее меню
index.html
- index.html
<!doctype html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!-- запрет автоперевода перевода google translate --> <meta name="google" content="notranslate"> <!-- отображение файктической ширины экрана для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample.html</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css" /> <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> <!-- Внешний файл стилей css --> <link rel="stylesheet" href="css/style.css"> <!-- блок стилей css --> <style> </style> </head> <body> <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --> <header> </header> <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --> <footer> <p>©2026 Sample HTML5 Page. All rights reserved.</p> </footer> <!-- Optional: Link to a JavaScript file --> <script> </script> </body> </html>
slyle.css
- style.css
/* Навигационная панель */ .navbar { overflow: hidden; background-color: #333; position: fixed; /* Установите навигационную панель в фиксированное положение */ top: 0; /* Расположите навигационную панель в верхней части страницы */ width: 100%; /* Полная ширина */ } /* Ссылки в панели навигации */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Изменение фона при наведении курсора мыши */ .navbar a:hover { background: #ddd; color: black; } /* Основное содержание */ .main { margin-top: 30px; /* Добавить верхнее поле, чтобы избежать наложения */ }
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/examples/examples_navbar_fixed_menu.1776339723.txt.gz · Последнее изменение: — VladPolskiy