网络编程
位置：首页>> 网络编程>> 网页设计>> css2.1实现多重背景和边框效果（3）

css2.1实现多重背景和边框效果（3）

作者：linxz　来源：小志博客　发布时间：2010-06-23 19:02:00　

标签：背景,边框,css

示例代码：浮动的虚假列

另外一个应用是创建一个不需要图片或者额外嵌套容器的等高列（小志注：这里展示的是三列等高的效果）。

这个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;
}

 

第一页 上一页 1 2
3
4 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com