css圆角box(宽度自适应)(依据三列布局修改,ie6有bug)

最新推荐文章于 2024-04-03 11:44:43 发布
最新推荐文章于 2024-04-03 11:44:43 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML和WEB CSS 文章标签： ie css class div url html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TangZhongxin/article/details/5099184
版权

宽度自适应的div+css的BOX
参考:
http://space.cnblogs.com/group/topic/3617/
http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/

一、效果：

20091229152705500

二、素材：

box

三、代码：

<style type="text/css">
.box{}
.box .box_tit{position:relative;}
.box .box_tit .box_tit_1{position: absolute;top: 0; overflow: hidden; height: 100%;left: 0;   right:auto;width: 2px;}
.box .box_tit .box_tit_2{position: absolute;top: 0; overflow: hidden; height: 100%;left: 2px; right:2px;            }
.box .box_tit .box_tit_3{position: absolute;top: 0; overflow: hidden; height: 100%;left: auto;right:0;   width: 2px;}

.box .box_tit{height:29px; line-height:29px; vertical-align:middle;}
.box .box_tit .box_tit_1{background:url("box.png") left 0px;width:2px;}
.box .box_tit .box_tit_2{background:url("box.png") left -30px; padding-left:10px;}
.box .box_tit .box_tit_3{background:url("box.png") right 0px;}

