zoukankan      html  css  js  c++  java
  • div box container随主体内容自动扩展适应的实现

    /**顶部部分*/
    .con-tl{
        background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0);
        padding-left: 26px;/*padding-left的值为左边的圆角图片的宽度,必须指定**/
    }
    .con-tr{
        background:url(../images/right.png) no-repeat right 0 rgba(0, 0, 0, 0);
        padding-right: 26px;/*padding-right的值为右边的圆角图片的宽度,必须指定**/
    }
    .con-tc{
        background:url(../images/center2.png) repeat-x 0 0 rgba(0, 0, 0, 0);
        height: 40px;/*这个为中间的横向平铺图片的高度,必须指定*/
        line-height: 40px;
        overflow: hidden;    
    }
    .con-tc-title{
        color: #FFFFFF;
        float: left;
        font-size: 12px;
        font-weight: bold;
        margin-left: 5px;
    }
    /*中间部分*/
    .con-cl{
        background:url(../images/border_dian.png) repeat-y;
        padding-left: 1px;/*padding-left的值为左边的纵向平铺图片的宽度**/
    }
    .con-cr{
        background:url(../images/border_dian.png) repeat-y right 0;
        padding-right: 1px;/*padding-right的值为右边的纵向平铺图片的宽度**/
    }
    .con-cc{
        padding: 0;
        
    }
    /*底部部分*/
    .con-bl{
        background:url(../images/left.png) no-repeat 0 0;
        padding-left: 26px;/*padding-right的值为左边的圆角图片的宽度,必须指定**/
    }
    .con-br{
        background:url(../images/right.png) no-repeat right 0;
        padding-right: 26px;/*padding-right的值为右边的圆角图片的宽度,必须指定**/
    }
    .con-bc{
        background:url(../images/center2.png) repeat-x 0 0;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
    }

    HTML

    <div style="margin: 0 auto;  300px;">
        <div class="con-tl">
            <div class="con-tr">
                <div class="con-tc">
                    <div class="con-tc-title">这里是标题</div>
                </div>
            </div>
        </div>
        <div class="con-cl">
            <div class="con-cr">
                <div class="con-cc">
                    <div style=" 300px; height: 200px;">
                        这里显示内容
                    </div>
                </div>
            </div>
        </div>
        <div class="con-bl">
            <div class="con-br">
                <div class="con-bc"></div>
            </div>
        </div>
    
    </div>
  • 相关阅读:
    Android内存泄漏检测利器:LeakCanary
    android webview js交互 第一节 (java和js交互)
    Android Studio JNI/NDK 编程(二) Windows 下环境搭建 demo 开发
    Android Volley 框架的使用(一)
    Android 6.0动态添加权限
    Android中使用OKHttp上传图片,从相机和相册中获取图片并剪切
    Dom对象的研究
    js 数据类型具体分析
    js 1.变量提升 2.条件语句 3.循环语句 4.加号+的使用
    js 的运算
  • 原文地址:https://www.cnblogs.com/zjhs/p/3557229.html
Copyright © 2011-2022 走看看