css2.1实现多重背景和边框效果(3)
作者:linxz 来源:小志博客 时间:2010-06-23 19:02:00
示例代码:浮动的虚假列
另外一个应用是创建一个不需要图片或者额外嵌套容器的等高列(小志注:这里展示的是三列等高的效果)。
这个HTML结构非常简单。我曾经依赖于CSS2.1选择器使用特定类名在每一个子元素的div标签上,但IE6不支持。假如不需要IE6的支持的话,并不需要指定类名。
[Copy to clipboard]View Code XML1
<div id="faux">
<div class="main">[content]</div>
<div class="supp1">[content]</div>
<div class="supp2">[content]</div>
</div>
对这个拥有百分比的容器再次设置相对定位以及正值的z-index。应用overflow:hidden;主要是为了包含其子元素浮动后的容器(小志注:也就是清除浮动的一种方式),以及隐藏溢出的伪元素。背景颜色将作为其中一列的背景色。
Copy to clipboard]View Code CSS1
#faux {
position:relative;
z-index:1;
width:80%;
margin:0 auto;
overflow:hidden;
background:#ffaf00;
}
通过定义子元素的div标签为相对定位之后,还可以控制单独列的位置。
Copy to clipboard]View Code CSS1
#faux div {
position:relative;
float:left;
width:30%;
}
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}
另外百分百高度的两列被建立于定位的位置和定位属性的伪元素,同时设置了背景色。这些背景可以用(重复的)图片代替,如果有需要的话。
Copy to clipboard]View Code CSS1
#faux:before,
#faux:after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:33.333%;
width:100%;
height:100%;
background:#f9b6ff;
}
#faux:after {
left:66.667%;
background:#79daff;
}
标签:背景,边框,css
0
投稿
猜你喜欢
ie和火狐兼容问题
2010-07-02 12:50:00
推荐个辅助软件FastStone Capture
2008-12-23 13:23:00
MySQL优化全攻略--相关数据库命令
2008-11-01 17:03:00
如何使用共享连接减少空闲的连接数?
2010-05-16 15:15:00
SQL语句练习实例之五 WMS系统中的关于LIFO或FIFO的问题分析
2011-11-03 16:59:59
css中absolute与relative的区别
2007-11-17 08:04:00
网页内容呈现建议十条
2007-11-06 13:24:00
网站分析方法系列二——分析页面区块价值
2011-01-06 12:32:00
我的css样式写法总结
2009-01-18 13:04:00
国际上十四个优秀网页设计审核站
2007-09-30 20:18:00
SQL Server索引管理的六大铁律
2009-03-25 14:05:00
Oracle数据库游标使用大全
2008-03-04 18:24:00
将ASP记录集输出成n列的表格形式显示的方法
2011-04-08 10:51:00
SQL Server保障数据一致性的法宝
2008-12-26 15:21:00
SQL Server 获取插入记录后的ID(自动编号)
2009-09-10 11:31:00
浅谈信息可视化
2010-03-10 10:55:00
推荐给大家看的设计书
2009-02-23 12:17:00
Smush it - 一款图片压缩的Firefox插件,很好,很强大!
2009-04-12 20:09:00
提高CSS代码的可读性
2008-05-11 18:59:00
MySQL中与NULL值有关的疑难问题
2008-11-24 12:47:00