Различия

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

--- software:development:demo:responsive_site_layout_book [2024/03/08 21:00] – [Адаптивная вёрстка сайта книга (теория и практика)] vladpolskiy
+++ software:development:demo:responsive_site_layout_book [2024/03/08 21:19] (текущий) – [13. Код скрипта для мобильного меню] vladpolskiy
@@ Строка 40: / Строка 40: @@
 Добавим в блок %%<head>%% (голова) запись кода приведенного ниже и открыв **"Пояснительную записку блока <head>:"** разберем данный код:
 <code html HTML>
-<!--начало веб страницы-->
+<!doctype html>
-<!DOCTYPE html>
 <html>
-<!--начало блока метаданных веб страницы-->
+  <head>
-<head>
+    <meta charset="utf-8" />
-  <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>book</title>
-  <title>Responsive site layout</title>
+    <link
-  <link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon">
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
-  <!-- our project just needs Font Awesome Solid + Brands -->
+      rel="stylesheet"
-  <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">
+      type="text/css" />
-  <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/book.css" />
-  <link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
-  <script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>
+    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
-  <script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script>
+    <!--[if lt IE 9]>
-</head>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-<!--конец блока метаданных веб страницы-->
+    <![endif]-->
+  </head>
+  <body>
+    <!-- это просто меню с картинками вместо текста -->
+    <div class="cont">
+      <div class="text"><img src="images/text.png" ></div>
+        <div class="content"><img src="images/top.jpg" >
+        <div class="image-php"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:php:php_setting"><img src="images/php.png" alt="regular pyramid built from four equilateral triangles"></a></div>
+        <div class="image-mysql"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/mysql.jpg" ></a></div>
+        <div class="image-html5"><a href="https://book51.ru/doku.php?id=software:development:web:docs:web:html:attributes"><img src="images/html5.jpg" ></a></div>
+        <div class="image-css"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/css.jpg" ></a></div>
+        <div class="image-js"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/js.jpg" ></a></div>
+      </div>
+    </div>
+  </body>
+</html>
 </code>
@@ Строка 77: / Строка 91: @@
-====2. Блок header====
-В блок заголовка <header> запишем следующие элементы блоков (контейнеров): логотип, кнопки меню и поиска по сайту, и открыв "Пояснительную записку блока <header>" разберем данный код:
-<code html HTML>
-<header>
-<!--начало блока логотип/меню веб страницы-->
-    <nav class="container">
-      <a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a>
-      <div class="nav-toggle"><span></span></div>
-      <form action="" method="get" id="searchform">
-        <input type="text" placeholder="search...">
-        <button type="submit"><i class="fa fa-search"></i></button>
-      </form>
-      <ul id="menu">
-        <li><a href="">Features</a></li>
-        <li><a href="">Download</a></li>
-        <li><a href="">Support</a></li>
-      </ul>
-    </nav>
-<!--конец блока логотип/меню веб страницы-->
-</header>
-</code>
-#:Пояснительную записку блока <header>
-  - **%%<header>%%** <color #22b14c>- открывающий тег блока.</color>
-  - **%%<nav class="container">%%** <color #22b14c>- начало нашего блока колонтитула.</color>
-  - **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** <color #22b14c>- блок логотипа с указанием месторасположения иконки.</color>
-  - **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** <color #22b14c>- блок кнопки показа/скрытия главного меню.</color>
-  - **%%<form action="" method="get" id="searchform">%%** <color #22b14c>- начало блока формы поиска</color>.
-  - **%%<input type="text" placeholder="search...">%%** <color #22b14c>- форма ввода текста поиска.</color>
-  - **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** <color #22b14c>- кнопка-иконка поиска по сайту.</color>
-  - **%%</form>%%** <color #22b14c>- закрывающий тег формы поиска.</color>
-  - **%%<ul id="menu">%%** <color #22b14c>- блок главного меню.</color>
-  - **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Features".</color>
-  - **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Download".</color>
-  - **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Support".</color>
-  - **%%</ul>%%** <color #22b14c>- конец блок главного меню.</color>
-  - **%%</nav>%%** <color #22b14c>- конец нашего блока колонтитула.</color>
-  - **%%</header>%%** <color #22b14c>- закрывающий тег блока.</color>
-:#
 ====3. Блок main ====
 В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код:
@@ Строка 286: / Строка 262: @@
   - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color>
 :#
