/**顶部部分*/
.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. ASP.NET MVC+EF5 开发常用代码

      Asp.Net Mvc,EF 技术常用点总结 1.Asp.Net MVC a)获得当前控制器名和当前操作的名称(action) 1.Action 中 RouteData.Values[" ...

  2. 教你如何在word中像LaTex那样打出漂亮的数学公式

    转载自: http://blog.csdn.net/ibingow/article/details/8613556 记得很久以前在word里打数学公式很痛苦,要用鼠标点啊点,效率奇低,包括像MathT ...

  3. nodejs初探(三)实现一个简单的socket交互

    看一下nodejs中通过socket和客户端交互的最简单例子 //  Sever --> Client 的单向通讯 var net = require('net'); var chatServe ...

  4. mysql 数据库乱码解决

    mysql 数据库乱码解决, 进入前加入 set names 'utf8'  即可.

  5. [ActionScritp 3.0] 使用LocalConnection建立通信

    包 flash.net 类 public class LocalConnection 继承 LocalConnection → EventDispatcher → Object 语言版本:  Acti ...

  6. apache2 tomcat https配置-被忽悠进了CentOS 6

    因为需要让ios应用可以绕过appstore,要找个https的地方放ipa,决定使用已有http server. 首先需要说明的是,apache可以通过反向代理方式将用户的https分发到tomca ...

  7. java变量命名规则

    1.      变量必须以字母,下划线”_”或”$”符号开 2.      变量可以包括数字,但不能以数字开 3.      除了下划线”_”和”$”符号以外,变量名不能包含任何特殊字符 4.     ...

  8. Archlinux添加MP3播放器

    方法1: # pacman -S mplayer From: http://www.linuxdiyf.com/viewarticle.php?id=89207 用mplayer循环播放音乐:mpla ...

  9. 关于Excel导入导出的用例设计

    目前,为方便操作,很多系统都会增加批量导入导出的功能.文件导入导出一般格式都是excel.由于用户直接在excel在填写内容,无法控制填写的格 式,加上excel解析比较困难,所以一般涉及到excel ...

  10. c# webform网站图片另存代码

    好辛苦生成了二维码,然后要实现点击“保存图片”,弹出选择路径进行保存的效果. look: string qrcodeurl = ""; string username = &quo ...