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

    结构很清晰!

  • 相关阅读:
    基于Linux C的socketEthereal程序和Package分析 (一个)
    [Firebase + PWA] Keynote: Progressive Web Apps on Firebase
    [Redux] Navigating with React Router <Link>
    [Redux] Adding React Router to the Project
    [Redux] Refactoring the Entry Point
    [Redux] Persisting the State to the Local Storage
    [Redux] Supplying the Initial State
    [PWA] Caching with Progressive libraries
    [TypeScript] Understanding Generics with RxJS
    [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12215023.html
Copyright © 2011-2022 走看看