滑动门左右布局的重新理解 - PlanABC - 怿飞's Blog

来源：百度文库编辑：神马文学网时间：2024/05/01 06:34:48

滑动门左右布局的重新理解
[ 2006-11-08 17:18:16 | 作者:Blank | 阅读: 1917 ]
Font Size:Large |Medium |Small
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，为什么此中的下内边距为4而不是5可参考《CSS中的滑动门技术》中的详细说明）。#header a {
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
}

滑动门左右布局的重新理解 - PlanABC - 怿飞's Blog 常用的滑动门代码重新理解教育的关键词重新理解教育的关键词逸风‘s Blog: 如何理解用户体验设计和其他概念的区别重新理解理论与实践的关系对css滑动门技术的一些总结和归纳重新理解启蒙重新理解启蒙山沟:重新理解发展的米-漠石‘s Blog 对中医经络、穴位理解与解说的重新思考 DWCS3-CSS布局之一CSS规则大纲 - cnBruce's Blog | 布鲁斯狼 DWCS3-CSS布局之二CSS规则定义 - cnBruce's Blog | 布鲁斯狼子东的菜畦:zidon‘s blog Lucene的工作原理 - HillMover‘s BLOG - xroot‘s Blog -> 猎狗的故事 xroot‘s Blog -> 经典的定理麻烦的"RavMon.exe" - 豬毛‘s blog Jserv's blog: C99 的 offsetof macro 迎迎的博客(迎迎'S Blog) Xp's Blog-研究性学习的模式群体的智慧--东行记　jiahou's　blog 生命的价值 - 黑狼's Blog