HTML使用栅格布局实现六种筛子的样式

小灰灰 2023-02-14 10:45 2阅读 0赞

先上效果图下面附上代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.big { 
    				width: 100px;
    				height: 100px;
    				background: skyblue;
    				display: flex;
    				margin-top: 20px;
    			} 
    			.small { 
    				width: 10px;
    				height: 10px;
    				background: purple;
    				border-radius: 5px;
    			}
    			
    			.one { 
    				display: flex;
    				justify-content: center;
    				/*交叉轴*/
    				align-items: center;
    			}
    			
    			.two { 
    				display: flex;
    				justify-content: space-around;
    				align-items: center;
    			}
    			
    			.two2 { 
    				display: flex;
    				flex-direction: column;
    				justify-content: space-around;
    				align-items: center;
    			}
    			
    			.three { 
    				display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    				align-items: center;
    			}
    			
    			.four { 
    				display: flex;
    				justify-content: space-around;
    			}
    			
    			.four1 { 
    				display: flex;
    				justify-content: space-around;
    				align-items: center;
    			}
    			
    			.four2 { 
    				display: flex;
    				flex-direction: column;
    				justify-content: space-around;
    				align-items: center;
    			}
    			
    			.five { 
    				display: flex;
    				justify-content: space-around;
    			}
    			
    			.five1 { 
    				display: flex;
    				flex-direction: column;
    				justify-content: space-around;
    				align-items: center;
    			}
    			
    			.five2 { 
    				display: flex;
    				flex-direction: row;
    				align-self: center;
    			}
    			
    			.six { 
    				display: flex;
    				justify-content: space-around;
    			}
    			
    			.six1 { 
    				display: flex;
    				flex-direction: column;
    				justify-content: space-around;
    				align-items: center;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="big one">
    			<div class="small"></div>
    		</div>
    		<div class="big two">
    			<div class="small"></div>
    			<div class="small"></div>
    		</div>
    		<div class="big two2">
    			<div class="small"></div>
    			<div class="small"></div>
    		</div>
    		<div class="big three">
    			<div class="small" style="align-self: flex-start;"></div>
    			<div class="small" style="align-self: center;"></div>
    			<div class="small" style="align-self: flex-end;"></div>
    		</div>
    		<div class="big three">
    			<div class="small" style="align-self: flex-end;"></div>
    			<div class="small" style="align-self: center;"></div>
    			<div class="small" style="align-self: flex-start;"></div>
    		</div>
    		<div class="big four">
    			<div class="four2">
    
    				<div class="small"></div>
    				<div class="small"></div>
    			</div>
    			<div class="four2">
    
    				<div class="small"></div>
    				<div class="small"></div>
    			</div>
    		</div>
    		<div class="big five">
    			<div class="five1">
    
    				<div class="small"></div>
    				<div class="small"></div>
    			</div>
    			<div class="five2">
    
    				<div class="small"></div>
    			</div>
    			<div class="five1">
    
    				<div class="small"></div>
    				<div class="small"></div>
    			</div>
    		</div>
    
    		<div class="big six">
    			<div class="six1">
    				<div class="small"></div>
    				<div class="small"></div>
    				<div class="small"></div>
    			</div>
    			<div class="six1">
    				<div class="small"></div>
    				<div class="small"></div>
    				<div class="small"></div>
    			</div>
    		</div>
    		<div class="big six">
    			<div class="six1">
    				<div class="small"></div> 
    				<div class="small"></div>
    			</div>
    			<div class="six1">
    				<div class="small"></div>
    				<div class="small"></div> 
    			</div>
    			<div class="six1">
    				<div class="small"></div>
    				<div class="small"></div> 
    			</div>
    		</div>
    	</body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602161603608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200602161618208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200602161636913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDM5Nzc1NTIw,size_16,color_FFFFFF,t_70