uniapp怎么写四个方块并且每个都有不同颜色
时间: 2024-01-25 20:08:21 浏览: 40
你可以使用uniapp提供的`<view>`标签来实现四个方块,并通过`style`属性来设置不同的颜色。
以下是一个示例代码:
```html
<template>
<view class="container">
<view class="square" style="background-color: #f44336;"></view>
<view class="square" style="background-color: #2196f3;"></view>
<view class="square" style="background-color: #4caf50;"></view>
<view class="square" style="background-color: #ffeb3b;"></view>
</view>
</template>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square {
width: 100px;
height: 100px;
margin: 10px;
}
</style>
```
在上面的代码中,我们使用了`<view>`标签来创建四个方块,并通过`style`属性来设置不同的颜色。我们还使用了CSS的`display: flex;`属性来将四个方块排列在一行,并使用`flex-wrap: wrap;`属性使它们在容器宽度不够时自动换行。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)