免費(fèi)AI編程助手
W3.CSS Display (顯示)
通過(guò) display 類(lèi)，您可以在其他 HTML 元素內(nèi)的特定位置顯示 HTML 元素：
實(shí)例
<div class="w3-display-topleft w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">左上方</font></font></div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
W3.CSS 顯示類(lèi)別
W3.CSS 提供以下 display 類(lèi)：
| 類(lèi) | 定義 |
|---|---|
| w3-display-container
|
在 w3-display-container 中顯示內(nèi)容
|
| w3-display-topleft | 在 w3-display-container 的左上角顯示內(nèi)容 |
| w3-display-topright | 在 w3-display-container 的右上角顯示內(nèi)容 |
| w3-display-bottomleft | 在 w3-display-container 的左下角顯示內(nèi)容 |
| w3-display-bottomright | 在 w3-display-container 的右下角顯示內(nèi)容 |
| w3-display-left | 在 w3-display-container 的左側(cè)（左中）顯示內(nèi)容 |
| w3-display-right | 在 w3-display-container 的右側(cè)（中右）顯示內(nèi)容 |
| w3-display-middle | 在 w3-display-container 的中間（中間）顯示內(nèi)容 |
| w3-display-topmiddle | 在 w3-display-container 的中上方顯示內(nèi)容 |
| w3-display-bottommiddle | 在 w3-display-container 的底部中間顯示內(nèi)容 |
| w3-display-position
|
在 w3-display-container 中的指定位置顯示內(nèi)容 |
| w3-display-hover
|
在 w3-display-container 內(nèi)的懸停上顯示內(nèi)容 |
| w3-left
|
將元素浮動(dòng)到左側(cè)（浮動(dòng)：左側(cè)） |
| w3-right | 將元素浮動(dòng)到右側(cè)（浮動(dòng)：右側(cè)） |
| w3-show | 顯示一個(gè)元素（顯示：塊） |
| w3-hide
|
隱藏元素（顯示：無(wú)） |
| w3-mobile
|
將移動(dòng)優(yōu)先響應(yīng)性添加到任何元素。
在移動(dòng)設(shè)備上將元素顯示為塊元素 |
與上面相同的示例，在其中添加了一些元素：
實(shí)例
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topmiddle">中間頂部</div>
<div class="w3-padding w3-display-bottommiddle">中間底部</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
在圖像內(nèi)顯示文本：
實(shí)例
<img src="img_lights.jpg" alt="Lights" style="width:100%">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
顯示懸停
w3-display-hover 懸停類(lèi)顯示 w3-display（從隱藏變?yōu)槭境觯?/p>
實(shí)例
<div class="w3-display-container w3-light-grey" style="height:300px;">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
實(shí)例
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png" alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">約翰·杜</button>
</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
在本教程的后面，您將了解有關(guān)動(dòng)畫(huà)和效果的更多信息。
顯示標(biāo)志
稍加想象，w3-display 類(lèi)可用于創(chuàng)建標(biāo)志：
實(shí)例
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
Floating 類(lèi)
w3-left 類(lèi)浮到左邊的元素，w3-right 類(lèi)浮動(dòng)到右邊的元素：
實(shí)例
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
注意：使用 w3-clear 類(lèi)清除浮點(diǎn)數(shù)，或?qū)⑺鼈兎湃?nbsp;w3-display 中，如上例所示（自動(dòng)清除浮點(diǎn)數(shù)）。
隱藏和顯示
強(qiáng)制使用 w3-show 或 w3-hide 類(lèi)顯示或隱藏元素。
實(shí)例
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
這些類(lèi)通常用于在隱藏和顯示元素之間切換：
實(shí)例
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線(xiàn)實(shí)例
w3-mobile 類(lèi)
W3-mobile 類(lèi)添加移動(dòng)第一響應(yīng)性的任何元件。
它將 display：block 和 width：100％ 添加到屏幕寬度小于 600px 的元素上。
更多建議：