Различия

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

--- software:development:demo:start [2023/08/17 13:49] – создано vladpolskiy
+++ software:development:demo:start [2024/02/26 21:52] (текущий) – [css 3d flip cart] vladpolskiy
@@ Строка 1: / Строка 1: @@
-<nowiki>
+=====968563=====
+<!DOCTYPE HTML>
+<html>
+ <head>
+  <meta charset="utf-8">
+  <title>Тег DIV</title>
+  <style type="text/css">
+   .block1 {
+    width: 200px;
+    background: #ccc;
+    padding: 5px;
+    padding-right: 20px;
+    border: solid 1px black;
+    float: left;
+   }
+   .block2 {
+    width: 200px;
+    background: #fc0;
+    padding: 5px;
+    border: solid 1px black;
+    float: left;
+    position: relative;
+    top: 40px;
+    left: -70px;
+   }
+  </style>
+    <style>
+    p { /* Обычный абзац */
+    text-align: justify; /* Выравнивание текста по ширине */
+    }
+    p.cite { /* Абзац с классом cite */
+    color: navy; /* Синий цвет текста */
+    margin-left: 50px; /* Отступ слева */
+    border-left: 1px solid navy; /* Граница слева от текста */
+    padding-left: 15px; /* Расстояние от линии до текста */
+    }
+  </style>
+ </head>
+ <body>
+  <p>Для искусственного освещения помещения применяются люминесцентные лампы.
+    Они отличаются высокой световой отдачей, продолжительным сроком службы,
+    малой яркостью светящейся поверхности, близким к естественному спектральным
+    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
+  <p class="cite">Для исключения засветки экрана дисплея световыми потоками
+    оконные проемы снабжены светорассеивающими шторами.</p>
+  <div class="block1">Lorem ipsum dolor sit amet, consectetuer
+   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
+   dolore magna aliguam erat volutpat.</div>
+  <div class="block2">Ut wisis enim ad minim veniam, quis nostrud
+   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
+   ea commodo consequat.</div>
+     <p>Для искусственного освещения помещения применяются люминесцентные лампы.
+    Они отличаются высокой световой отдачей, продолжительным сроком службы,
+    малой яркостью светящейся поверхности, близким к естественному спектральным
+    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
+     <p>Для искусственного освещения помещения применяются люминесцентные лампы.
+    Они отличаются высокой световой отдачей, продолжительным сроком службы,
+    малой яркостью светящейся поверхности, близким к естественному спектральным
+    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
+         <p>Для искусственного освещения помещения применяются люминесцентные лампы.
+    Они отличаются высокой световой отдачей, продолжительным сроком службы,
+    малой яркостью светящейся поверхности, близким к естественному спектральным
+    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
+	 </body>
+</html>
+===== Всплывающая подсказка =====
+<code>
+<autott>
+  <content>В этом месте всплывающая подсказка.</content>
+    <title>Это заглавие подсказки.</title>
+    <tip>Это текст подсказки.</tip>
+</autott>
+</code>
+<autott>
+  <content>В этом месте всплывающая подсказка.</content>
+    <title>Это заглавие подсказки.</title>
+    <tip>Это текст подсказки.</tip>
+</autott>
+=====77777=====
+<html>
+<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/index.htm" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/Change animation with JavaScript.htm" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/Slideshow container.htm" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+<iframe height="500" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/Modal Login Form.htm" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+https://html5css.ru/howto/howto_css_login_form.php
+=====8956=====
+The following example
+<phpwikify>
+$tt = 'help';
+echo "  * first bullet\n";
+echo "  * $tt me\n";
+</phpwikify>
+will display
+  * first bullet
+  * help me
+===== Examples/Usage =====
+  * Enclose code snippets using ''%%<Code>%%'' and ''%%</Code>%%'' tag to show it //pretty-printed// in wiki page.
+  * Prettify module makes a best effort to guess the language but works best with C-like and HTML-like languages.
+  * To specify language hint for Prettify, you can use
+    - ''%%<Code:ext>%%'' (file extension, you must put it just after "Code:" keyword)
+    - ''%%<Code lang-ext>%%'' option
+  * For example, use ''%%<Code:css>%%'' or ''%%<Code lang-css>%%'' to specify that the code is Cascading Style Sheets (CSS).
+  * use ''linenums'' or ''nolinenums'' option to turn on/off line numbering. You can add a colon and the number to the end of the option, eg. ''linenums:12'' to specify start line number.
+  * If you want to add title for code block, you can specify it after ''%%|%%'' that will be shown just above the code box.
+<file php>
+<Code:php linenums:1 |Example #1 Our first PHP script: //hello.php//>
+<html>
+  <head>
+  <title>PHP Test</title>
+ </head>
+ <body>
+ <?php echo '<p>Hello World</p>'; ?>
+ </body>
+</html>
+</Code>
+</file>
+{{https://raw.github.com/ssahara/dw-plugin-codeprettify/master/code-prettifier-example.png|Example #1}}
+{{ :software:development:demo:1.svg |}}
+<diagram>
+|  AAA  |-@2|  BBB  |-@a|  EEE   |
+| |:@1| |   | |!@4| |   | |}@72|-|-| GGG |
+|  DDD  |~@8|  CCC  |   |  FFF   |
+</diagram>
+=====89658965896=====
+===== Examples/Usage =====
+~~socialite~~''
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_image_border.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== css rotation animation =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_rotation_animation.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== css 3d flip cart =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_3d_flip_cart.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+[[https://book51.ru/demo/code/3d_flip_cart/index.html|Демо страницы]]
+===== css starry sky animation =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_starry_sky_animation.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== css starry sky animation 2 =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_starry_sky_animation_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== css starry sky animation 2 =====
+<html>
+<iframe height="1800" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/img/Генератор input checkbox CSS _ Style CSS.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== ФОНОВОЕ ИЗОБРАЖЕНИЕ В CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== ЗАТЕМНЕНИЕ ИЗОБРАЖЕНИЯ С ПОМОЩЬЮ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== ИЗОБРАЖЕНИЕ С РАЗМЕРАМИ С ПОМОЩЬЮ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== АДАПТИВНАЯ КАРТИНКА CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_3.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_4.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== РАМКА ВОКРУГ КАРТИНКИ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_5.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== СКРУГЛЕНИЕ УГЛОВ КАРТИНКИ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_6.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== СОТРАЖЕНИЕ КАРТИНКИ ПО ГОРИЗОНТАЛИ И ВНРТИКАЛИ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_7.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== ПОВОРОТ ИЗОБРАЖЕНИЯ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_8.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== КАРТИНКА ССЫЛКА CSS/HTML =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_9.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== ЧЕРНО-БЕЛАЯ КАРТИНКА CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_10.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== КРУГЛОЕ ИЗОБРАЖЕНИЕ CSS =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_11.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+===== ОБТЕКАНИЕ КАРТИНКИ ТЕКСТОМ CSS /HTML =====
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/lessons/css_images_12.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
-</nowiki>