Web开发基础-CSS-23

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


猜你喜欢

转载自blog.csdn.net/Coder_Boy_/article/details/80953728
今日推荐