zoukankan      html  css  js  c++  java
  • 常规布局

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

    结构很清晰!

  • 相关阅读:
    NetCore3.1,NetCore5.0让发布的时候可以展示views
    Mac配置Gradle环境变量
    [转] 聊聊OkHttp实现WebSocket细节,包括鉴权和长连接保活及其原理!
    spark hive 数据不一致 spark默认本地数据元 spark不能插入hive数据
    UnicodeDecodeError: 'utf-8' codec can't decode byte 0xb8 in position 885: invalid start byte
    hadoop+zookeeper+yarn+spark高可用主从备份启动步骤
    Java笔记
    cnblogs设置
    IC Test Note
    复制文件夹下所有文件文件名
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12215023.html
Copyright © 2011-2022 走看看