css样式层叠的应用

今天做了一个专题页,应用到了css的特殊性和继承。其实叠层样式就是通过继承和特殊性来实现的。

代码逻辑结构如下:

div.content>(div.bgb.con1+div.bgb.con2)

 解释:

1.设计图是一个年货专场,分为自提商品和快递商品两块。代码中用con1和con2来表示。自提商品和快递商品块中都有背景。

2.公司专题页有专门的模板,专题中的商品背景都是白色的。

3.设计图中给出一个固定高度的渐变背景。但是在自提和快递容器中存放的商品个数是不确定的。

给出的解决方案是:

1.将一整个渐变背景都放在自提类商品中,渐变到一定距离,下面就用纯色。

2.快递类商品继续用纯色。

因为专题页中很多都是公用样式,不能去删除那些样式,只能在私有的样式表中加样式,通过层叠来覆盖,代码如下:

原来的样式:

.bgb{ background:#fff;}

新加的样式:

.content{ background:url(img/ny_goods_con.jpg) repeat-y; }
.con1{ background: url(img/ny_goods_con1.jpg) no-repeat;}
.con2{ background:url(img/ny_goods_con.jpg) repeat-y; }

 这样一来:

1. .con1 .con2会覆盖.bgb的样式(根据出现顺序)

2.因为ny_goods_con1.jpg是有高度的,当存放的商品超出背景高度的时候,就会显示.content的背景色。(注意:这个不是继承父亲的背景色,而是因为默认的背景颜色是透明的,因为超出部分没有背景色,所以就看到了父亲的背景。再注意:超出部分不会显示.bgb的背景色,因为.bgb已经被.con给覆盖了。)

3.要给.con2设置背景。如果你觉得让他直接透过父亲的颜色,那你就错了,因为如果不给.con2设置背景,那么.bgb就会生效。

最后的专题页的效果如下:2013新春年货囤起来

posted @ 2013-01-08 23:12  snowinmay  阅读(267)  评论(0编辑  收藏  举报