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

最新推荐文章于 2021-08-08 22:49:22 发布
最新推荐文章于 2021-08-08 22:49:22 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WAITFORYOU_/article/details/106562473
版权

先上效果图下面附上代码
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!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>
冷傲幽神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中怎么设置栅格,[CSS] 栅格化布局
weixin_33068055的博客
06-15 1839
栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器(有行有列)。你可以在网格里面添加你想要的子元素。grid 初始化元素为栅格化将一个HTML元素转换为网格的容器，只需要对其设置display: grid即可。display: grid告诉我们，可以使用CSS Grid的相关属性了。item1item2item3item4item5item6复制代码.container{...
HTMLCSS学习笔记（二十三）GRID布局_html 网格布局
最新发布
06-20 827
划分网格的线，称为"网格线"。水平网格线划分出行，垂直网格线划分出列。1、启动网格布局2、划分行和列为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。3、设置行间距 || 列间距5、规划子元素放置的顺序（默认为先排行后排列）6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式。
栅栏布局合并html,CSS多列布局（栅格布局）
weixin_33599503的博客
06-18 451
一、多列布局CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:代码如下(具体的解释也在代码中)浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。(图片来源：http://www.runoob.com)Document李波.div {/*控制列数*/-moz-column-count: 3;/* Firef...
HTML使用栅格布局实现六种筛子样式的代码详解
01-19
先上效果图下面附上代码 <!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: pur
js摇筛子点数合计代码
07-24
在JavaScript（简称JS）编程中，模拟摇筛子游戏是一种常见的练习，可以帮助初学者更好地理解事件处理、随机数生成以及DOM操作等基本概念。在这个场景中，"js摇筛子点数合计代码"是一个简单的应用，它实现了用户通过...
使用递归实现计算多个筛子出现的点数的概率分布
10-30
对于一个筛子，我们通常假设它有六个面，每个面出现的概率相等，即1/6。当有多个筛子时，所有筛子的点数组合就构成了所有可能的结果。例如，两个筛子的所有可能结果为：(1,1)，(1,2)，...，(6,6)，共36种。 在C#中...
html+css+js实现骰子游戏
04-14
内容概要：通过html+css+js实现骰子游戏，点击开始后骰子旋转，结束后骰子随机一面朝上； 核心内容：css 3d旋转 、js setInterval...可以学到什么：css 3d构建立方体，js setInterval函数的使用及清除； 阅读建议：无；
c++实现筛选筛子的一个小游戏
04-12
在本文中，我们将深入探讨如何使用C++编程语言来实现一个筛选筛子的小游戏。C++是一种强大且灵活的编程语言，广泛应用于系统软件、应用软件、游戏开发以及嵌入式系统等领域。在这个游戏中，玩家可能需要通过掷筛子来...
flex布局案例
weixin_43837268的博客
10-18 311
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l.
骰子的6个面和1个无点面图片
03-24
骰子的6个面和1个无点面，可以用来做小游戏
在html5中关于　栅格系统,css栅格系统在项目中的灵活运用
weixin_32946431的博客
06-17 306
前言css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求UI设计了如下布局，其中左上角橙色部分是固定的，蓝色部分是动态渲染的，从前往后依次展示，有一个就显示一块，有二个就显示二块，依次类推。如果数据多于6个，那么多余的数据，依次再在下方四列的地方进行展示。分析从图中可以看到，栅格分两种，一种是3列的栅格，一种是4列...
HTML栅格布局container,布局&栅格
weixin_39906521的博客
06-18 4844
布局方式先聊聊布局方面的知识，先列据一个实现三栏水平布局(左右定宽，中间自适应)案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。圣杯布局 & 双飞翼布局(都是三列左右栏固定中间栏自适应的网页布局)。相同点：三列布局，两边定宽，中间自适应；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高；差异点：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了DOM节...
HTML栅格布局container,(Bootstrap3.0的栅格布局系统实现原理)
weixin_42515063的博客
06-18 1037
这个标题取的有点奇怪，怪我翻译的有问题吧。英文学平有限，有道词典和google翻译齐上阵是必须的。还好翻译的不是小说，对于技术文章，还是能勉强翻过来的。本文主要讲解了Bootstrap3.0的栅格布局系统实现原理，以及使用过程中应该注意的问题。开始...翻译..像CSS栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设计或者一些比较复杂的东...
HTML+CSS制作筛子
CIA的博客
08-08 660
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>筛子&
Bootstrap(六) 面板(panel)
wangchaohpu的博客
08-29 2452
1、面板 2、面板+列表组 去掉列表组周围的空白：去掉&lt;div class="panel-body"&gt;&lt;/div&gt; ，效果如下图 3、面板+表格
巧用 BootStrap -- 栅格系统（布局）轻松搞定网页响应式布局！
weixin_30318645的博客
09-19 3044
摘要：Bootstrap 为我们提供了一套响应式、移动设备优先的流式栅格系统，合理的使用栅格系统将会使得网站页面布局变得更加简单，在设置了媒体查询之后，响应式网站也无需再单独写了。接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点。相信在看完这篇文章之后，你完全可以轻松使用栅格布局。 网站效果图如下所示： PC版： 移动版: ...
html利用flex布局制作筛子
07-27
您可以使用Flex布局来制作一个筛子的HTML页面。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .dice { width: 200px; height: 200px; border: 1px solid black; display: flex; flex-wrap: wrap; } .dot { width: 33.33%; height: 33.33%; background-color: black; } </style> </head> <body> <div class="container"> <div class="dice"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </body> </html> ``` 在这个示例中，我们使用Flex布局来创建一个名为`container`的容器，使其居中显示在屏幕上。然后，在容器中创建一个名为`dice`的容器，它是一个正方形，并且使用Flex布局的`flex-wrap`属性来让内部元素换行显示。每个小点使用`dot`类来表示，通过调整宽度和高度，使其占据`dice`容器的1/3大小，并设置背景颜色为黑色。 这样，您就可以使用Flex布局制作一个简单的筛子。您可以根据需要进行调整和美化。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值