-====5. Блок <footer>====
-В подвале страницы разместим информацию о копирайте и открыв "Пояснительную записку блока <footer>" разберем данный код:
-<code html HTML>
-<!--начало контейнера подвал веб страницы-->
-<footer>
-    <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>
-</footer>
-<!--конец контейнера подвал веб страницы-->
-</body>
-</html>
-<!--конец веб страницы-->
-</code>
-#:Пояснительная записка блока <footer>:
-  - **%%<footer>%%** <color #22b14c>- начало блока "подвал".</color>
-  - **%%<div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>%%** <color #22b14c>- блок текста копирайта.</color>
-  - **%%</footer>%%** <color #22b14c>- конец блока "подвал".</color>
-  - **%%</body>%%** <color #22b14c>- конец блока хранения содержания веб-страницы (контента).</color>
-  - **%%</html>%%** <color #22b14c>- закрывающий тег, является концам блока (контейнера), который заключает в себе все содержимое веб-страницы.</color>
-:#
 ====6. Общие CSS-стили====
 Все нижеприведенные стили вынесены в один внешний файл CSS.
@@ Строка 554: / Строка 511: @@
 </code>
-====9. Стили блока aside====
-<code css CSS>
-/* правый контейнер */
-aside {
-   width: 33%;/*ширина блока*/
-   float: right;/*элемент выравнивается по правой стороне*/
-}
-/* блок для виджетов */
-.widget {
-   padding: 20px 15px;/* значение полей вокруг содержимого*/
-   background: #dcdcdc;/* цвет блока для виджетов */
-   font-size: 13px;/* размер шрифта элемента */
-   margin-bottom: 30px;/*отступ от нижнего края элемента*/
-   box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */
-}
-.widget-title {
-   font-size: 15px;/* размер шрифта элемента */
-   padding: 10px;/* значение полей вокруг содержимого*/
-   margin-bottom: 10px;/* отступ от рамки блоков */
-   text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
-   border: 2px solid #2f4f4f;/* цвет рамки категорий */
-   box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */
-}
-.widget-category-list li {
-   border-bottom: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока категорий */
-   padding: 8px 0;/* значение полей вокруг содержимого*/
-   color: 	#2f4f4f;/* цвет текста количества постов в категории*/
-   font-style: arial; /* шрифт текста наименования постов в категории*/
-}
-.widget-category-list li:last-child {
-   border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/
-}
-.widget-category-list li a {
-   color: 	#2f4f4f;/* цвет текста наименований категорий постов*/
-   margin-right: 20px;/* отступ от текста наименований категорий постов */
-   font-style: normal;/*обычное начертание текста*/
-}
-.widget-category-list li a:before {
-   content: "\f105"; /* стрелки перед текстом наименований категорий постов*/
-   display: inline-block;/*элемент обтекает другими  элементами страницы*/
-   font-family: 'FontAwesome';/*шрифты колекции иконок FontAwesome*/
-   margin-right: 10px;/*отступа от правого края элемента*/
-   color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/
-}
-.widget-posts-list li {
-   border-top: 1.5px solid 	#2f4f4f;/* цвет и размер полос разделителей блока постов */
-   padding: 8px 0;/* значение полей вокруг содержимого*/
-}
-.widget-posts-list li:nth-child(1) {
-   border-top: none;/* цвет и размер полос разделителей блока постов отсутствует*/
-}
-.post-image-small {
-   width: 60%; /*размер - ширина картинки*/
-   float: left;/*положение картинки -элемент выравнивается по левой стороне*/
-   margin-right: 15px;/*отступ от правого края картинки*/
-   box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */
-}
-.widget-post-title {
-   float: left;/*элемент выравнивается по левой стороне*/
-}
-</code>
 ====10. Стили блока footer====
@@ Строка 727: / Строка 622: @@
   - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color>
 :#
-====13. Код скрипта для мобильного меню====
-Данный скрипт работает при ширине окна браузера менее 768px, откройте "Пояснительную записку" для понимания кода скрипта.
-<code javascript JS>
-$('.nav-toggle').on('click', function(){
-  $('#menu').toggleClass('active');
-});
-</code>
-#: Пояснительная записка
-  - **%%$('.nav-toggle').on('click', function(){
-  $('#menu').toggleClass('active');
-});%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color>
-:#
 ====14. Архив файлов примера====
 Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\
 <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\
-{{ :software:development:demo:code.rar |rar arhiv 71,8mb}}
+{{:software:development:demo:book.rar|rar arhiv book 409kb}}