css第六天各种选择器简单练习

最新推荐文章于 2024-06-18 17:22:31 发布

流浪的小宇

最新推荐文章于 2024-06-18 17:22:31 发布

阅读量394

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/b150461/article/details/99684661

版权

本文介绍了CSS选择器的实践应用，包括嵌套div的实现和HTML选择器的定义，通过代码示例展示了如何进行图片居中布局的练习，附带了相应的效果图。

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

做了两套方案，一套是照视频做的。另一套是嵌套的div

一：嵌套div代码

<DOCTYPE html>
<html>
	<head>
		<title>
			第六天
		</title>
	<meta charset="utf-8">
	
<style type="text/css">
div{
	width:400px;
		height:400px;
			background-image:url(1.png);
				margin-left:350px;
					margin-top:100px;
						border:1px solid white;
						/*若无边框内部div将出错*/
}
div .div1{
	margin-left:40px;
		margin-top:50px;
}

p{
	width:150px;
		height:60px;
			font-size:20px;
				color:pink;
					text-decoration:line-through;
						font-style:italic;
							background-color:silver;
}
</style>
	</head>
	<body>
		<div>
			<p class="div1">这是一首快乐的歌曲！！！</p>
			<p class="div1">这是一首快乐的歌曲！！！</p>
			<p class="div1">这是一首快乐的歌曲！！！</p>
		</div>
	</body>
</html>

<