W3.CSS Display (显示)

2020-11-30 14:21 更新

通过 display 类,您可以在其他 HTML 元素内的特定位置显示 HTML 元素:

实例

 <div class="w3-display-topleft w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">左上方</font></font></div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 显示类别

W3.CSS 提供以下 display 类: 

定义
w3-display-container
在 w3-display-container 中显示内容
w3-display-topleft 在 w3-display-container 的左上角显示内容
w3-display-topright 在 w3-display-container 的右上角显示内容
w3-display-bottomleft 在 w3-display-container 的左下角显示内容
w3-display-bottomright 在 w3-display-container 的右下角显示内容
w3-display-left 在 w3-display-container 的左侧(左中)显示内容
w3-display-right 在 w3-display-container 的右侧(中右)显示内容
w3-display-middle 在 w3-display-container 的中间(中间)显示内容
w3-display-topmiddle 在 w3-display-container 的中上方显示内容
w3-display-bottommiddle 在 w3-display-container 的底部中间显示内容
w3-display-position
在 w3-display-container 中的指定位置显示内容
w3-display-hover
在 w3-display-container 内的悬停上显示内容
w3-left
将元素浮动到左侧(浮动:左侧)
w3-right 将元素浮动到右侧(浮动:右侧)
w3-show 显示一个元素(显示:块)
w3-hide
隐藏元素(显示:无)
w3-mobile
将移动优先响应性添加到任何元素。
在移动设备上将元素显示为块元素


与上面相同的示例,在其中添加了一些元素:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

在图像内显示文本:

实例

<img src="img_lights.jpg" alt="Lights" style="width:100%">


尝试一下 »
点击“尝试一下”按钮查看在线实例

显示悬停

w3-display-hover 悬停类显示 w3-display(从隐藏变为示出)。

实例

<div class="w3-display-container w3-light-grey" style="height:300px;">


尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-display-hover 悬停类可以结合 effect (效果) 和  animation (动画) 创建悬停效果:

实例

 <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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

在本教程的后面,您将了解有关动画和效果的更多信息。


显示标志

稍加想象,w3-display 类可用于创建标志:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Floating 类

w3-left 类浮到左边的元素,w3-right 类浮动到右边的元素:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

注意:使用 w3-clear 类清除浮点数,或将它们放入 w3-display 中,如上例所示(自动清除浮点数)。


隐藏和显示

强制使用 w3-show 或 w3-hide 类显示或隐藏元素。

实例

<p class="w3-show">I am shown (display: block).</p>

<p class="w3-hide">I am hidden (display: none).</p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

这些类通常用于在隐藏和显示元素之间切换:

实例

<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>


尝试一下 »

点击“尝试一下”按钮查看在线实例


w3-mobile 类

W3-mobile 类添加移动第一响应性的任何元件。

它将 display:block 和 width:100% 添加到屏幕宽度小于 600px 的元素上。

实例

<button class="w3-button w3-mobile">链接</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号