/**顶部部分*/
.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:; }
/*底部部分*/
.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; width: 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="width: 300px; height: 200px;">
这里显示内容
</div>
</div>
</div>
</div>
<div class="con-bl">
<div class="con-br">
<div class="con-bc"></div>
</div>
</div> </div>

div box container随主体内容自动扩展适应的实现的更多相关文章

  1. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  2. 设置靠近 水平居中的主体内容Div 的 左侧位置固定的Div

    示例效果: 1.主体内容的divMain 水平居中: 2.divLeft 靠近divMain ,位置固定,不随垂直滚动条而动: 相关代码: <html> <head runat=&q ...

  3. div高度根据内容自动增大

    1.很多时候我们希望容器高度能够自适应内部元素的变化,需要用到min-height属性. 2.有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元 ...

  4. 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!

    转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11     ...

  5. OpenStack 企业私有云的若干需求(2):自动扩展(Auto-scaling) 支持

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  6. Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  7. Linux nl --让输出的文件内容自动加上行号

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  8. PHPStrom 里修改Emmet对php的自动扩展

    PHPStrom 7.1.3 Emmet 想必大家都比较清楚了.Emmet有个特点,对于匹配不到的符号,仍然会自动扩展为标签的形式,比如我输入aaaa,然后按tab,会自动扩展为<aaaa> ...

  9. 个人永久性免费-Excel催化剂功能第82波-复制粘贴按源区域大小自动扩展收缩目标区域

    日常工作中,复制粘贴的操作,永远是最高频的操作,没有之一,在最高频的操作上,进行优化,让过程更智能,比一天到晚鼓吹人工智能替换人的骇人听闻的新闻来得更实际.此篇带来一点点的小小的改进,让日后无数的复制 ...

随机推荐

  1. jquery serialize()、serializearray()已经$.param方法

    serialize: 序列表表格内容为字符串,用于 Ajax 请求.可以对整个form,也可以只针对某部分. HTML 代码: <p id="results">< ...

  2. 在Linux下安装PHP过程中,编译时出现错误的解决办法

    在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决办法 configure: error: libjpeg.(a ...

  3. DB2导出脚本,重新建立数据库

    在做项目的时候,我们经常会涉及到数据库的迁移 所以我们需要导出 db2数据的建库脚本,存储过程脚本,函数脚本, 我是这么做的 windows键---cmd---进入命令-----db2cmd----进 ...

  4. php_sapi_name详解

    php_sapi_name : — 返回 web 服务器和 PHP 之间的接口类型. 返回描述 PHP 所使用的接口类型(the Server API, SAPI)的小写字符串. 例如,CLI 的 P ...

  5. ubuntu14升级到15后遇到的问题

    ubuntu14的unity坏了,于是就找了个镜像升级到15.但是升级完android开发环境出了点问题.. 1:Picked up JAVA_TOOL_OPTIONS: -javaagent:/us ...

  6. 【巩固】CSS3的3D动画 ——3D旋转(1)

    最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...

  7. gradle大体内容

    buildscript { repositories { mavenCentral() } dependencies { classpath 'com.android.tools.build:grad ...

  8. Chapter7: question 49 - 50

    49. 把字符串转换为整数 很多细节需要注意.(空格,符号,溢出等) Go: 8. String to Integer (atoi) 50. 树种两个结点的最低公共祖先 A. 若是二叉搜索树,直接与根 ...

  9. mac 使用技巧 (实时更新)

    一.部分快捷键. 这个在网上有一大堆,不过笔者认为,还是应该看个人习惯和使用环境吧.如果用得顺手,那就是快捷键,如果用得不顺手,那应该称其为“辅助键”吧. 下面介绍几个常用的快捷键: 1.截图. 屏幕 ...

  10. 2016年11月26号随笔(关于oracle数据库)

    今天写了几个小时的sql语句,一开始我并没有思路,有思路便开始写. 首先我查询了入库表中的3级单位下的各个网点的入库信息,找到这些信息后,我又去入库明细表中查询入库的详细信息 找到了我要的把捆包箱的各 ...