Prower – 记录成长历程

两侧背景自动延伸的CSS实现方法

方法来源于土豆网的导航，在这里纪录一下实现的思路。

主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的，通过position:absolute将需要平铺的背景层叠在另一背景上，这样即可以实现同一位置的两个背景，再使用z-index将内容提升到最高阶显示。

<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”http://www.prower.cn/category/internet”>互联网谈</a></li>
<li><a href=”http://www.prower.cn/category/interaction”>交互设计</a></li>
<li><a href=”http://www.prower.cn/category/technic”>技术言论</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>

继续阅读 »

取巧的边框等高

左右结构是平常页面中最经常看到的结构，简洁一些的页面就会使用边框将左右两边隔开，但往往由于左右两边的内容可能是不等高的，所以就会有一高一低的现象。这个时候不管是给A写个边框还是给B写个边框，都会有高低不平，解决这个边框的高低不平之前有看过很多解决方法，但总的来说有些复杂，其实有一种取巧的方法就可以做到，那就是利用CSS属性中的负值。

比如这个示例图中的边框，取一个DIV将A、B两部分都包容起来，然后写border：1px solid #000;再给A容器写右边框border-right:1px solid #000;B容器也写边框border-left:1px solid #000;这样不管哪边高哪边低，都会保证起码有一条边框线是从头到底的。

但这样两条边框线就会造成重复，于是可以给B容器写margin-left:-1px;这样让两条边框重叠在一起，即可解决边框重复的问题。

PS:回头一看，写了个这么囧的日志，算了，既然写了就发了吧。