zoukankan      html  css  js  c++  java
  • 左侧背景,右侧数据,根据数据左侧背景自适应

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <style>
    *{
    padding:0;
    margin:0;
    }
    .fl{
    float:left;
    }
    ul,li{
    list-style:none;
    }
    .box{
    1200px;
    margin:28px auto;
    overflow:hidden;
    }
    .crm_advanced,.crm_feature{
    overflow:hidden;
    display:flex;
    display:-webkit-flex;
    display:-moz-box;
    }
    .crm_advanced ul{
    1018px;
    border:1px solid #a5a5a5;
    }
    .crm_advanced ul li,.crm_feature ul li{
    height:48px;
    line-height:48px;
    font-size:14px;
    color:#333;
    border-bottom:1px solid #a5a5a5;
    padding-left:27px;
    }
    .crm_advanced ul li span,.crm_feature ul li span{
    display:inline-block;
    232px;
    }
    .crm_advanced ul .crm_last,.crm_feature ul .crm_last{
    border-bottom:none;
    }
    .crm_feature ul{
    1018px;
    border:1px solid #A5A5A5;
    border-top:none;
    }
    .advanced_feature_art{
    font-size:18px;
    color:#fff;
    text-align:center;
    128px;
    }
    .advanced_art{
    128px;
    /*line-height:490px;*/
    background:url(images/advantage.png) no-repeat;
    background-size:100% 100%;
    align-items: stretch;
    display: flex;
    justify-content: center;
    }
    .feature_art{
    128px;
    /*height:206px;*/
    /*line-height:206px;*/
    background:url(images/feature.png) no-repeat;
    background-size:100% 100%;
    align-items: stretch;
    display: flex;
    justify-content: center;
    }
    </style>
    <body>
    <div class="box">
    <div class="crm_advanced">
    <div class="fl advanced_art advanced_feature_art">
    <p style="margin:auto;">优势</p>
    </div>
    <ul class="fl">
    <li>
    <span>提高市场营销效果</span><i class="crm_s_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>为生产研发提供决策支持</span><i class="crm_s_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>提高企业的快速响应和应变能力</span><i class="crm_s_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>提高企业的快速响应和应变能力</span><i class="crm_s_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>提高企业的快速响应和应变能力</span><i class="crm_s_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>提高企业的快速响应和应变能力</span><i class="crm_s_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>改善企业服务,提高客户满意度</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>推动了企业文化的变革</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i >
    </li>
    <li>
    <span>推动了企业文化的变革</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i >
    </li>
    <li>
    <span>推动了企业文化的变革</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i >
    </li>
    <li>
    <span>推动了企业文化的变革</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i >
    </li>
    <li class="crm_last">
    <span>与QQ集成,可以快速与客户沟通</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    </ul>
    </div>
    <div class="crm_feature">
    <div class="fl feature_art advanced_feature_art">
    <p style="margin:auto;">特色</p>
    </div>
    <ul class="fl">
    <li>
    <span>个性化定制</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>销售团队自动化</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>市场营销自动化</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li>
    <span>市场营销自动化</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    <li class="crm_last">
    <span>客户分析与挖掘</span><i class="crm_k_circle"></i><i class="crm_s_circle"></i>
    </li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    20155327 2017-2018-2 《Java程序设计》第9周学习总结
    20155327《Java程序设计》第八周学习总结
    实验二 Java面向对象程序设计
    20155327 李百乾 Exp4 恶意代码分析
    20155327结对编程练习
    20155327第七周学习总结
    2017-2018-1 20155310 20155337 实验五 通讯协议设计
    # 2017-2018-1 20155337《信息安全系统设计基础》第十三周学习总结
    # 20155337 2017-2018 1 课上测试、课下作业、实验
    # 课下测试ch02
  • 原文地址:https://www.cnblogs.com/yingxi0/p/8110293.html
Copyright © 2011-2022 走看看