首页html利用flex布局制作筛子

html利用flex布局制作筛子

时间: 2023-08-23 07:17:09 浏览: 121

flex布局.html

您可以使用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布局制作一个简单的筛子。您可以根据需要进行调整和美化。希望对您有所帮助！

阅读全文