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

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

时间: 2024-09-28 12:53:27

滑动门左右布局的重新理解的相关文章

JS实现同一个网页布局滑动门和TAB选项卡实例_javascript技巧

本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡.分享给大家供大家参考.具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体

对css滑动门技术的一些总结和归纳

css 前些天加了一个设计群,里面一帮人都在嚷嚷要学css,但是不知道从哪里入手,于是我就在群里随便嘀咕了一句"哈哈,我是高手...." 结果引来骂声无数,虽然我心里不服,不过还是承认自己的css功底不够,除了布局/文字/链接这些简单的处理之外,其他的一些行为基本不会. 其中有个人说"如果你是高手,那你就详细介绍一下css滑动门技术",这句话把我刺激了,于是我连夜从网上搜罗了一些关于css滑动门技术的东西,并且自己做了一个滑动门,事实上在学习css滑动门技术之前,我

CSS滑动门技术的简单应用

今天收到袁马飞读者的一个问题,我觉得比较有价值,可能不少学习CSS的读者都会遇到相似的问题.因此这里详细讲解一下. 他的问题是: " 我是一个热爱CSS的读者,你们写的书我都看完,也跟着做完了!可是我有一个问题,就是你们书本上没有介绍到的.我画了一个TOP图片,可是左边有一个花纹,右边也有一个花纹,中间还有一张底图图片, 还有文字标题,我不知道怎样用CSS定义的啊! 所以就要请教一下你们了! " 我理解他的问题是希望在标题文字的下面有背景图像,比如这样: 前沿视频教室 对于这样的标题,

CSS中的滑动门技术

css 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素.在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用. 标

100%点击区的滑动门

学习标准的朋友,一般都会在学习的过程中接触到CSS滑动门技术,或许大家也都看过这篇文章<CSS中的滑动门技术>,如果你还没接触过或还没看过上文或有点忘记内容,也没关系,可以点击上面的文章链接,先了解或温习一遍. 在<CSS中的滑动门技术>一文中的滑动门例子,大家仔细实验,或许已经发现,链接区有9像素的盲点无法点击,而且在IE下,只能点击文字部分大小,不能点击整个按钮区块.而我们或许期望的是整个按钮区块都可以点击,并且不允许有盲点存在. 那我们又该如何去实现呢?下面我们一起来探讨一些

CSS中的滑动门技术研究

css 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素.在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用. 标签导航栏就是其中的一个例子.过去,我们频繁的使用这些标签,并已成为了一种非常流行的站点导航方式.现今,在CSS已被广泛支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标签导航栏来.你也许知道CSS可以用来"驯服"无

使用框架和滑动门技术进行网页设计

以前看过一些类似的文章,但这些文章文字在理论上阐述得比较多,没有从技术角度来分析和实现滑动门效果,前段时间心血来潮对此作了一番专门的研究,这里就把我的所得奉献给大家. 一.什么是滑动门技术? 导航按钮 如上图,简单地说,滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化,从而区别于该组的其他导航按钮,提示给操作者,当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容.这种效果的一大好处在于,在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类,同时给人以

CSS的滑动门技术研究

  在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素.在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用. 标签导航栏就是其中的一个例子.过去,我们频繁的使用这些标签,并已成为了一种非常流行的站点导航方式.现今,在CSS已被广泛支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标签导航栏来.你也许知道CSS可以用来"驯服"无序的

CSS中的滑动门技术_CSS/HTML

作者:nobita 2005-5-8 9:39:31ISSN: 1534-0295. 20 October 2003 – Issue No. 160 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根