Sandbox 沙盒

This is a page 這是一張紙

Test

如何插入程式碼區塊,並即時預覽:Toolbar 第三行,點擊「插入程式碼範例模板」按鈕

HTML

<p>hello sandbox</p>

CSS

p {
  color: blue;
}

JavaScript

var p = document.querySelector('p');
p.addEventListener('mouseover', function(e) {
  p.style.color = 'green';
})
p.addEventListener('mouseout', function(e) {
  p.style.color = 'blue';
})

結果

其他

CSS Content

@ Compteur de style fisheye {
  système: cyclique;
  symboles: ◉;
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

}

.liste {
    list-style: fisheye, cercle;
}

Hello World

HTML

<p>Hello World</p>

Linux logo

logo couleur MDN (bleu)

Des trucs

Une note 

Un avertissement dans une note

Une note dans un avertissement dans une note

une autre note

Une note dans une note

This is an example of how to use the MDN!

π×1=1×π=2π÷π=π\ Pi \ times 1 = 1 \ times \ pi = 2 \ pi \ div \ pi = \ pi

ππππππ\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}

ππππππ\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}

limjets13e3/XX2X\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, dx

ln(x) dx = x[ln(x) - 1]l\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, d+x

abcdefghijklmnopqrstuvwxyz\alphabet

πest un nombre irrationnel, et cela est le rapport entre la circonférence d'un cercle à son diamètre. Il est communément approchée comme 3,14159.\ pifacts {3}

contenu

Test live sample

HTML Content

<p>Hello World</p>

Result

Focus on a text field

HTML Content

<input type="text" id="myTextField" value="Text field.">
<p></p>
<button type="button" onclick="focusMethod()">Click me to focus on the text field!</button> 

CSS Content

/* Sample CSS Content */

JavaScript Content

focusMethod = function getFocus() {          
  document.getElementById("myTextField").focus();
} 

Result

Focus on a button

HTML Content

<button type="button" id="myButton">Click Me!</button>
<p></p>
<button type="button" onclick="focusMethod()">Click me to focus on the button!</button> 

CSS Content

Sample CSS Content

JavaScript Content

focusMethod = function getFocus() {          
  document.getElementById("myButton").focus();
} 

Result