Различия

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

--- software:development:demo:cms:ucms:examples:examples_navbar_fixed_menu [2026/04/16 14:41] – [1.0. Фиксированное верхнее меню] VladPolskiy
+++ software:development:demo:cms:ucms:examples:examples_navbar_fixed_menu [2026/04/16 14:42] (текущий) – [index.html] VladPolskiy
@@ Строка 2: / Строка 2: @@
 <note shadow>
 <html>
-<iframe height="350" width="500" scrolling="yes" title="Untitled" src="./demo_ucms/css_fixed_menu/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="350" width="550" scrolling="yes" title="Untitled" src="./demo_ucms/css_fixed_menu/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 </iframe>
 </html>
@@ Строка 28: / Строка 28: @@
     <link rel="stylesheet" href="css/style.css">
 	<!-- блок стилей css -->
-<style>
+	<style>
-</style>
+	</style>
-  </head>
+	  </head>
-  <body>
+	  <body>
     <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
     <header>
     </header>
+	<div class="navbar">
+	<a href="#home">Главная</a>
+	<a href="#news">Новости</a>
+	<a href="#contact">Контакты</a>
+	</div>
+	<div class="main">
+	<h1>Фиксированное верхнее меню</h1>
+	<h2>Прокрутите эту страницу, чтобы увидеть эффект</h2>
+	<h2>Панель навигации останется вверху страницы во время прокрутки</h2>
+	<p>Классический текст Lorem Ipsum, используемый с XVI века
+	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+	non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+	<p>
+	"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+	doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+	veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+	voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
+	magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+	qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+	numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+	voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+	suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
+	eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+	consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
+	</div>
     <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
     <footer>
@@ Строка 41: / Строка 73: @@
     <!-- Optional: Link to a JavaScript file -->
     <script>
 	</script>
   </body>