滑动门左右布局的重新理解_css

css中的滑动技术对于初学者来说是个比较新鲜的话题，对于文中图片的左右布局方式笔者从自己理解的角度重新做出了以下阐释。

图片分为左、右两部分。在右图中，放入文字和链接，随文字的不同做滑动。而左图则大小不变。

那么我们先在li的定义中固定左图位置，即设置左图为背景且左上对齐：background:url(“left.gif”) no-repeat left top;

为了使右图能与左图（左图宽度大小为9px）紧密衔接，且不重叠，设置li的左内边距为9px：padding:0 0 0 9px;

#header li { float:left; background:url(“left.gif”) no-repeat left top; margin:0; padding:0 0 0 9px; }

右图定义在子元素a里，而子元素a包含在父元素li内，那么子元素a即拥有离左边距9px，也就是子元素a从左图的右边界位置开始，那么我们设置右图为子元素a的背景，且，右上对齐： background:url(“right.gif”) no-repeat right top;

设置子元素a中文字的边距：padding:5px 15px 4px 6px; （为了使文字在li中的位置居中对齐，则设置子元素a中的左内边距为15px-9px=5px。

#header a{ display:block; background:url(“right.gif”) no-repeat right top; padding:5px 15px 4px 6px; }