Песочница — различия между версиями

Материал из IOC
Перейти к: навигация, поиск
 
(не показаны 23 промежуточные версии этого же участника)
Строка 1: Строка 1:
__NOTOC__
 
[[Файл:Header_fairy_tale.jpg|center]]
 
  
{| style="width: 100%; align: top; background-color:#ffffff; border: 0px solid #ffffff;" 
+
[[странная страница]]
|-style="vertical-align:top;"
+
<big>'''Заливка градиентом'''</big>
| rowspan="4"|[[Файл:Hill fairy tale.jpg|170px|left]]|| <style="width: 100%; background-color:#FFFfff; border: 2px solid #ffffff; vertical-align: top; height: 60px;"> |
 
  
==<font color="006699">[[Правила сетевой сказочной викторины|Правила сетевой сказочной викторины]]</font>==
+
<div style="{{Градиент|left|#ffdddd, #ddddff}}">Как залить абзац градиентом. копируем код (линейный градиент, цвета можно выбрать любые): <nowiki> <div style="{{Градиент|left|#ffdddd, #ddddff}}"> Ваш текст </div> </nowiki></div>
 +
<big>'''Пины'''</big>
  
==<font color="https://cloud.mail.ru/public/CULD/vd8HmcQef">[[Участники викторины по серии книг "Сказочные герои" |Участники викторины]]</font>==
+
Хотите создать красивый список? Вставить "галочки" или большие буквы и символы? Не знаете как? Вам сюда!:)
  
||
+
1. Разноцветные пины (цветные кнопки)
==<font color="006699">[[Опрос для детей]]</font>==
+
<br>вставляете следующий код:
==<font color="006699">[[Опрос для родителей]]</font>==
 
|
 
| rowspan="4"| [[Файл:Rock_fairy_tale.jpg|170px|right]]
 
|-style="vertical-align:top;"
 
| <style="width: 100%; background-color:#FFFfff; border: 2px solid #ffffff;vertical-align: top; height: 60px;">|
 
 
==<font color="006699">Вернисаж </font>==
 
