• 常规布局


    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;
                 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 {
                         260px;
                        //border: 1px solid blue;
                        .item-img {
                             260px;
                            display: flex;
                            justify-content: center;
                            img {
                                 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;
                        }
                    }
                }
            }
        }
    

    结构很清晰!

  • 相关阅读:
    关于rollaxis与swapaxes的使用
    三角函数诱导公式、恒等变换公式
    二阶导数为什么写成 d2y/dx2 的形式
    哔哩哔哩批量合并缓存音视频利用python3+ffmpeg
    机器视觉光源选型(一)-光源颜色选择
    机器视觉光源选型(四)-环形光源
    机器视觉光源选型(三)-同轴光源
    机器视觉光源选型(二)-低角度环形光源
    机器视觉光源选型(六)-不同照明技术对比
    机器视觉光源选型(五)-圆顶光源
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12215023.html
Copyright © 2020-2023  润新知