worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили:
playground

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
playground [2025/02/07 13:32] – vladpolskiyplayground [2025/07/20 21:08] (текущий) – vladpolskiy
Строка 1: Строка 1:
-<note yellow>желтая заметка</note> +<code bash index.php> 
-ывпыа+#!/bin/bash 
 +admin@user-new:/$ date 
 +Sat 25 Mar 2023 14 12:04:17 PM MSK 
 +</code> 
 +=====exsample===== 
 + 
 +<html> 
 + 
 + 
 +<style> 
 +  body_new { 
 +    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
 +    font-size: 1rem; 
 +    font-weight: 400; 
 +    line-height: 1.5; 
 +    margin: 0; 
 +    color: #212529; 
 +    background-color: #fff; 
 +    -webkit-text-size-adjust: 100%; 
 +    -webkit-tap-highlight-color: transparent; 
 +  } 
 + 
 +  .container_new { 
 +    margin: 1rem; 
 +    padding: 1.5rem; 
 +    border: 1px solid #dee2e6; 
 +    border-radius: 0.375rem; 
 +  } 
 + 
 +  .tab_new { 
 +    display: flex; 
 +    flex-direction: column; 
 +  } 
 + 
 +  .tab-nav_new > input[type="radio"] { 
 +    display: none; 
 +  } 
 + 
 +  .tab-content_new { 
 +    display: none; 
 +  } 
 + 
 +  #content-1:has(~ .tab-nav_new > #tab-btn-1:checked), 
 +  #content-2:has(~ .tab-nav_new > #tab-btn-2:checked), 
 +  #content-3:has(~ .tab-nav_new > #tab-btn-3:checked) { 
 +    display: block; 
 +  } 
 + 
 +  .tab-nav_new { 
 +    display: flex; 
 +    flex-wrap: wrap; 
 +    border-bottom: 1px solid #dee2e6; 
 +    margin-bottom: 1rem; 
 +    order: -1; 
 +  } 
 + 
 +  .tab-nav_new > label { 
 +    display: block; 
 +    padding: 0.5rem 1rem; 
 +    color: #0d6efd; 
 +    text-decoration: none; 
 +    background: 0 0; 
 +    border: 1px solid transparent; 
 +    margin-bottom: -1px; 
 +    border-top-left-radius: 0.375rem; 
 +    border-top-right-radius: 0.375rem; 
 +    -webkit-appearance: button; 
 +    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; 
 +  } 
 + 
 +  .tab-nav_new > input[type="radio"]:checked + label { 
 +    color: #000; 
 +    background-color: #fff; 
 +    border-color: #dee2e6 #dee2e6 #fff; 
 +    cursor: default; 
 +  } 
 +</style> 
 +<body_new> 
 +<div class="container1_new"> 
 +  <div class="tab_new"> 
 +    <div class="tab-content_new" id="content-1"> 
 +      Содержимое 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> 
 +    <div class="tab-content_new" id="content-2"> 
 +      Содержимое 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> 
 +    <div class="tab-content_new" id="content-3"> 
 +      Содержимое 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> 
 +    <div class="tab-nav_new"> 
 +      <input checked id="tab-btn-1" name="tab-btn" type="radio" value=""> 
 +      <label for="tab-btn-1">Вкладка 1</label> 
 +      <input id="tab-btn-2" name="tab-btn" type="radio" value=""> 
 +      <label for="tab-btn-2">Вкладка 2</label> 
 +      <input id="tab-btn-3" name="tab-btn" type="radio" value=""> 
 +      <label for="tab-btn-3">Вкладка 3</label> 
 +    </div> 
 +  </div> 
 +</div> 
 +</body_new> 
 + 
 +</html> 
 {{rating}} {{rating}}
-{{rating|startdate=2014-07-01}} + 
-{{rating|lang=en}} + 
-{{rating|startdate=2014-07-01,lang=en}}+<note blue> 
 +<wrap left>← [[playground:playground|playground]]</wrap>  
 +<wrap right>[[playground:playground|playground]] →</wrap> 
 +</note> 
 + 
 +=====exsample===== 
 + 
 +<html> 
 +<head> 
 +  <meta charset="utf-8"> 
 +  <meta content="width=device-width, initial-scale=1" name="viewport"> 
 +  <title>Вкладки на CSS с использованием радиокнопок и :checked – 05</title> 
 +</head> 
 + 
 +<style> 
 +  body { 
 +    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
 +    font-size: 1rem; 
 +    font-weight: 400; 
 +    line-height: 1.5; 
 +    margin: 0; 
 +    color: #212529; 
 +    background-color: #fff; 
 +    -webkit-text-size-adjust: 100%; 
 +    -webkit-tap-highlight-color: transparent; 
 +  } 
 + 
 +  .container_1 { 
 +    margin: 1rem; 
 +    padding: 1.5rem; 
 +    border: 1px solid #dee2e6; 
 +    border-radius: 0.375rem; 
 +  } 
 + 
 +  .tab { 
 +    display: flex; 
 +    flex-direction: column; 
 +  } 
 + 
 +  .tab-nav > input[type="radio"] { 
 +    display: none; 
 +  } 
 + 
 +  .tab-content { 
 +    display: none; 
 +  } 
 + 
 +  #content-1:has(~ .tab-nav > #tab-btn-1:checked), 
 +  #content-2:has(~ .tab-nav > #tab-btn-2:checked), 
 +  #content-3:has(~ .tab-nav > #tab-btn-3:checked) { 
 +    display: block; 
 +  } 
 + 
 +  .tab-nav { 
 +    display: flex; 
 +    flex-wrap: wrap; 
 +    border-bottom: 1px solid #dee2e6; 
 +    margin-bottom: 1rem; 
 +    order: -1; 
 +  } 
 + 
 +  .tab-nav > label { 
 +    display: block; 
 +    padding: 0.5rem 1rem; 
 +    color: #0d6efd; 
 +    text-decoration: none; 
 +    background: 0 0; 
 +    border: 1px solid transparent; 
 +    margin-bottom: -1px; 
 +    border-top-left-radius: 0.375rem; 
 +    border-top-right-radius: 0.375rem; 
 +    -webkit-appearance: button; 
 +    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; 
 +  } 
 + 
 +  .tab-nav > input[type="radio"]:checked + label { 
 +    color: #000; 
 +    background-color: #fff; 
 +    border-color: #dee2e6 #dee2e6 #fff; 
 +    cursor: default; 
 +  } 
 +</style> 
 +<body> 
 +<div class="container_1"> 
 +  <div class="tab"> 
 +    <div class="tab-content" id="content-1"> 
 +      Содержимое 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> 
 +    <div class="tab-content" id="content-2"> 
 +      Содержимое 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> 
 +    <div class="tab-content" id="content-3"> 
 +      Содержимое 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> 
 +    <div class="tab-nav"> 
 +      <input checked id="tab-btn-1" name="tab-btn" type="radio" value=""> 
 +      <label for="tab-btn-1">Вкладка 1</label> 
 +      <input id="tab-btn-2" name="tab-btn" type="radio" value=""> 
 +      <label for="tab-btn-2">Вкладка 2</label> 
 +      <input id="tab-btn-3" name="tab-btn" type="radio" value=""> 
 +      <label for="tab-btn-3">Вкладка 3</label> 
 +    </div> 
 +  </div> 
 +</div> 
 +</body> 
 + 
 +</html>
playground.1738924375.txt.gz · Последнее изменение: 2025/02/07 13:32 — vladpolskiy