.box .box_con{ border:solid 1px #f6b54f; border-top:0; min-height:200px; padding:10px; }

* html body .b2bbox{ /*IE6 hack*/
padding: 0 2px 0 2px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
/*ie6 bug*/
}
* html .tit2{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>

<body>

<div class="box">
    <div class="box_tit">
        <div class="box_tit_1"></div>
        <div class="box_tit_2">标题</div>
        <div class="box_tit_3"></div>
    </div>
    <div class="box_con">
        <ul>
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
        </ul>
    </div>
</div>

</body>

TangZhongxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css/div/兼容性及常见bug
qq_45271323的博客
05-13 843
清除浮动的几种方法 首先，为什么会有清除浮动这一说法？ 当有一个父元素里面包含一个子元素或者多个子元素时，给子元素设置浮动，那么会父元素的高度就为0啦，也就是我么常说的高度塌陷。如何解决？ 给父元素添加height 原理：如果父元素没有定义高度，那么父元素的高度完全由子元素撑开，给他定义了高度，就解决了父元素无法自动获取到高度的问题。 在标签结尾处加空标签 ，给空标签添加clear:both 原理：添加了空标签，利用CSS提高的clear:both清除浮动，让父级元素能自动获取到高度。**优点：*
CSS网页布局入门教程8：三列浮动中间列宽度自适应
10-30
CSS网页布局入门教程8：三列浮动中间列宽度自适应 在本篇教程中，我们将探讨如何使用CSS实现三列浮动中间列宽度自适应的网页布局。这种布局方式需要满足以下要求：左栏固定宽度，居左显示；右栏固定宽度，居右显示...
CSS自适应宽度圆角按钮
12-10
CSS自适应宽度圆角按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS自适应宽度圆角按钮</title> <style> *{margin:0; padding:0;} body{padding:10px; font-size:12px;} h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;} a{background:url(41205957519.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;} a:hover{background:url(41205957519.gif) left 30px;height:30px;} a span{background:url(41205957519.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;} a:hover span{background:url(41205957519.gif) right 30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; } </style> </head> <body> <h1><strong>CSS自适应宽度圆角按钮</strong></h1> <a href="#"><span>首页</span></a> <a href="#"><span>不是首页</span></a> <a href="#"><span>他也许是首页</span></a> <a href="#"><span>但他一定不是首页</span></a> <a href="#"><span>好了，就这样把。别扯了~</span></a> </body> </html>
display:box自适应宽度
weixin_30294709的博客
05-14 217
一个外层div内嵌2个div,左边div宽度定死，右边自适应宽度，右边的宽度要填充满 <li class="law-case-detail"> <div style="width:70px;">案情简介</div> <textarea class="comment" placeholder="描述信息..."></texta...
css圆角box(宽度自适应)(百度知道挖出)
挨踢笔记
01-07 1048
css圆角box(百度知道挖出) 1.css .zhidao_box {     position: relative;     width: 100%; } .zhidao_box .rg_1, .zhidao_box .rg_2, .zhidao_box .rg_3 {     height: 1px;     font-size: 0px;    
三行两列左右列自适应高度的圆角布局
weixin_30491641的博客
04-02 94
左右列自适应高度的布局应用很广泛, 不使用脚本纯CSS实现的话, 一般是给内容区内边距设一个很大的值, 把左右列撑开, 然后给外边距也设一个同样大小的负值, 最后把父容器溢出隐藏就可以了, 有边框的需求的话, 还要在父容器后面加一个相同结构的底边. 如果要求边框为圆角的话其实也很简单, 用九宫格或者滑动门做一个圆角框往里面填即可, 现在我们用九宫格来实现… 先重置一下默认样式 Reset ...
CSS完全兼容IE6、IE7、IE8、IE9和firefox方法【重要】
sunsineq的专栏
06-11 888
1、圆角 左上角、右上角、右下角、左下角（顺时针） /* Gecko browsers */ -moz-border-radius: 20px 20px 20px 20px; /* Webkit browsers */ -webkit-border-radius: 20px; /* W3C syntax */ border-radius:20px; 2、 (十年积累)div+css完全兼容ie6 ie7 IE8 IE9和firefox方法 简单方法： IE6,IE7,IE8,FF的兼容方法(...
10.css精灵（Sprites）&滑动门&圆角及其扩展
无足舞者
02-06 479
滑动门与圆角 什么是滑动门 ? 1. 滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。 详解 难题 1. 假设需要实现下图中的菜单   分析 1. 难点1 a) 每个菜单的左上角和右上角都是圆弧型状的 2. 难点2 a) 每个菜单的长度都不相同 解决 三层嵌套 思路 1. 将一个菜单按钮看成3部分，用PS切
CSS面试题
rhcjqmm666的博客
12-01 300
CSS面试题
前端学习＜三＞CSS进阶——05-CSS进阶的知识 汇总
最新发布
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
04-03 935
CSS进阶的知识 汇总
CSS网页布局入门教程6：左列固定，右列宽度自适应
10-30
CSS网页布局入门教程6：左列固定，右列宽度自适应
CSS网页布局入门教程5：二列宽度自适应
10-30
CSS网页布局入门教程5：二列宽度自适应 本教程主要讲解了如何使用CSS来实现二列宽度自适应的网页布局。通过对CSS代码的解析和分析，我们可以学习到如何使用百分比宽度值来实现自适应布局，并且了解盒模型的概念及其...
CSS三列布局两端固定宽度中间自适应
09-25
CSS三列布局走出HTML布局阴影，两端固定宽度，中间自适应结构，下面有个不错的示例，大家可以参考下
CSS完全兼容IE6、IE7、IE8、IE9和firefox方法 - 青羽 - 博客园
HappyRocking的专栏
09-19 464
1、圆角 左上角、右上角、右下角、左下角（顺时针）  /* Gecko browsers */  -moz-border-radius: 20px 20px 20px 20px;  /* Webkit browsers */  -webkit-border-radius: 20px;  /* W3C syntax */  border-radius:20px; 2、
Word字体的字号与磅值(pt)对应
热门推荐
挨踢笔记
04-23 2万+
Word字体的字号与磅值(pt)对应关系 字号码    磅值(pt) 八号    5 七号    5.5 小六    6.5 六号    7.5 小五    9 五号    10.5 小四    12 四号    14 小三    15 三号    16 小二    18 二号    22 小一
用一个字段保存多个图片或文件路径
挨踢笔记
02-09 8779
有时我们表中的一个产品记录，可能没有图片，也可能有一个或多个图片，怎么保存这些信息呢？难道用10个或更多的字段来保存，但大多数行它们都是空的呀，怎么办？ 利用Windows下文件名中不能用的非法字符，Url中不能用的非法字符，在数据库中用一个字段中保存全部图片路径。 （1）、Windows下文件名非法字符： /  /  :  *  ?  " 
HTML全面深入学习-select的optgroup分组
挨踢笔记
12-31 6500
看：select>    optgroup label="碱性金属">        option>锂 (Li)option>        option>纳 (Na)option>        option>钾 (K)option>    optgroup>    optgroup label="卤素">        option>氟 (F)option>
注册时检测用户是否已存在(自定义验证控件+jQuery.Ajax)
挨踢笔记
01-10 5405
注册时检测用户是否已存在(自定义验证控件+jQuery.Ajax)本想在自定义验证控件(asp:CustomValidator)的客户端验证属性里(ClientValidationFunction)来写ajax访问的，若存在则让它的arguments.IsValid=!用户存在，但无奈ajax是异步调用，等不到它调用ClientValidationFunction的javascript函数已经
css 网格布局设置4列 宽度自适应
07-14
要使用 CSS 网格布局实现宽度自适应的 4 列布局，可以按照以下步骤进行设置： 1. 创建一个容器元素，作为网格布局的父元素： ```css .container { display: grid; grid-template-columns: repeat(auto-fit, min...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值