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;
}
0
投稿猜你喜欢
- <％'使用说明'Dim a'Set a=new CreateExce
- 更轻量－ 出色的颗粒化模块，子模块划分；－ 延迟加载；－ 强调代码重用（公共基类、插件、扩展）；更易用－ 统一的API；－ 便利（each,
Next()方法在中间件中调用 next() 方法，会从 next() 方法调用的地方跳转到Handler函数Handler函数执行完成，若- 我们可以利用Session对象来进行注册验证。Session对象会帮我们把某一用户的信息保留下来，让后续的网页读取。我们就可以在用户注册成功
- digo工具地址：https://github.com/werbenhu/digo特性使用注释中的注解自动代码生成自动检测循环依赖编译时期依
- 下载编译器protoc两种方式：1、使用google官方protoc下载地址:https://github.com/google/proto
- 最近想抢冰墩墩的手办和钥匙圈，但是同志们抢的速度太快了，无奈，还是自己写脚本吧。添加火狐浏览器插件Omnibug是一个插件，可以简化web度
- 应用 MySQL 时，会遇到不能创建函数的情况。出现如下错误信息：ERROR 1418 : This function has none o
- 本文实例讲述了Pytorch实现的手写数字mnist识别功能。分享给大家供大家参考，具体如下：import torchimport torc
- 实战目的封装一个自定义的input组件,只适用于 input元素type属性为text或password.实战效果核心思想准备: 需要两个文
- 本文实例讲述了Go语言的队列和堆栈实现方法。分享给大家供大家参考。具体如下：golang,其实我的实现是利用container/list包实
- 前言当我们开始准备数据建模、构建机器学习模型的时候，第一时间考虑的不应该是就考虑到选择模型的种类和方法。而是首先拿到特征数据和标签数据进行研
- 本文实例讲述了kNN算法python实现和简单数字识别的方法。分享给大家供大家参考。具体如下：kNN算法算法优缺点：优点：精度高、对异常值不
- 代码之余，将代码过程重要的一些代码段备份一下，如下的代码内容是关于Python从ftp服务器下载文件的的代码，希望能对小伙伴有用途。#cod
- 先来看一个简单的方法。在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页
- Golang 性能基准测试Golang 中的性能基准测试是使用标准库 testing 来实现的，编写性能测试代码是很容易的：创建性能测试文件
- 本文实例讲述了Python multiprocess pool模块报错pickling error问题解决方法。分享给大家供大家参考，具体如
- MYSQL官方提供了Installer方式安装MYSQL服务以及其他组件，使的Windows下安装，卸载，配置MYSQL变得特别简单。1.
- 这篇文章主要介绍了python plotly画柱状图代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需
- 基本开发环境· Python 3.6· Pycharm相关模块使用目标网页分析输入想看的小说内容，点击搜索这里会返回很多结果，我只选择第一个
