diff options
Diffstat (limited to 'files/zh-cn/web/css')
26 files changed, 182 insertions, 186 deletions
diff --git a/files/zh-cn/web/css/@media/device-height/index.html b/files/zh-cn/web/css/@media/device-height/index.html index 284c9a1b41..20445c8a43 100644 --- a/files/zh-cn/web/css/@media/device-height/index.html +++ b/files/zh-cn/web/css/@media/device-height/index.html @@ -48,5 +48,5 @@ translation_of: Web/CSS/@media/device-height <p>{{Compat("css.at-rules.media.device-height")}}</p> <p> - <audio style="display: none;"> </audio> + <audio class="hidden"> </audio> </p> diff --git a/files/zh-cn/web/css/_colon_checked/index.html b/files/zh-cn/web/css/_colon_checked/index.html index 4a95ab5060..85b7dbe44c 100644 --- a/files/zh-cn/web/css/_colon_checked/index.html +++ b/files/zh-cn/web/css/_colon_checked/index.html @@ -27,7 +27,7 @@ translation_of: 'Web/CSS/:checked' <h3 id="基础示例">基础示例</h3> -<h3 id="Basic_example" style="display: none;">Basic example</h3> +<h3 id="Basic_example" class="hidden">Basic example</h3> <h4 id="HTML">HTML</h4> @@ -86,7 +86,7 @@ option:checked { <h3 id="借用隐藏的checkbox来切换元素的样式（显示隐藏）">借用隐藏的checkbox来切换元素的样式（显示/隐藏）</h3> -<h3 id="Toggling_elements_with_a_hidden_checkbox" style="display: none;">Toggling elements with a hidden checkbox</h3> +<h3 id="Toggling_elements_with_a_hidden_checkbox" class="hidden">Toggling elements with a hidden checkbox</h3> <p>这个例子利用了<code>:checked</code>伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。</p> diff --git a/files/zh-cn/web/css/appearance/index.html b/files/zh-cn/web/css/appearance/index.html index 00980a5dea..bcc7adce7a 100644 --- a/files/zh-cn/web/css/appearance/index.html +++ b/files/zh-cn/web/css/appearance/index.html @@ -52,7 +52,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>none</code></td> <td> - <div id="sampleNone" style="display: none;"> + <div id="sampleNone" class="hidden"> <pre class="brush:css"> div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre> @@ -67,7 +67,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button</code></td> <td> - <div id="sampleButton" style="display: none;"> + <div id="sampleButton" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre> @@ -81,7 +81,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button-arrow-down</code></td> <td> - <div id="sampleButtonArrowDown" style="display: none;"> + <div id="sampleButtonArrowDown" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre> @@ -95,7 +95,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button-arrow-next</code></td> <td> - <div id="sampleButtonArrowNext" style="display: none;"> + <div id="sampleButtonArrowNext" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre> @@ -109,7 +109,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button-arrow-previous</code></td> <td> - <div id="sampleButtonArrowPrevious" style="display: none;"> + <div id="sampleButtonArrowPrevious" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre> @@ -123,7 +123,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button-arrow-up</code></td> <td> - <div id="sampleButtonArrowUp" style="display: none;"> + <div id="sampleButtonArrowUp" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre> @@ -137,7 +137,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button-bevel</code></td> <td> - <div id="sampleButtonBevel" style="display: none;"> + <div id="sampleButtonBevel" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre> @@ -157,7 +157,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>button-focus</code></td> <td> - <div id="sampleButtonFocus" style="display: none;"> + <div id="sampleButtonFocus" class="hidden"> <pre class="brush:css"> div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre> @@ -171,7 +171,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>caret</code></td> <td> - <div id="sampleCaret" style="display: none;"> + <div id="sampleCaret" class="hidden"> <pre class="brush:css"> div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre> @@ -185,7 +185,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>checkbox</code></td> <td> - <div id="sampleCheckbox" style="display: none;"> + <div id="sampleCheckbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre> @@ -199,7 +199,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>checkbox-container</code></td> <td> - <div id="sampleCheckboxContainer" style="display: none;"> + <div id="sampleCheckboxContainer" class="hidden"> <pre class="brush:css"> div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre> @@ -213,7 +213,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>checkbox-label</code></td> <td> - <div id="sampleCheckboxLabel" style="display: none;"> + <div id="sampleCheckboxLabel" class="hidden"> <pre class="brush:css"> div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre> @@ -227,7 +227,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>checkmenuitem</code></td> <td> - <div id="sampleCheckmenuitem" style="display: none;"> + <div id="sampleCheckmenuitem" class="hidden"> <pre class="brush:css"> div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre> @@ -241,7 +241,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>dualbutton</code></td> <td> - <div id="sampleDualButton" style="display: none;"> + <div id="sampleDualButton" class="hidden"> <pre class="brush:css"> div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre> @@ -255,7 +255,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>groupbox</code></td> <td> - <div id="sampleGroupbox" style="display: none;"> + <div id="sampleGroupbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre> @@ -275,7 +275,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>listbox</code></td> <td> - <div id="sampleListBox" style="display: none;"> + <div id="sampleListBox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre> @@ -289,7 +289,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>listitem</code></td> <td> - <div id="sampleListItem" style="display: none;"> + <div id="sampleListItem" class="hidden"> <pre class="brush:css"> div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre> @@ -393,7 +393,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menuarrow</code></td> <td> - <div id="sampleMenuArrow" style="display: none;"> + <div id="sampleMenuArrow" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre> @@ -407,7 +407,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menubar</code></td> <td> - <div id="sampleMenubar" style="display: none;"> + <div id="sampleMenubar" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre> @@ -421,7 +421,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menucheckbox</code></td> <td> - <div id="sampleMenuCheckbox" style="display: none;"> + <div id="sampleMenuCheckbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre> @@ -435,7 +435,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menuimage</code></td> <td> - <div id="sampleMenuImage" style="display: none;"> + <div id="sampleMenuImage" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre> @@ -449,7 +449,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menuitem</code></td> <td> - <div id="sampleMenuItem" style="display: none;"> + <div id="sampleMenuItem" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre> @@ -463,7 +463,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menuitemtext</code></td> <td> - <div id="sampleMenuItemText" style="display: none;"> + <div id="sampleMenuItemText" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre> @@ -477,7 +477,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menulist</code></td> <td> - <div id="sampleMenuList" style="display: none;"> + <div id="sampleMenuList" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre> @@ -493,7 +493,7 @@ translation_of: Web/CSS/appearance <td> </td><td><code>menulist-button</code></td> <td> - <div id="sampleMenuListButton" style="display: none;"> + <div id="sampleMenuListButton" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre> @@ -507,7 +507,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menulist-text</code></td> <td> - <div id="sampleMenuListText" style="display: none;"> + <div id="sampleMenuListText" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre> @@ -521,7 +521,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menulist-textfield</code></td> <td> - <div id="sampleMenuListTextfield" style="display: none;"> + <div id="sampleMenuListTextfield" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre> @@ -533,7 +533,7 @@ translation_of: Web/CSS/appearance <td>这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）</td> <td><code>menupopup</code></td> <td> - <div id="sampleMenuPopup" style="display: none;"> + <div id="sampleMenuPopup" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre> @@ -547,7 +547,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menuradio</code></td> <td> - <div id="sampleMenuRadio" style="display: none;"> + <div id="sampleMenuRadio" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre> @@ -561,7 +561,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>menuseparator</code></td> <td> - <div id="sampleMenuSeparator" style="display: none;"> + <div id="sampleMenuSeparator" class="hidden"> <pre class="brush:css"> div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre> @@ -581,7 +581,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>meterbar</code></td> <td> - <div id="sampleMeterbar" style="display: none;"> + <div id="sampleMeterbar" class="hidden"> <pre class="brush:css"> div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre> @@ -595,7 +595,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>meterchunk</code></td> <td> - <div id="sampleMeterchunk" style="display: none;"> + <div id="sampleMeterchunk" class="hidden"> <pre class="brush:css"> div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre> @@ -621,7 +621,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>progressbar</code></td> <td> - <div id="sampleProgressBar" style="display: none;"> + <div id="sampleProgressBar" class="hidden"> <pre class="brush:css"> div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre> @@ -635,7 +635,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>progressbar-vertical</code></td> <td> - <div id="sampleProgressBarVertical" style="display: none;"> + <div id="sampleProgressBarVertical" class="hidden"> <pre class="brush:css"> div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre> @@ -649,7 +649,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>progresschunk</code></td> <td> - <div id="sampleProgressChunk" style="display: none;"> + <div id="sampleProgressChunk" class="hidden"> <pre class="brush:css"> div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre> @@ -663,7 +663,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>progresschunk-vertical</code></td> <td> - <div id="sampleProgressChunkVertical" style="display: none;"> + <div id="sampleProgressChunkVertical" class="hidden"> <pre class="brush:css"> div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre> @@ -683,7 +683,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>radio</code></td> <td> - <div id="sampleRadio" style="display: none;"> + <div id="sampleRadio" class="hidden"> <pre class="brush:css"> div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre> @@ -698,7 +698,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>radio-container</code></td> <td> - <div id="sampleRadioContainer" style="display: none;"> + <div id="sampleRadioContainer" class="hidden"> <pre class="brush:css"> div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre> @@ -712,7 +712,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>radio-label</code></td> <td> - <div id="sampleRadioLabel" style="display: none;"> + <div id="sampleRadioLabel" class="hidden"> <pre class="brush:css"> div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre> @@ -726,7 +726,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>radiomenuitem</code></td> <td> - <div id="sampleRadioMenuItem" style="display: none;"> + <div id="sampleRadioMenuItem" class="hidden"> <pre class="brush:css"> div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre> @@ -740,7 +740,7 @@ translation_of: Web/CSS/appearance <tr> <td>range</td> <td> - <div id="sampleRange" style="display: none;"> + <div id="sampleRange" class="hidden"> <pre class="brush:css"> div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; }</pre> range @@ -755,7 +755,7 @@ translation_of: Web/CSS/appearance <tr> <td>range-thumb</td> <td> - <div id="sampleRangeThumb" style="display: none;"> + <div id="sampleRangeThumb" class="hidden"> <pre class="brush:css"> div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }</pre> @@ -769,7 +769,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>resizer</code></td> <td> - <div id="sampleResizer" style="display: none;"> + <div id="sampleResizer" class="hidden"> <pre class="brush:css"> div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre> @@ -783,7 +783,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>resizerpanel</code></td> <td> - <div id="sampleResizerPanel" style="display: none;"> + <div id="sampleResizerPanel" class="hidden"> <pre class="brush:css"> div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre> @@ -797,7 +797,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scale-horizontal</code></td> <td> - <div id="sampleScaleHorizontal" style="display: none;"> + <div id="sampleScaleHorizontal" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre> @@ -811,7 +811,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scalethumbend</code></td> <td> - <div id="sampleThumbEnd" style="display: none;"> + <div id="sampleThumbEnd" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre> @@ -825,7 +825,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scalethumb-horizontal</code></td> <td> - <div id="sampleScaleThumbHorizontal" style="display: none;"> + <div id="sampleScaleThumbHorizontal" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre> @@ -839,7 +839,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scalethumbstart</code></td> <td> - <div id="sampleScaleThumbStart" style="display: none;"> + <div id="sampleScaleThumbStart" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre> @@ -853,7 +853,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scalethumbtick</code></td> <td> - <div id="sampleScaleThumbTick" style="display: none;"> + <div id="sampleScaleThumbTick" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre> @@ -867,7 +867,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scalethumb-vertical</code></td> <td> - <div id="sampleScaleThumbVertical" style="display: none;"> + <div id="sampleScaleThumbVertical" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre> @@ -881,7 +881,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scale-vertical</code></td> <td> - <div id="sampleScaleVertical" style="display: none;"> + <div id="sampleScaleVertical" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre> @@ -895,7 +895,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbarbutton-down</code></td> <td> - <div id="sampleScrollbarButtonDown" style="display: none;"> + <div id="sampleScrollbarButtonDown" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre> @@ -909,7 +909,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbarbutton-left</code></td> <td> - <div id="sampleScrollbarButtonLeft" style="display: none;"> + <div id="sampleScrollbarButtonLeft" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre> @@ -923,7 +923,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbarbutton-right</code></td> <td> - <div id="sampleScrollbarButtonRight" style="display: none;"> + <div id="sampleScrollbarButtonRight" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre> @@ -937,7 +937,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbarbutton-up</code></td> <td> - <div id="sampleScrollbarButtonUp" style="display: none;"> + <div id="sampleScrollbarButtonUp" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre> @@ -951,7 +951,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbarthumb-horizontal</code></td> <td> - <div id="sampleScrollbarThumbHorizontal" style="display: none;"> + <div id="sampleScrollbarThumbHorizontal" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre> @@ -965,7 +965,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbarthumb-vertical</code></td> <td> - <div id="sampleScrollbarThumbVertical" style="display: none;"> + <div id="sampleScrollbarThumbVertical" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre> @@ -979,7 +979,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbartrack-horizontal</code></td> <td> - <div id="sampleScrollbarTrackHorizontal" style="display: none;"> + <div id="sampleScrollbarTrackHorizontal" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre> @@ -993,7 +993,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>scrollbartrack-vertical</code></td> <td> - <div id="sampleScrollbarTrackVertical" style="display: none;"> + <div id="sampleScrollbarTrackVertical" class="hidden"> <pre class="brush:css"> div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre> @@ -1007,7 +1007,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>searchfield</code></td> <td> - <div id="sampleSearchField" style="display: none;"> + <div id="sampleSearchField" class="hidden"> <pre class="brush:css"> div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre> @@ -1027,7 +1027,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>separator</code></td> <td> - <div id="sampleSeparator" style="display: none;"> + <div id="sampleSeparator" class="hidden"> <pre class="brush:css"> div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre> @@ -1041,7 +1041,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>sheet</code></td> <td> - <div id="sampleSheet" style="display: none;"> + <div id="sampleSheet" class="hidden"> <pre class="brush:css"> div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre> @@ -1079,7 +1079,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>spinner</code></td> <td> - <div id="sampleSpinner" style="display: none;"> + <div id="sampleSpinner" class="hidden"> <pre class="brush:css"> div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre> @@ -1093,7 +1093,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>spinner-downbutton</code></td> <td> - <div id="sampleSpinnerDownbutton" style="display: none;"> + <div id="sampleSpinnerDownbutton" class="hidden"> <pre class="brush:css"> div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre> @@ -1107,7 +1107,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>spinner-textfield</code></td> <td> - <div id="sampleSpinnerTextfield" style="display: none;"> + <div id="sampleSpinnerTextfield" class="hidden"> <pre class="brush:css"> div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre> @@ -1121,7 +1121,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>spinner-upbutton</code></td> <td> - <div id="sampleSpinnerUpbutton" style="display: none;"> + <div id="sampleSpinnerUpbutton" class="hidden"> <pre class="brush:css"> div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre> @@ -1135,7 +1135,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>splitter</code></td> <td> - <div id="sampleSplitter" style="display: none;"> + <div id="sampleSplitter" class="hidden"> <pre class="brush:css"> div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre> @@ -1155,7 +1155,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>statusbar</code></td> <td> - <div id="sampleStatusBar" style="display: none;"> + <div id="sampleStatusBar" class="hidden"> <pre class="brush:css"> div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre> @@ -1169,7 +1169,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>statusbarpanel</code></td> <td> - <div id="sampleStatusBarPanel" style="display: none;"> + <div id="sampleStatusBarPanel" class="hidden"> <pre class="brush:css"> div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre> @@ -1183,7 +1183,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>tab</code></td> <td> - <div id="sampleTab" style="display: none;"> + <div id="sampleTab" class="hidden"> <pre class="brush:css"> div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre> @@ -1197,7 +1197,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>tabpanel</code></td> <td> - <div id="sampleTabPanel" style="display: none;"> + <div id="sampleTabPanel" class="hidden"> <pre class="brush:css"> div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre> @@ -1211,7 +1211,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>tabpanels</code></td> <td> - <div id="sampleTabPanels" style="display: none;"> + <div id="sampleTabPanels" class="hidden"> <pre class="brush:css"> div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre> @@ -1225,7 +1225,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>tab-scroll-arrow-back</code></td> <td> - <div id="sampleTabScrollArrowBack" style="display: none;"> + <div id="sampleTabScrollArrowBack" class="hidden"> <pre class="brush:css"> div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre> @@ -1239,7 +1239,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>tab-scroll-arrow-forward</code></td> <td> - <div id="sampleTabScrollArrowForward" style="display: none;"> + <div id="sampleTabScrollArrowForward" class="hidden"> <pre class="brush:css"> div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre> @@ -1259,7 +1259,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>textfield</code></td> <td> - <div id="sampleTextField" style="display: none;"> + <div id="sampleTextField" class="hidden"> <pre class="brush:css"> div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre> @@ -1273,7 +1273,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>textfield-multiline</code></td> <td> - <div id="sampleTextfieldMultiline" style="display: none;"> + <div id="sampleTextfieldMultiline" class="hidden"> <pre class="brush:css"> div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre> @@ -1287,7 +1287,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>toolbar</code></td> <td> - <div id="sampleToolbar" style="display: none;"> + <div id="sampleToolbar" class="hidden"> <pre class="brush:css"> div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre> @@ -1301,7 +1301,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>toolbarbutton</code></td> <td> - <div id="sampleToolbarButton" style="display: none;"> + <div id="sampleToolbarButton" class="hidden"> <pre class="brush:css"> div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre> @@ -1315,7 +1315,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>toolbarbutton-dropdown</code></td> <td> - <div id="sampleToolbarButtonDropdown" style="display: none;"> + <div id="sampleToolbarButtonDropdown" class="hidden"> <pre class="brush:css"> div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre> @@ -1329,7 +1329,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>toolbargripper</code></td> <td> - <div id="sampleToolbarGripper" style="display: none;"> + <div id="sampleToolbarGripper" class="hidden"> <pre class="brush:css"> div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre> @@ -1343,7 +1343,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>toolbox</code></td> <td> - <div id="sampleToolbox" style="display: none;"> + <div id="sampleToolbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre> @@ -1357,7 +1357,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>tooltip</code></td> <td> - <div id="sampleTooltip" style="display: none;"> + <div id="sampleTooltip" class="hidden"> <pre class="brush:css"> div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre> @@ -1371,7 +1371,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treeheader</code></td> <td> - <div id="sampleTreeHeader" style="display: none;"> + <div id="sampleTreeHeader" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre> @@ -1385,7 +1385,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treeheadercell</code></td> <td> - <div id="sampleTreeHeaderCell" style="display: none;"> + <div id="sampleTreeHeaderCell" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre> @@ -1399,7 +1399,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treeheadersortarrow</code></td> <td> - <div id="sampleTreeHeaderSortArrow" style="display: none;"> + <div id="sampleTreeHeaderSortArrow" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre> @@ -1413,7 +1413,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treeitem</code></td> <td> - <div id="sampleTreeItem" style="display: none;"> + <div id="sampleTreeItem" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre> @@ -1427,7 +1427,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treeline</code></td> <td> - <div id="sampleTreeLine" style="display: none;"> + <div id="sampleTreeLine" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre> @@ -1441,7 +1441,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treetwisty</code></td> <td> - <div id="sampleTreeTwisty" style="display: none;"> + <div id="sampleTreeTwisty" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre> @@ -1455,7 +1455,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treetwistyopen</code></td> <td> - <div id="sampleTreeTwistyOpen" style="display: none;"> + <div id="sampleTreeTwistyOpen" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre> @@ -1469,7 +1469,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>treeview</code></td> <td> - <div id="sampleTreeView" style="display: none;"> + <div id="sampleTreeView" class="hidden"> <pre class="brush:css"> div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre> @@ -1483,7 +1483,7 @@ translation_of: Web/CSS/appearance <tr> <td>{{gecko_minversion_inline("2.0")}} <code>-moz-win-borderless-glass</code></td> <td> - <div id="sampleWinBorderlessGlass" style="display: none;"> + <div id="sampleWinBorderlessGlass" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre> @@ -1497,7 +1497,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-browsertabbar-toolbox</code></td> <td> - <div id="sampleWinBrowsertabbarToolbox" style="display: none;"> + <div id="sampleWinBrowsertabbarToolbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre> @@ -1511,7 +1511,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-browsertabbar-toolbox</code></td> <td> - <div id="sampleWinBrowsertabbarToolbox" style="display: none;"> + <div id="sampleWinBrowsertabbarToolbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre> @@ -1525,7 +1525,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-communicationstext</code></td> <td> - <div id="sampleWinCommunicationstext" style="display: none;"> + <div id="sampleWinCommunicationstext" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre> @@ -1539,7 +1539,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-communications-toolbox</code></td> <td> - <div id="sampleWinCommunicationsToolbox" style="display: none;"> + <div id="sampleWinCommunicationsToolbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre> @@ -1553,7 +1553,7 @@ translation_of: Web/CSS/appearance <tr> <td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td> <td> - <div id="sampleWinExcludeGlass" style="display: none;"> + <div id="sampleWinExcludeGlass" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre> @@ -1567,7 +1567,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-glass</code></td> <td> - <div id="sampleWinGlass" style="display: none;"> + <div id="sampleWinGlass" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-glass; color: black; }</pre> @@ -1581,7 +1581,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-mediatext</code></td> <td> - <div id="sampleWinMediaText" style="display: none;"> + <div id="sampleWinMediaText" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-mediatext; color: black; }</pre> @@ -1601,7 +1601,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-win-media-toolbox</code></td> <td> - <div id="sampleWinMediaToolbox" style="display: none;"> + <div id="sampleWinMediaToolbox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre> @@ -1615,7 +1615,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-button-box</code></td> <td> - <div id="sampleWindowButtonBox" style="display: none;"> + <div id="sampleWindowButtonBox" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-button-box; color: black; }</pre> @@ -1629,7 +1629,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-button-box-maximized</code></td> <td> - <div id="sampleWindowButtonBoxMaximized" style="display: none;"> + <div id="sampleWindowButtonBoxMaximized" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre> @@ -1643,7 +1643,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-button-close</code></td> <td> - <div id="sampleWindowButtonClose" style="display: none;"> + <div id="sampleWindowButtonClose" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-button-close; color: black; }</pre> @@ -1657,7 +1657,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-button-maximize</code></td> <td> - <div id="sampleWindowButtonMaximize" style="display: none;"> + <div id="sampleWindowButtonMaximize" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre> @@ -1671,7 +1671,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-button-minimize</code></td> <td> - <div id="sampleWindowButtonMinimize" style="display: none;"> + <div id="sampleWindowButtonMinimize" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre> @@ -1685,7 +1685,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-button-restore</code></td> <td> - <div id="sampleWindowButtonRestore" style="display: none;"> + <div id="sampleWindowButtonRestore" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-button-restore; color: black; }</pre> @@ -1699,7 +1699,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-frame-bottom</code></td> <td> - <div id="sampleWindowFrameBottom" style="display: none;"> + <div id="sampleWindowFrameBottom" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre> @@ -1713,7 +1713,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-frame-left</code></td> <td> - <div id="sampleWindowFrameLeft" style="display: none;"> + <div id="sampleWindowFrameLeft" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-frame-left; color: black; }</pre> @@ -1727,7 +1727,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-frame-right</code></td> <td> - <div id="sampleWindowFrameRight" style="display: none;"> + <div id="sampleWindowFrameRight" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-frame-right; color: black; }</pre> @@ -1741,7 +1741,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-titlebar</code></td> <td> - <div id="sampleWindowTitlebar" style="display: none;"> + <div id="sampleWindowTitlebar" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-titlebar; color: black; }</pre> @@ -1755,7 +1755,7 @@ translation_of: Web/CSS/appearance <tr> <td><code>-moz-window-titlebar-maximized</code></td> <td> - <div id="sampleWindowTitlebarMaximized" style="display: none;"> + <div id="sampleWindowTitlebarMaximized" class="hidden"> <pre class="brush:css"> div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre> diff --git a/files/zh-cn/web/css/background-blend-mode/index.html b/files/zh-cn/web/css/background-blend-mode/index.html index 0a56ddcfa5..4c063163f1 100644 --- a/files/zh-cn/web/css/background-blend-mode/index.html +++ b/files/zh-cn/web/css/background-blend-mode/index.html @@ -38,7 +38,6 @@ background-blend-mode: unset; <h2 id="Examples" name="Examples">示例</h2> -<pre class="brush: html" style="display: none;"><div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> @@ -58,14 +57,14 @@ background-blend-mode: unset; <option>luminosity</option> </select></pre> -<pre class="brush: css" style="display: none;">#div { +<pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; }</pre> -<pre class="brush: js" style="display: none;">document.getElementById("select").onchange = function(event) { +<pre class="brush: js" class="hidden">document.getElementById("select").onchange = function(event) { document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; } console.log(document.getElementById('div'));</pre> diff --git a/files/zh-cn/web/css/border-block-end/index.html b/files/zh-cn/web/css/border-block-end/index.html index 88755b3ea1..4c152ed08b 100644 --- a/files/zh-cn/web/css/border-block-end/index.html +++ b/files/zh-cn/web/css/border-block-end/index.html @@ -107,7 +107,7 @@ border-block-end: medium dashed blue; <div class="outputBox-2sJgr_0"> </div> -<div class="outputBox-17RAm_0" style="display: none;"> +<div class="outputBox-17RAm_0" class="hidden"> <div> </div> </div> </div> diff --git a/files/zh-cn/web/css/border-bottom-left-radius/index.html b/files/zh-cn/web/css/border-bottom-left-radius/index.html index 4f33b40f4c..38df1781cc 100644 --- a/files/zh-cn/web/css/border-bottom-left-radius/index.html +++ b/files/zh-cn/web/css/border-bottom-left-radius/index.html @@ -69,7 +69,7 @@ border-bottom-left-radius: inherit; <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>An arc of circle is used as the border @@ -83,7 +83,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>An arc of ellipse is used as the border @@ -97,7 +97,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>The box is a square: an arc of circle is used as the border @@ -111,7 +111,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>The box is not a square: an arc of ellipse is used as the border @@ -125,7 +125,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>The background color is clipped at the border diff --git a/files/zh-cn/web/css/border-bottom-right-radius/index.html b/files/zh-cn/web/css/border-bottom-right-radius/index.html index d63776da87..8c69521fce 100644 --- a/files/zh-cn/web/css/border-bottom-right-radius/index.html +++ b/files/zh-cn/web/css/border-bottom-right-radius/index.html @@ -71,7 +71,7 @@ border-bottom-right-radius: inherit;</pre> <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>An arc of circle is used as the border @@ -85,7 +85,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>An arc of ellipse is used as the border @@ -99,7 +99,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>The box is a square: an arc of circle is used as the border @@ -113,7 +113,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>The box is not a square: an arc of ellipse is used as the border @@ -127,7 +127,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>The background color is clipped at the border diff --git a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html index 64fde3e7f7..85b576cfd7 100644 --- a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html index dce36347b6..70ffc1aad1 100644 --- a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html @@ -6,7 +6,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器 --- <p>使用<em>Border-radius generator</em>生成 CSS3 {{cssxref("border-radius")}} 样式</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html index 05235e41f1..79b9abe9e2 100644 --- a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -6,7 +6,7 @@ original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator --- <p>这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/zh-cn/web/css/css_colors/color_picker_tool/index.html b/files/zh-cn/web/css/css_colors/color_picker_tool/index.html index ba1302f370..aa796d7ede 100644 --- a/files/zh-cn/web/css/css_colors/color_picker_tool/index.html +++ b/files/zh-cn/web/css/css_colors/color_picker_tool/index.html @@ -10,7 +10,7 @@ tags: - 颜色选择 translation_of: Web/CSS/CSS_Colors/Color_picker_tool --- -<div style="display: none;"> +<div class="hidden"> <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 236fd280c0..bf0724514e 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -229,5 +229,5 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>在读完这篇文章之后，你应该掌握了flexbox的基本特性。在下一篇文章中，我们将会学习如何与其他CSS一起使用。</p> <p> - <audio style="display: none;"></audio> + <audio class="hidden"></audio> </p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index 6f274711be..8704e3aa76 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -120,7 +120,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" class="hidden"> </span></li> </ul> <div class="originaldocinfo"> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 609ffc446d..59f44fd152 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -144,7 +144,7 @@ span.bold { font-weight: bold; } <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">堆叠上下文</a> : 堆叠上下文的注意事项</li> <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">堆叠上下文示例 1</a> : 在两层元素的第二层上使用 z-index</li> <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">堆叠上下文示例 2</a> : 在两层元素的所有层上使用 z-index</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">堆叠上下文示例 3</a> : 在三层元素的第二层上使用 z-index<span id="cke_bm_94E" style="display: none;"> </span></li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">堆叠上下文示例 3</a> : 在三层元素的第二层上使用 z-index<span id="cke_bm_94E" class="hidden"> </span></li> </ul> <p> </p> diff --git a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html index 9cc37073b1..2a9dd87fdf 100644 --- a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html +++ b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html @@ -81,7 +81,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -146,7 +146,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -211,7 +211,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -276,7 +276,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -346,7 +346,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -409,7 +409,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -472,7 +472,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -535,7 +535,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -603,7 +603,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -670,7 +670,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -737,7 +737,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -804,7 +804,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/zh-cn/web/css/filter/index.html b/files/zh-cn/web/css/filter/index.html index 4b8ab9fcdb..2720d90030 100644 --- a/files/zh-cn/web/css/filter/index.html +++ b/files/zh-cn/web/css/filter/index.html @@ -126,7 +126,7 @@ filter: unset;</pre> </svg> </pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -241,7 +241,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -331,7 +331,7 @@ table.standard-table td { <filter /> </svg></pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -412,7 +412,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -496,7 +496,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -578,7 +578,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -659,7 +659,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -743,7 +743,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: contrast(175%) brightness(3%)</pre> -<div id="combination_example" style="display: none;"> +<div id="combination_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> diff --git a/files/zh-cn/web/css/font/index.html b/files/zh-cn/web/css/font/index.html index 6a5b733707..a8464557d8 100644 --- a/files/zh-cn/web/css/font/index.html +++ b/files/zh-cn/web/css/font/index.html @@ -109,9 +109,8 @@ translation_of: Web/CSS/font <h3 id="live_sample" name="live_sample">实样</h3> -<p id="HTML_Content" style="display: none;">HTML Content</p> +<p id="HTML_Content" class="hidden">HTML Content</p> -<pre class="brush: html" style="display: none;"><p> Change the radio buttons below to see the generated shorthand and it's effect. </p> <form action="createShortHand()"> @@ -203,9 +202,9 @@ translation_of: Web/CSS/font </div> </pre> -<p id="CSS_Content" style="display: none;">CSS Content</p> +<p id="CSS_Content" class="hidden">CSS Content</p> -<pre class="brush: css" style="display: none;">body, input { +<pre class="brush: css" class="hidden">body, input { font: 14px arial; } @@ -252,9 +251,9 @@ translation_of: Web/CSS/font text-align: right; }</pre> -<p id="JavaScript_Content" style="display: none;">JavaScript Content</p> +<p id="JavaScript_Content" class="hidden">JavaScript Content</p> -<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"), +<pre class="brush: js" class="hidden">var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, diff --git a/files/zh-cn/web/css/overscroll-behavior/index.html b/files/zh-cn/web/css/overscroll-behavior/index.html index 047444d023..728f41aa94 100644 --- a/files/zh-cn/web/css/overscroll-behavior/index.html +++ b/files/zh-cn/web/css/overscroll-behavior/index.html @@ -108,5 +108,5 @@ overflow: unset; <p> - <audio style="display: none;"></audio> + <audio class="hidden"></audio> </p> diff --git a/files/zh-cn/web/css/padding-top/index.html b/files/zh-cn/web/css/padding-top/index.html index ad13e5ef19..1b1e3f2db3 100644 --- a/files/zh-cn/web/css/padding-top/index.html +++ b/files/zh-cn/web/css/padding-top/index.html @@ -146,5 +146,5 @@ padding-top: unset; </ul> <p> - <audio style="display: none;"> </audio> + <audio class="hidden"> </audio> </p> diff --git a/files/zh-cn/web/css/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/repeating-linear-gradient()/index.html index 1fe6e76b86..39c25687f3 100644 --- a/files/zh-cn/web/css/repeating-linear-gradient()/index.html +++ b/files/zh-cn/web/css/repeating-linear-gradient()/index.html @@ -90,7 +90,7 @@ where <code><side-or-corner> = [left | right] || [top | bottom]</code> </ol></pre> </div> -<div id="Example_hidden" style="display: none;"> +<div id="Example_hidden" class="hidden"> <pre class="brush: css notranslate">div { display: block; width: 50%; diff --git a/files/zh-cn/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/repeating-radial-gradient()/index.html index 822bab8e6d..94cf5f2d19 100644 --- a/files/zh-cn/web/css/repeating-radial-gradient()/index.html +++ b/files/zh-cn/web/css/repeating-radial-gradient()/index.html @@ -86,9 +86,8 @@ where <extent-keyword> = closest-corner | closest-side | farthest-corner | <h3 id="黑白相间的渐变">黑白相间的渐变</h3> -<pre class="brush: html notranslate" style="display: none;"><div id="grad1">Black white</div></pre> -<pre class="brush: css notranslate" style="display: none;">div { +<pre class="brush: css notranslate" class="hidden">div { display: block; width: 50%; height: 80px; @@ -114,9 +113,8 @@ where <extent-keyword> = closest-corner | closest-side | farthest-corner | <h3 id="Farthest-corner渐变">Farthest-corner渐变</h3> -<pre class="brush: html notranslate" style="display: none;"><div id="grad1">Farthest-corner</div></pre> -<pre class="brush: css notranslate" style="display: none;">div { +<pre class="brush: css notranslate" class="hidden">div { display: block; width: 50%; height: 80px; diff --git a/files/zh-cn/web/css/text-decoration-style/index.html b/files/zh-cn/web/css/text-decoration-style/index.html index 33d3cce79b..0285e527f8 100644 --- a/files/zh-cn/web/css/text-decoration-style/index.html +++ b/files/zh-cn/web/css/text-decoration-style/index.html @@ -60,7 +60,7 @@ text-decoration-style: unset; <h2 id="示例">示例</h2> <div id="Examples"> -<pre class="brush: css" style="display: none;">.example { +<pre class="brush: css" class="hidden">.example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; diff --git a/files/zh-cn/web/css/text-shadow/index.html b/files/zh-cn/web/css/text-shadow/index.html index 3d0ce10c68..7522026848 100644 --- a/files/zh-cn/web/css/text-shadow/index.html +++ b/files/zh-cn/web/css/text-shadow/index.html @@ -152,9 +152,9 @@ text-shadow: unset;</pre> </ul> <p> - <audio style="display: none;"></audio> + <audio class="hidden"></audio> </p> <p> - <audio style="display: none;"></audio> + <audio class="hidden"></audio> </p> diff --git a/files/zh-cn/web/css/transition-delay/index.html b/files/zh-cn/web/css/transition-delay/index.html index 19ba83c5b8..e573d84328 100644 --- a/files/zh-cn/web/css/transition-delay/index.html +++ b/files/zh-cn/web/css/transition-delay/index.html @@ -49,7 +49,7 @@ transition-delay: unset; <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -116,7 +116,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -183,7 +183,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -250,7 +250,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/zh-cn/web/css/transition-duration/index.html b/files/zh-cn/web/css/transition-duration/index.html index b3db77b492..55f561a7a0 100644 --- a/files/zh-cn/web/css/transition-duration/index.html +++ b/files/zh-cn/web/css/transition-duration/index.html @@ -44,7 +44,7 @@ transition-duration: unset; <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -109,7 +109,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -174,7 +174,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -239,7 +239,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/zh-cn/web/css/transition-timing-function/index.html b/files/zh-cn/web/css/transition-timing-function/index.html index 3cceed4dfc..8733097d9b 100644 --- a/files/zh-cn/web/css/transition-timing-function/index.html +++ b/files/zh-cn/web/css/transition-timing-function/index.html @@ -48,7 +48,7 @@ transition-timing-function: inherit <div id="ttf_ease"> <p><code>transition-timing-function: ease</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -111,7 +111,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease-in</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -174,7 +174,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease-out</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -237,7 +237,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease-in-out</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -301,7 +301,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -364,7 +364,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-start</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -427,7 +427,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -490,7 +490,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> |