Следующая версия | Предыдущая версия |
software:development:demo:start [2023/08/17 13:49] – создано vladpolskiy | software:development:demo:start [2024/02/26 21:52] (текущий) – [css 3d flip cart] vladpolskiy |
---|
<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> | |