常规布局

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

结构很清晰!

posted @ 2020-01-19 17:49  TBHacker  阅读(236)  评论(0编辑  收藏  举报