我有一个屏幕截图,如下所示,我必须在 HTML/CSS 中复制它。在下面的屏幕截图中,我无法在方块之间制作彩色的左右箭头。
此时,我可以在没有彩色左右箭头的情况下在小提琴中 复制它。
我用来制作一系列小方块的 CSS 代码片段是:
.squares .square {
width: 200px;
text-align: center;
height: 200px;
background-color: white;
border-radius: 15px;
}
问题陈述:
我想知道我应该在小提琴中添加哪些 CSS 代码,以便正方形之间的彩色左右箭头 显示在小提琴中。
您可以通过 HTML 特殊字符来实现,如下所示:
.squares {
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
background-color: rgb(238, 238, 238);
flex-wrap: wrap;
}
.squares .square {
width: 200px;
text-align: center;
height: 200px;
background-color: white;
border-radius: 15px;
}
.squares .square p
{
text-align: center;
vertical-align: bottom;
}
.arrows {
text-align:center;
}
.arrows span {
display:block;
font-size:48px;
line-height:32px;
color:green;
font-weight:bold;
}
.arrows span:first-child {
color:#C90;
}
<div class="squares">
<div class="square"><p>Franchise Hub Hierarchy</p><img src="https://s7.postimg.cc/jvu89zp17/Layer_30.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>System wide user permissions</p><img src="https://s7.postimg.cc/6ronxc7a3/Layer_33.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>Custom Corporate Branding</p><img src="https://s7.postimg.cc/wn8egkbor/Layer_46.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>Configurable Workflow</p><img src="https://s7.postimg.cc/k8lmg8rwb/Layer_47.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>Orders, C.R.M. and P.O.S</p><img src="https://s7.postimg.cc/9yj7h0hgb/Shape_33.png" alt=""/></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句