html+css像素块图（太阳花）

最新推荐文章于 2024-12-27 12:50:46 发布

Apricity-fan

最新推荐文章于 2024-12-27 12:50:46 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html+css

本文链接：https://blog.youkuaiyun.com/qq_40644364/article/details/96758317

本文介绍了如何不依赖绝对定位和相对定位，仅使用HTML和CSS创作出精美的太阳花图案，展示了纯CSS布局的创意可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不使用绝对定位和相对定位还是可以写出好看的图案
这次的是太阳花
在这里插入图片描述
css代码

<style type="text/css">
			*{
   
   
				margin: 0 auto;
				padding: 0;
			}
			div{
   
   
				width: 50px;
				height: 50px;
				border: 2px solid white;
			}
			.br{
   
   
				background-color: red;
			}
			.by{
   
   
				background-color: yellow;
			}
			.fr{
   
   
				float: right;
			}
			.fl{
   
   
				float: left;
				
			}
		</style>

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>太阳花</title>
		
		<!-- 第一列 -->
	<div class="fl">
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
	</div>
	<!-- 第二列 -->
	
	 <div class="fl">
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 	<div class="br "></div>
	 </div>
		<!-- 第三列 -->
	    <div class="fl">
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
			
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="by "></div>
			
	    	<div class="by "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    	<div class="br "></div>
	    </div> 
		   
		 <!-- 第四列 -->
	<div class="fl">
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="by "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="by "></div>
		<div class="by "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="by "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
	</div>
	
	<!-- 第五 -->
	
	<div class="fl">
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="by "></div>
		<div class="by "></div>
		<div class="by "></div>
		<div class="br "></div>
		<div class="br "></div>
		<div class="by "></div>
		<div class="by "></div>