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