阿巴的第十二天

最新推荐文章于 2023-05-24 17:16:40 发布

PUDINrua

最新推荐文章于 2023-05-24 17:16:40 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/PUDINrua/article/details/115113964

版权

这段博客展示了如何使用CSS来设置HTML元素的背景颜色、显示模式，并通过实例解释了块元素、行内元素和行内块元素的区别。博客中包含`<p>`, `<div>`, `<li>`, `<a>`和`<span>`等元素的样式应用，以及如何通过改变`display`属性来调整元素的布局和显示效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		
		p{
			background-color: yellow;
			
		}
		
		div{
			display:inline;	
			background-color: pink;
		}
		
		li{
			background-color: red;
		}
		
		.li2{
			width: 50px;
			height: 30px;
			background-color: green;
		}
		
		.li3{
			width: 50px;
			height: 30px;
			background-color: black;
		}
		
		a{
			width: 80px;
			height: 50px;
			background-color: gray;
		}
		/* 行内元素
		一行显示多个
		设置width height无效
		默认的宽高是内容的宽高 */
		a{
			display:block;
			width: 1000px;
			height: 200px;
			background-color: yellow;
		}
		
		
		span{
			background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 元素显示模式：块元素 行内元素 行内块元素 -->
		<p style="color:green ; font-size:24px">哈哈哈</p>
		<div>盒子1</div>
		<div>盒子2</div>
		<ul>
			<li>111</li>	
			<li class="li2">222</li>
			<li class="li3">333</li>
			<li>444</li>
		</ul>
		<a href="#">链接</a>
		<a href="#">链接</a>
		<a href="#">链接</a>
		<span>文字</span>
		<span>文字</span>
		<span>文字</span>
		<input type="text" />
	</body>
</html>