常规布局
html
<div class="feature">
<div class="feature-container">
<div class="feature-title">
方案特点
</div>
<div class="feature-content">
<div class="feature-item">
<div class="item-img">
<img src="/Index/Index/image/projectchain/gxn.png">
</div>
<div class="item-title">
高性能
</div>
<div class="item-content">
TPS可达到1w,系统延时300ms,
链底层平台,为商业区块链创造全新价值。
</div>
</div>
<div class="feature-item">
<div class="item-img">
<img src="/Index/Index/image/projectchain/gaq.png">
</div>
<div class="item-title">
高安全
</div>
<div class="item-content">
多级加密机制为数据安全层层把控,
分区共识机制提供物理级数据隔离。
</div>
</div>
<div class="feature-item">
<div class="item-img">
<img src="/Index/Index/image/projectchain/gky.png">
</div>
<div class="item-title">
高可用
</div>
<div class="item-content">
RBFT共识算法支持节点动态准入,
数据失效恢复机制保障节点稳定共识。
</div>
</div>
<div class="feature-item">
<div class="item-img">
<img src="/Index/Index/image/projectchain/kkz.png">
</div>
<div class="item-title">
可扩展
</div>
<div class="item-content">
模块化微服务架构,实现区块链系统模块横向
扩展,满足业务增长的扩容需求。
</div>
</div>
</div>
</div>
</div>
css
.feature {
background-color: #F6F8FC;
overflow: hidden;
.feature-container {
margin:0 auto;
margin-top: 100px;
margin-bottom: 120px;
width: 1200px;
//border: 1px solid red;
.feature-title {
font-size: 30px;
color:#222222;
font-weight: bold;
text-align: center;
}
.feature-content {
margin-top: 50px;
display: flex;
justify-content: space-between;
.feature-item {
width: 260px;
//border: 1px solid blue;
.item-img {
width: 260px;
display: flex;
justify-content: center;
img {
width: 60px;
height: 60px;
}
}
.item-title {
font-size: 18px;
font-weight: bold;
margin-top: 23px;
margin-bottom: 20px;
text-align: center;
}
.item-content {
color:#222222;
font-size: 14px;
line-height: 32px;
text-align: center;
}
}
}
}
}
结构很清晰!