Html 添加四个带有迷你边框线的块
我需要一些代码方面的帮助。我已经创建了一个白色背景的主标题块，我想在同一行中添加四个相邻的块，我想在中间添加一个大字体文本，在大字体文本下面添加一个小字体文本，我还想添加如下小边框线： 代码如下：Html 添加四个带有迷你边框线的块,html,css,Html,Css,我需要一些代码方面的帮助。我已经创建了一个白色背景的主标题块，我想在同一行中添加四个相邻的块，我想在中间添加一个大字体文本，在大字体文本下面添加一个小字体文本，我还想添加如下小边框线： 代码如下： <style type="text/css"> body { background-color: #edf1f5; margin: 0; font-family: Arial, Helvetica, sans-serif; } body { background-co
<style type="text/css">
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main-row {
background: #ffffff;
padding: 25px;
margin-top: 30px;
/* position: relative; */
/* min-height: 1px; */
/* padding-right: 15px; */
padding-left: 15px;
margin-bottom: 30px;
/* margin-right: -38px; */
margin-left: 30px;
width: 93%;
height: 60px;
/* display: table; */
content: " ";
}
.middle-row {
width: 20%;
height: 60px;
margin-top: 5px;
margin-left: 30px;
}
.middle-number {
font-size: 38px;
font-weight: bold;
margin: 0 0 10px 0;
white-space: nowrap;
padding: 0;
text-align: center;
}
.lower-text {
font-size: 16px;
white-space: nowrap;
margin: 0 0 10px 0;
padding: 0;
text-align: center;
margin-top: 40px;
}
</style>
<body>
<div class="main-row">
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Opened</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Click Rate</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Subscribers</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">UnSubscribers</span>
</div>
</div>
</body>
身体{
背景色：#edf1f5；
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
身体{
背景色：#edf1f5；
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
.主排{
背景：#ffffff；
填充：25px；
边缘顶部：30px；
/*位置：相对位置*/
/*最小高度：1px*/
/*右侧填充：15px*/
左侧填充：15px；
边缘底部：30px；
/*右边距：-38px*/
左边距：30px；
宽度：93%；
高度：60px；
/*显示：表格*/
内容：“；
}
.中排{
宽度：20%；
高度：60px；
边缘顶部：5px；
左边距：30px；
}
.中位数{
字号：38px；
字体大小：粗体；
裕度：0 10px 0；
空白：nowrap；
填充：0；
文本对齐：居中；
}
.下文本{
字体大小：16px；
空白：nowrap；
裕度：0 10px 0；
填充：0；
文本对齐：居中；
边缘顶端：40px；
}
0
开的
0
点击率
0
订户
0
退订者
谢谢。下面是一个包含4个块的示例：
正文{
背景色：#edf1f5；
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
.主排{
背景：#ffffff；
填充：25px；
边缘顶部：30px；
左侧填充：15px；
边缘底部：30px；
左边距：30px；
宽度：93%；
高度：60px；
显示器：flex；
弯曲方向：行；
柔性包装：无包装；
证明内容：中心；
对齐项目：居中；
}
.中排{
最小宽度：100px；
文本对齐：居中；
}
.中间行：非（：类型的最后一行）{
右边框：1px实心#ccc；
}
十一,
正文
二十二
正文
三十三
正文
44
正文
正文{
背景色：#edf1f5；
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
.主排{
背景：#ffffff；
填充：25px；
边缘顶部：30px；
左侧填充：15px；
边缘底部：30px；
左边距：30px；
宽度：93%；
高度：60px；
显示器：flex；
弯曲方向：行；
柔性包装：无包装；
证明内容：中心；
对齐项目：居中；
}
.中排{
最小宽度：100px；
文本对齐：居中；
}
.中间行：非（：类型的最后一行）{
右边框：1px实心#ccc；
}
十一,
正文
二十二
正文
三十三
正文
44
正文