playground
Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
| playground [2025/12/14 12:37] – [про] VladPolskiy | playground [Дата неизвестна] (текущий) – удалено - внешнее изменение (Дата неизвестна) 127.0.0.1 | ||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| - | <note blue> | ||
| - | {{fa> | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | <meta charset=" | ||
| - | <meta name=" | ||
| - | < | ||
| - | < | ||
| - | *, | ||
| - | *::before, | ||
| - | *::after { | ||
| - | box-sizing: border-box; | ||
| - | } | ||
| - | |||
| - | html { | ||
| - | font-family: | ||
| - | line-height: | ||
| - | -webkit-text-size-adjust: | ||
| - | -webkit-tap-highlight-color: | ||
| - | } | ||
| - | |||
| - | body { | ||
| - | margin: 0; | ||
| - | font-family: | ||
| - | font-size: 1rem; | ||
| - | font-weight: | ||
| - | line-height: | ||
| - | color: #212529; | ||
| - | text-align: left; | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | /* social-share */ | ||
| - | .social-share { | ||
| - | background-color: | ||
| - | text-align: center; | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | |||
| - | .social-share__title { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | .social-share__items { | ||
| - | display: inline-block; | ||
| - | } | ||
| - | |||
| - | .social-share__items a { | ||
| - | text-decoration: | ||
| - | color: #1976d2; | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | |||
| - | .social-share__items a:hover { | ||
| - | color: #0d47a1; | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | <div class=" | ||
| - | Блок «Поделиться» для главной страницы ИТ Шеф: | ||
| - | </ | ||
| - | <div class=" | ||
| - | <a href=" | ||
| - | target=" | ||
| - | <a href=" | ||
| - | rel=" | ||
| - | <a href=" | ||
| - | <a href=" | ||
| - | target=" | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | < | ||
| - | <iframe height=" | ||
| - | </ | ||
| - | </ | ||
| - | =====про==== | ||
| - | <code bash index.php> | ||
| - | #!/bin/bash | ||
| - | admin@user-new:/ | ||
| - | Sat 25 Mar 2023 14 12:04:17 PM MSK | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | <meta charset=" | ||
| - | <meta name=" | ||
| - | < | ||
| - | < | ||
| - | *, | ||
| - | *::before, | ||
| - | *::after { | ||
| - | box-sizing: border-box; | ||
| - | } | ||
| - | |||
| - | html { | ||
| - | font-family: | ||
| - | line-height: | ||
| - | -webkit-text-size-adjust: | ||
| - | -webkit-tap-highlight-color: | ||
| - | } | ||
| - | |||
| - | body { | ||
| - | margin: 0; | ||
| - | font-family: | ||
| - | font-size: 1rem; | ||
| - | font-weight: | ||
| - | line-height: | ||
| - | color: #212529; | ||
| - | text-align: left; | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | /* social-share */ | ||
| - | .social-share { | ||
| - | background-color: | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | |||
| - | .social-share__title { | ||
| - | text-align: center; | ||
| - | font-weight: | ||
| - | font-size: .875rem; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | .social-share__items { | ||
| - | display: flex; | ||
| - | justify-content: | ||
| - | list-style: none; | ||
| - | margin-top: 0; | ||
| - | } | ||
| - | |||
| - | .social-share__item { | ||
| - | position: relative; | ||
| - | background-color: | ||
| - | display: block; | ||
| - | -webkit-user-select: | ||
| - | -moz-user-select: | ||
| - | -ms-user-select: | ||
| - | user-select: | ||
| - | transition: background-color .3s ease-in-out; | ||
| - | width: 2.5rem; | ||
| - | height: 2.5rem; | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | border-radius: | ||
| - | } | ||
| - | |||
| - | .social-share__item: | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | .social-share__item:: | ||
| - | content: ""; | ||
| - | position: absolute; | ||
| - | width: 1.2rem; | ||
| - | height: 1.2rem; | ||
| - | left: .65rem; | ||
| - | top: .65rem; | ||
| - | background: transparent no-repeat center center; | ||
| - | background-size: | ||
| - | } | ||
| - | |||
| - | .social-share__item_twitter:: | ||
| - | background-image: | ||
| - | } | ||
| - | |||
| - | .social-share__item_fb:: | ||
| - | background-image: | ||
| - | } | ||
| - | |||
| - | .social-share__item_vk:: | ||
| - | background-image: | ||
| - | } | ||
| - | |||
| - | .social-share__item_telegram:: | ||
| - | background-image: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | |||
| - | < | ||
| - | document.addEventListener(' | ||
| - | const createShareHtml = function(title, | ||
| - | let anchorList = []; | ||
| - | const anchorTemplate = function(item) { | ||
| - | return '<a href="' | ||
| - | } | ||
| - | const wrapperTemplate = function(title, | ||
| - | return '< | ||
| - | } | ||
| - | shareData.forEach(function(item) { | ||
| - | anchorList.push(anchorTemplate(item)); | ||
| - | }) | ||
| - | return wrapperTemplate(title, | ||
| - | } | ||
| - | const $socialShare = document.querySelector(' | ||
| - | if ($socialShare) { | ||
| - | const url = encodeURIComponent(location.protocol + '//' | ||
| - | const title = encodeURIComponent(document.title); | ||
| - | const twitterUserName = ' | ||
| - | const shareData = [ | ||
| - | { | ||
| - | name: ' | ||
| - | title: ' | ||
| - | href: ' | ||
| - | onclick: ' | ||
| - | }, | ||
| - | { | ||
| - | name: ' | ||
| - | title: ' | ||
| - | href: ' | ||
| - | onclick: ' | ||
| - | }, | ||
| - | { | ||
| - | name: ' | ||
| - | title: ' | ||
| - | href: ' | ||
| - | onclick: ' | ||
| - | }, | ||
| - | { | ||
| - | name: ' | ||
| - | title: ' | ||
| - | href: ' | ||
| - | onclick: ' | ||
| - | } | ||
| - | ]; | ||
| - | const $html = createShareHtml(' | ||
| - | $socialShare.innerHTML = $html; | ||
| - | } | ||
| - | }); | ||
| - | </ | ||
| - | |||
| - | |||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | =====exsample===== | ||
| - | {{: | ||
| - | [[issue> | ||
| - | <ff CyrillicGoth> | ||
| - | |||
| - | < | ||
| - | |||
| - | |||
| - | < | ||
| - | body_new { | ||
| - | font-family: | ||
| - | font-size: 1rem; | ||
| - | font-weight: | ||
| - | line-height: | ||
| - | margin: 0; | ||
| - | color: #212529; | ||
| - | background-color: | ||
| - | -webkit-text-size-adjust: | ||
| - | -webkit-tap-highlight-color: | ||
| - | } | ||
| - | |||
| - | .container_new { | ||
| - | margin: 1rem; | ||
| - | padding: 1.5rem; | ||
| - | border: 1px solid #dee2e6; | ||
| - | border-radius: | ||
| - | } | ||
| - | |||
| - | .tab_new { | ||
| - | display: flex; | ||
| - | flex-direction: | ||
| - | } | ||
| - | |||
| - | .tab-nav_new > input[type=" | ||
| - | display: none; | ||
| - | } | ||
| - | |||
| - | .tab-content_new { | ||
| - | display: none; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | # | ||
| - | # | ||
| - | display: block; | ||
| - | } | ||
| - | |||
| - | .tab-nav_new { | ||
| - | display: flex; | ||
| - | flex-wrap: wrap; | ||
| - | border-bottom: | ||
| - | margin-bottom: | ||
| - | order: -1; | ||
| - | } | ||
| - | |||
| - | .tab-nav_new > label { | ||
| - | display: block; | ||
| - | padding: 0.5rem 1rem; | ||
| - | color: #0d6efd; | ||
| - | text-decoration: | ||
| - | background: 0 0; | ||
| - | border: 1px solid transparent; | ||
| - | margin-bottom: | ||
| - | border-top-left-radius: | ||
| - | border-top-right-radius: | ||
| - | -webkit-appearance: | ||
| - | transition: color .15s ease-in-out, | ||
| - | } | ||
| - | |||
| - | .tab-nav_new > input[type=" | ||
| - | color: #000; | ||
| - | background-color: | ||
| - | border-color: | ||
| - | cursor: default; | ||
| - | } | ||
| - | </ | ||
| - | < | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | Содержимое 1... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, | ||
| - | vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum | ||
| - | sapiente ex. | ||
| - | </ | ||
| - | <div class=" | ||
| - | Содержимое 2... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, | ||
| - | vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum | ||
| - | sapiente ex. | ||
| - | </ | ||
| - | <div class=" | ||
| - | Содержимое 3... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, | ||
| - | vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum | ||
| - | sapiente ex. | ||
| - | </ | ||
| - | <div class=" | ||
| - | <input checked id=" | ||
| - | <label for=" | ||
| - | <input id=" | ||
| - | <label for=" | ||
| - | <input id=" | ||
| - | <label for=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | {{rating}} | ||
| - | |||
| - | |||
| - | <note blue> | ||
| - | <wrap left>← [[playground: | ||
| - | <wrap right> | ||
| - | </ | ||
| - | |||
| - | =====exsample===== | ||
| - | |||
| - | < | ||
| - | < | ||
| - | <meta charset=" | ||
| - | <meta content=" | ||
| - | < | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | font-size: 1rem; | ||
| - | font-weight: | ||
| - | line-height: | ||
| - | margin: 0; | ||
| - | color: #212529; | ||
| - | background-color: | ||
| - | -webkit-text-size-adjust: | ||
| - | -webkit-tap-highlight-color: | ||
| - | } | ||
| - | |||
| - | .container_1 { | ||
| - | margin: 1rem; | ||
| - | padding: 1.5rem; | ||
| - | border: 1px solid #dee2e6; | ||
| - | border-radius: | ||
| - | } | ||
| - | |||
| - | .tab { | ||
| - | display: flex; | ||
| - | flex-direction: | ||
| - | } | ||
| - | |||
| - | .tab-nav > input[type=" | ||
| - | display: none; | ||
| - | } | ||
| - | |||
| - | .tab-content { | ||
| - | display: none; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | # | ||
| - | # | ||
| - | display: block; | ||
| - | } | ||
| - | |||
| - | .tab-nav { | ||
| - | display: flex; | ||
| - | flex-wrap: wrap; | ||
| - | border-bottom: | ||
| - | margin-bottom: | ||
| - | order: -1; | ||
| - | } | ||
| - | |||
| - | .tab-nav > label { | ||
| - | display: block; | ||
| - | padding: 0.5rem 1rem; | ||
| - | color: #0d6efd; | ||
| - | text-decoration: | ||
| - | background: 0 0; | ||
| - | border: 1px solid transparent; | ||
| - | margin-bottom: | ||
| - | border-top-left-radius: | ||
| - | border-top-right-radius: | ||
| - | -webkit-appearance: | ||
| - | transition: color .15s ease-in-out, | ||
| - | } | ||
| - | |||
| - | .tab-nav > input[type=" | ||
| - | color: #000; | ||
| - | background-color: | ||
| - | border-color: | ||
| - | cursor: default; | ||
| - | } | ||
| - | </ | ||
| - | < | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | Содержимое 1... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, | ||
| - | vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum | ||
| - | sapiente ex. | ||
| - | </ | ||
| - | <div class=" | ||
| - | Содержимое 2... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, | ||
| - | vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum | ||
| - | sapiente ex. | ||
| - | </ | ||
| - | <div class=" | ||
| - | Содержимое 3... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, | ||
| - | vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum | ||
| - | sapiente ex. | ||
| - | </ | ||
| - | <div class=" | ||
| - | <input checked id=" | ||
| - | <label for=" | ||
| - | <input id=" | ||
| - | <label for=" | ||
| - | <input id=" | ||
| - | <label for=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | ===ао=== | ||
| - | {{ :test.svg |}} | ||
| - | {{icon> | ||
| - | {{fa> | ||
| - | {{fugue> | ||
| - | {{silk> | ||
| - | {{flag> | ||
| - | [[: | ||
| - | [[https:// | ||
playground.1765705078.txt.gz · Последнее изменение: — VladPolskiy