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>

  • 相关阅读:
    Java简单获取当前时间
    基EmguCv/OpenCv的零件的缺陷检测
    cURL实现模拟登陆+抓取数据
    Learnjava--色子点数概率(转)
    java读写txt文件
    java jdk1.8连接sql server数据库
    简单随机选人网站设计
    封装cURL工具类
    在Linux下安装PHP的curl扩展
    Jsp四种变量作用范围
  • 原文地址:https://www.cnblogs.com/yingxi0/p/8110293.html
Copyright © 2011-2022 走看看