当前位置 :| 主页>CSS布局>

滑动门左右布局的重新理解及其演示实例

来源：cssplay 作者：cssplay 时间：2008-08-29 点击：

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; }

实例运行代码框如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <title>CSS中的滑动门技术</title> <meta http-equiv="Content-Type" content="text/html; charset=zh-cn" /> <style type="text/css" media="screen"> body { background:#fff; margin:0; padding:0; color:#000; font:x-small/1.5em Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small; } html>body {font-size:small;} #header { float:left; width:100%; background:#DAE0D2 url("http://www.cssplay.org.cn/uploads/allimg/080904/2027405.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { float:left; background:url("http://www.cssplay.org.cn/uploads/allimg/080904/2026221.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a { display:block; background:url("http://www.cssplay.org.cn/uploads/allimg/080904/2026222.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } #header a:hover { color:#333; } #header #current { background-image:url("http://www.cssplay.org.cn/uploads/allimg/080904/2026223.gif"); } #header #current a { background-image:url("http://www.cssplay.org.cn/uploads/allimg/080904/2026224.gif"); color:#333; padding-bottom:5px; } </style> </head> <body> <div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <p style="margin:0; padding:1em 1em 0; clear:both;">完成此例最终效果有如下改变：</p> <ul> <li>加重标签文本</li> <li>标签文本设为棕色</li> <li>“当前”标签文本设为深灰色</li> <li>去掉下划线</li> <li>修改鼠标悬停时文本的颜色</li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

Tag：CSS布局 左右布局 滑动门 演示实例

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：利用CSS框架进行高效率的站点开发 Elements
下一篇：没有了

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例