常规布局

Posted 2021-03-15 jiqing9006

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;
                    }
                }
            }
        }
    }

结构很清晰！