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内的元素隐藏了,只要最后的图片显示,并且当鼠标悬浮其上时会显示手型指针样式。