<br>[https://cloud.mail.ru/public/7nrG/i98dQbJj2 Детские рисунки]
 
<br>[https://cloud.mail.ru/public/Dfyi/tv8TKXRYK Детские рисунки]
 
||
 
==<font color="006699">Викторина для 3-4х классов </font>==
 
  
 +
<nowiki><div style="float:left>[[Файл:Pin.png|30px]] Здесь пишите ту информацию, которую хотите структурировать</div></nowiki>
  
[https://cloud.mail.ru/public/HsPW/a58T5uNQF Вопросы викторины]
+
Вместо синей кнопки можно вставить любую другую из списка:
|-style="vertical-align:top;"
+
<br>[[Файл:Pin red.png|30px]] - имя картинки <nowiki>Pin_red.png</nowiki>
<style="width: 33%; background-color:#FFF8DC; border: 2px solid #006699;vertical-align: top; height: 60px;">|
+
<br>[[Файл:Pin.png|30px]] - имя картинки <nowiki>Pin.png</nowiki>
 +
<br>[[Файл:Pink_pin.png|30px]] - имя картинки <nowiki>Pink_pin.png</nowiki>
 +
<br>[[Файл:Green_pin.png|30px]] - имя картинки <nowiki>Green_pin.png</nowiki>
 +
<br>[[Файл:Yellow_pin.png|30px]] - имя картинки <nowiki>Yellow_pin.png</nowiki>
  
==<font color="006699">Презентации</font>==
 
<br>[https://cloud.mail.ru/public/J4ni/D5HoRCDJJ Сказочные герои Яр. обл]
 
<br>[https://cloud.mail.ru/public/7xRM/uyjiGaBxp Сказочная карта России]
 
<br>[https://cloud.mail.ru/public/Mkr5/iooHerh7w Сказочная Россия]
 
<br>[https://cloud.mail.ru/public/5rFg/fp1eMyjvs Сказочное кольцо]
 
<br>[https://cloud.mail.ru/public/3SR9/Zp4ycSvCZ Родина снежинок]
 
||
 
==<font color="006699"> Викторина для 5-7х классов </font>==
 
  
 +
2. Красивые "галочки"
 +
<br>Механизм использования тот же, что и с пинами.
 +
<br>[[Файл:Green_mark.png|30px]] - имя картинки<nowiki>Green_mark.png</nowiki>
  
[https://cloud.mail.ru/public/9FFU/sCyHwCNcE Вопросы викторины]
+
3. Литеры (большие буквы и знаки)
  
|-style="vertical-align:top;"
+
<div style="float: left; text-transform:uppercase; line-height:80%; padding:0px 8px 4px 0px; display: block; color:#800000; font-size: 70px; font-family: Georgia, Times New Roman, Trebuchet MS; "><strong>1</strong></div><br>Вставляете вот такой вот текст:<nowiki><div style="float: left; text-transform:uppercase; line-height:80%; padding:0px 8px 4px 0px; display: block; color:#800000; font-size: 70px; font-family: Georgia, Times New Roman, Trebuchet MS; "><strong>1</strong></div></nowiki>
<style="width: 33%; background-color:#FFF8DC; border: 2px solid #006699;vertical-align: top; height: 60px;">|
+
 
==<font color="006699">Справочник туристических брендов </font>==
+
вместо color:#800000 пишите код любого цвета который нравится (цвета можно взять [https://ru.wikipedia.org/wiki/Википедия:Таблица_цветов тут])
[https://cloud.mail.ru/public/61YB/SSNRrCLRt Справочник]
+
 
||
+
вместо единички "1" пишите любую букву или символ (например: !) и наслаждаетесь результатом :)
==<font color="006699">[[Обмен мнениями "Сказочный переполох"|Обмен мнениями]]</font>==
+
----
 +
 
 +
<big>'''Спойлеры'''</big>
 +
 
 +
''1. Он открыт, но текст можно закрыть''
 +
 
 +
 
 +
<div class="mw-collapsible">
 +
 
 +
Текст, который можно скрыть.
 +
</div>
 +
 
 +
 
 +
''2. Можно увидеть что спрятано''
 +
 
 +
 
 +
<spoiler text="таинственные тайны"> а тут пусто) неожиданно) </spoiler>
 +
 
 +
 
 +
''3. Хитрая табличка''
 +
 
 +
 
 +
{| class="mw-collapsible mw-collapsed wikitable"
 +
! Заголовок || всегда будет виден
 +
|-
 +
| Содержимое || всегда
 +
|-
 +
| будет || скрыто
 
|}
 
|}
  
[[Файл:Book fairy tale.jpg|960px|center]]
+
 
 +
''4. Если охота чтоб спойлер в рамочке и во всю ширину окна''
 +
 
 +
 
 +
<div class="mw-collapsible mw-collapsed"><div class="mw-collapsible-toggle toccolours" style="float:none;text-align:center">'''Показать исходный текст'''</div>
 +
<div class="mw-collapsible-content">
 +
<source lang="html4strict" enclose="div">
 +
Здесь можно писать все, что душе угодно. Правда мелким шрифтом, но я с этим борюсь.
 +
</source></div></div>
 +
 
 +
 
 +
 
 +
Чуток взято отсюда:
 +
https://www.mediawiki.org/wiki/Extension:JSpoiler
 +
----
 +
 
 +
<big>'''Галереи'''</big>
 +
 
 +
Что делать когда нужно вставить много красивых картинок с подписями?
 +
 
 +
Можно сделать так)
 +
 
 +
 
 +
<gallery mode="packed-hover">
 +
Image:Yum sch30 66.jpg|''Подпись картинки''
 +
Image:Yum sch30 66.jpg|''[[Подпись со ссылкой]]''
 +
Image:Yum sch30 66.jpg|''Подпись картинки''
 +
Image:Yum sch30 66.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
</gallery>

Текущая версия на 16:14, 8 марта 2019

странная страница Заливка градиентом

Как залить абзац градиентом. копируем код (линейный градиент, цвета можно выбрать любые): <div style="{{Градиент|left|#ffdddd, #ddddff}}"> Ваш текст </div>

Пины

Хотите создать красивый список? Вставить "галочки" или большие буквы и символы? Не знаете как? Вам сюда!:)

1. Разноцветные пины (цветные кнопки)
вставляете следующий код:

<div style="float:left>[[Файл:Pin.png|30px]] Здесь пишите ту информацию, которую хотите структурировать</div>

Вместо синей кнопки можно вставить любую другую из списка:
Pin red.png - имя картинки Pin_red.png
Pin.png - имя картинки Pin.png
Pink pin.png - имя картинки Pink_pin.png
Green pin.png - имя картинки Green_pin.png
Yellow pin.png - имя картинки Yellow_pin.png


2. Красивые "галочки"
Механизм использования тот же, что и с пинами.
Green mark.png - имя картинкиGreen_mark.png

3. Литеры (большие буквы и знаки)

1

Вставляете вот такой вот текст:<div style="float: left; text-transform:uppercase; line-height:80%; padding:0px 8px 4px 0px; display: block; color:#800000; font-size: 70px; font-family: Georgia, Times New Roman, Trebuchet MS; "><strong>1</strong></div>

вместо color:#800000 пишите код любого цвета который нравится (цвета можно взять тут)

вместо единички "1" пишите любую букву или символ (например: !) и наслаждаетесь результатом :)


Спойлеры

1. Он открыт, но текст можно закрыть


Текст, который можно скрыть.


2. Можно увидеть что спрятано


таинственные тайны


3. Хитрая табличка


Заголовок всегда будет виден
Содержимое всегда
будет скрыто


4. Если охота чтоб спойлер в рамочке и во всю ширину окна


Показать исходный текст
Здесь можно писать все, что душе угодно. Правда мелким шрифтом, но я с этим борюсь.


Чуток взято отсюда: https://www.mediawiki.org/wiki/Extension:JSpoiler


Галереи

Что делать когда нужно вставить много красивых картинок с подписями?

Можно сделать так)