Web开发基础-CSS-23

xiaoxiao2021-02-28  36

CSS中元素的显示方式

通过下面案例演示如何设置元素显示方式:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素的显示方式</title> <style type="text/css"> p { display: inline; } b { display: block; } img { display:block; } /* div { display: none;/* 隐藏显示 */ } */ /* 设置鼠标的形状 */ img:hover { cursor:pointer; } </style> </head> <body> <div> <p>aaa</p> <p>bbb</p> <p>ccc</p> </div> <div> <b>111</b> <b>222</b> <b>333</b> </div> <div> <img alt="" src="../images/01.jpg"> <img alt="" src="../images/02.jpg"> <img alt="" src="../images/03.jpg"> </div> <img alt="" src="../images/04.jpg"> </body> </html>

最终的页面效果:

添加div的隐藏样式:

div { display: none;/* 隐藏显示 */ }

修改后页面显示效果:所以div内的元素隐藏了,只要最后的图片显示,并且当鼠标悬浮其上时会显示手型指针样式。

转载请注明原文地址: https://www.6miu.com/read-2628954.html

最新回复(0)