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内的元素隐藏了，只要最后的图片显示，并且当鼠标悬浮其上时会显示手型指针样式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
