sliding door 滑动门 总结

之前一直听说sliding door/滑动门，很多人也讨论过。今天突然有点忘了，为了加深印象，总结了其中的精华，同时也贡献给大家:

 

以tab作为实例，分为2门和3门两种方法：

 

 

sliding door 滑动门

 

source:

http://www.alistapart.com/articles/slidingdoors/

 

example:

http://www.alistapart.com/d/slidingdoors/v1/ex4.html

 

two doors method

 

two nested div

<li>

<a href="#">

Home

</a>

</li>

keypoints:

1. a

background image with the whole cruve

will have a max width because of background with

background position right

padding left x-l and right x

2. li

background image with just rounded corner (width is l)

background position left

padding left 

this method can have a Symmetrical method by switching left to right

 

three doors method

 

three nested div

<li>

<a href="#">

<div>Home</div>

</a>

</li>

keypoints:

 

1. first div 

background image with the just right corner

fixed width l

background position right

padding right l

2. second div

background image with just left corner

width l

background position left

padding left l

3. third div

background image with middle part of the original image (without corners)

no fixed width

repeat

padding 0

 

 

可惜不能上传例子，有需要的问我要啊。