4月15号笔记

1.生成效果图1：

屏幕截图 2026-04-18 171424

代码演示：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{margin:0;padding:0}
		.parent{
			margin:0 auto;
			width:1000px;
			overflow:hidden;/*子集元素浮动后,父级塌陷*/
			background-color:yellow;
			}
		.son1{
			float:left;
			width:25%;
			height:200px;
			background-color:blue;
			}	
		.red{
			float:left;
			width:25%;
			height:200px;
			background-color:red;
		}				
		.green{
			float:left;
			width:25%;
			height:200px;
			background-color:green;
		}			
			
		</style>
	</head>
	<body>
		<div class="parent">
					<div class="son1"></div> 
					<div class="red"></div>
					<div class='green'></div>
				
		</div>
	</body>
</html>

2生成效果图2：

屏幕截图 2026-04-18 175340

代码演示：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			.top{
				margin:0 auto;
				width:500px;
				height:20px;
				background-color:red;
				border:10px solid black;
				
			}
				
			
			
			
			
			
			
		</style>
		
		
	</head>
	<body>
		<div class="top">
			<div class="left1"></div>
			<div class="bottle"></div>
			<div class="right1"></div>
			
		</div>
		
		
		
	</body>
</html>

3.效果图3：

屏幕截图 2026-04-18 181721

代码演示：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			.top{
				margin:0 auto;
				width:500px;
				height:20px;
				background-color:red;
				
				
			}
				.left1{
					float:left;
					width:20px;
					height:200px;
					background-color:blue;
				
					
				}
					.bottle{
						float:right;
						width:500px;
						height:20px;
						background-color:brown;
					}
						.right1{
							margin-left:auto;
							width:20px;
							height:200px;
							background-color:green;
						}
			
			
			
			
			
			
		</style>
		
		
	</head>
	<body>
		<div class="top">
			<div class="left1"></div>
			<div class="bottle"></div>
			<div class="right1"></div>
			
		</div>
		
		
		
	</body>
</html>
posted @ 2026-04-18 18:19  createcoding  阅读(33)  评论(0)    收藏  举报