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:; }
/*底部部分*/
.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随主体内容自动扩展适应的实现的更多相关文章
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 设置靠近 水平居中的主体内容Div 的 左侧位置固定的Div
示例效果: 1.主体内容的divMain 水平居中: 2.divLeft 靠近divMain ,位置固定,不随垂直滚动条而动: 相关代码: <html> <head runat=&q ...
- div高度根据内容自动增大
1.很多时候我们希望容器高度能够自适应内部元素的变化,需要用到min-height属性. 2.有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元 ...
- 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!
转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11 ...
- OpenStack 企业私有云的若干需求(2):自动扩展(Auto-scaling) 支持
本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...
- Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- Linux nl --让输出的文件内容自动加上行号
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- PHPStrom 里修改Emmet对php的自动扩展
PHPStrom 7.1.3 Emmet 想必大家都比较清楚了.Emmet有个特点,对于匹配不到的符号,仍然会自动扩展为标签的形式,比如我输入aaaa,然后按tab,会自动扩展为<aaaa> ...
- 个人永久性免费-Excel催化剂功能第82波-复制粘贴按源区域大小自动扩展收缩目标区域
日常工作中,复制粘贴的操作,永远是最高频的操作,没有之一,在最高频的操作上,进行优化,让过程更智能,比一天到晚鼓吹人工智能替换人的骇人听闻的新闻来得更实际.此篇带来一点点的小小的改进,让日后无数的复制 ...
随机推荐
- ASP.NET MVC+EF5 开发常用代码
Asp.Net Mvc,EF 技术常用点总结 1.Asp.Net MVC a)获得当前控制器名和当前操作的名称(action) 1.Action 中 RouteData.Values[" ...
- 教你如何在word中像LaTex那样打出漂亮的数学公式
转载自: http://blog.csdn.net/ibingow/article/details/8613556 记得很久以前在word里打数学公式很痛苦,要用鼠标点啊点,效率奇低,包括像MathT ...
- nodejs初探(三)实现一个简单的socket交互
看一下nodejs中通过socket和客户端交互的最简单例子 // Sever --> Client 的单向通讯 var net = require('net'); var chatServe ...
- mysql 数据库乱码解决
mysql 数据库乱码解决, 进入前加入 set names 'utf8' 即可.
- [ActionScritp 3.0] 使用LocalConnection建立通信
包 flash.net 类 public class LocalConnection 继承 LocalConnection → EventDispatcher → Object 语言版本: Acti ...
- apache2 tomcat https配置-被忽悠进了CentOS 6
因为需要让ios应用可以绕过appstore,要找个https的地方放ipa,决定使用已有http server. 首先需要说明的是,apache可以通过反向代理方式将用户的https分发到tomca ...
- java变量命名规则
1. 变量必须以字母,下划线”_”或”$”符号开 2. 变量可以包括数字,但不能以数字开 3. 除了下划线”_”和”$”符号以外,变量名不能包含任何特殊字符 4. ...
- Archlinux添加MP3播放器
方法1: # pacman -S mplayer From: http://www.linuxdiyf.com/viewarticle.php?id=89207 用mplayer循环播放音乐:mpla ...
- 关于Excel导入导出的用例设计
目前,为方便操作,很多系统都会增加批量导入导出的功能.文件导入导出一般格式都是excel.由于用户直接在excel在填写内容,无法控制填写的格 式,加上excel解析比较困难,所以一般涉及到excel ...
- c# webform网站图片另存代码
好辛苦生成了二维码,然后要实现点击“保存图片”,弹出选择路径进行保存的效果. look: string qrcodeurl = ""; string username = &quo ...