您的位置：首页 > 其它

完全自适应的单色或单线圆角框

2010-05-16 16:48 85 查看
完全自适应的单色或单线圆角框

先给大家看下最终的效果：



实现单色或者单线圆角框完全自适应，使用切下的图片的四角。切开的图片如下图所示：



接下来，看以实现的原理：首先采用水平自适应的方法，使左上、右上部分做到宽度自适应。用同样的方法，使左下、右下部分也可以自适应宽度，这就完成了水平自适应部分。然后在上下两部分的中间加入内容部分，使用背景和边线的方法衔接顶部和底部，做到垂直自适应。

根据以上的分析，制作的页面结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>完全自适应的单色或单线圆角框</title>
<style>
.main {
width:600px;
background: #EEE;
}
.top {
height:8px;
/*padding-right:8px;*/
background:url(images/right_top.gif) no-repeat right top;
}
.top_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_top.gif) no-repeat left top;
}
.top_line {
height:7px;
margin:0 8px;
font-size:0px;
border-top:1px solid #666;
}
.bottom {
height:8px;
/*padding-right:8px;*/
background:url(images/right_bottom.gif) no-repeat right bottom;
}
.bottom_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_bottom.gif) no-repeat left bottom;
}
.bottom_line {
height:7px;
margin:0 8px;
font-size:0px;
border-bottom:1px solid #666;
}
.round_content {
padding:15px;
border-left:1px solid #666;
border-right:1px solid #666;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="top">
<div class="top_left">
<div class="top_line"></div>
</div>
</div>
<div class="round_content">这是一个单线的圆角框，可以在不同大小的浏览器窗口进行测试该样式的显示效果<br />
增加的内容<br />
增加的内容<br />
firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了，所以只认background:#ffc，看到的是黄色；
ie7前两短都能认，以最后的为准，所以最后解析是background:#ccc，看到的是灰色；
ie6三段都能认，而且“_”这个只有ie6能认，所以最后解析是_background:#000，看到的是黑色
阿门！已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。
ie8的那段兼容7的代码我也测试过了，在我现在的windos 7 测试版所带的ie8是没问题的，以后ie8正式版出来还管不管用就不知道了。
ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看
之前的内容是不是这样的标准写法 </div>
<div class="bottom">
<div class="bottom_left">
<div class="bottom_line"></div>
</div>
</div>
</div>
</div>
</body>
</html>

<style>
.main {
width:600px;
background: #EEE;
}
.top {
height:8px; /*高度必须和北京的高度一致*/
/*padding-right:8px;*/
background:url(images/right_top.gif) no-repeat right top; /*北京的属性设置*/
}
.top_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_top.gif) no-repeat left top;
}
.top_line {
height:7px; /总共8px，边框1px，剩余7px/
margin:0 8px;/*上文中蓝色的代码和本段蓝色代码二取一，即可*/
font-size:0px;/*解决ie6中空block的高度为1单位的font-size问题*/
border-top:1px solid #666;
}
.bottom {
height:8px;
/*padding-right:8px;*/
background:url(images/right_bottom.gif) no-repeat right bottom;
}
.bottom_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_bottom.gif) no-repeat left bottom;
}
.bottom_line {
height:7px;
margin:0 8px;
font-size:0px;
border-bottom:1px solid #666;
}
.round_content {
padding:15px;
border-left:1px solid #666;
border-right:1px solid #666;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航