CSS中的滑动门技术
css 实现内容无缝连接滚动的方法
css 实现内容无缝连接滚动的方法A common method to achieve seamless scrolling of content in CSS is by using the CSS animation property. (使用CSS动画属性实现内容的无缝滚动是一种常见方法。
) This allows for smooth and continuous movement of content without any interruptions or breaks. (这允许内容平稳连续地移动，没有任何中断或断裂。
) By defining the keyframes for the animation, you can specify the exact path and duration of the scrolling behavior. (通过定义动画的关键帧，可以指定滚动行为的精确路径和持续时间。
)One key aspect of implementing seamless scrolling in CSS is to ensure that the content seamlessly loops back to the beginning once it reaches the end. (在CSS中实现无缝滚动的关键之一是确保当内容到达末尾时，能够无缝地回到开头。
) This can be achieved by carefully coordinating the animation duration with the size of the content, so that the transition from the end to the beginning is imperceptible to the user. (这可以通过仔细协调动画持续时间和内容大小来实现，以便用户无法感知从末尾到开头的过渡。
CSS伸缩布局创建可伸缩的界面
CSS伸缩布局创建可伸缩的界面CSS伸缩布局是一种基于CSS3的框架，它能够帮助开发者轻松地创建可伸缩的界面。
这种布局方式可以实现页面元素的自适应和排列，有效地解决了传统布局在不同设备或不同分辨率下显示效果差异大的问题。
本文将介绍CSS伸缩布局的基本原理和常用属性，并通过实例来展示如何创建可伸缩的界面。
一、基本原理CSS伸缩布局主要通过flexbox模型来实现。
Flexbox是一种弹性盒子模型，通过定义容器和容器内的项目之间的关系，可以实现自适应布局。
它的基本原理可以概括为以下几点：1. 容器和项目：Flexbox布局由容器和容器内的项目组成。
容器包裹着项目，并且通过设置容器的属性来定义项目的布局方式。
2. 主轴和交叉轴：容器内的项目在主轴和交叉轴方向上分布。
主轴是项目的排列方向，可以是水平方向（横向）或垂直方向（纵向），而交叉轴则与主轴垂直。
3. 项目的属性：每个项目可以通过设置自身的属性，如宽度、高度、顺序、对齐等，来实现在布局中的自适应和调整。
二、常用属性了解了CSS伸缩布局的基本原理后，下面介绍一些常用的属性来实现可伸缩的界面。
1. display: flex;该属性定义元素作为flex容器显示，并且该元素的所有子元素成为其项目。
2. flex-direction: row | column;这个属性决定了flex容器的主轴方向。
row表示水平方向（默认值），column表示垂直方向。
3. flex-wrap: nowrap | wrap | wrap-reverse;该属性决定了项目是否换行，nowrap表示不换行（默认值），wrap表示换行，wrap-reverse表示反向换行。
4. justify-content: flex-start | flex-end | center | space-between | space-around;该属性决定了项目在主轴上的对齐方式。
flex-start表示靠左对齐（默认值），flex-end表示靠右对齐，center表示居中对齐，space-between表示两端对齐，space-around表示平均对齐。
CSS实现隐藏滚动条并可以滚动内容效果（三种方式）
CSS实现隐藏滚动条并可以滚动内容效果（三种⽅式）隐藏滚动条的同时还需要⽀持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加⼀个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地⽅使⽤了，下⾯⼀起看看这三种⽅法。
⽅法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端⽇报的那块内容并没有滚动条，但⿏标移上去却可以滚动内容。
这是什么技术呢？其实我只是把滚动条通过定位把它隐藏了起来。
演⽰下⾯给⼀个简化版的代码·<div class="outer-container"><div class="inner-container">......</div></div>.outer-container{width: 360px;height: 200px;position: relative;overflow: hidden;}.inner-container{position: absolute;left: 0;top: 0;right: -17px;bottom: 0;overflow-x: hidden;overflow-y: scroll;}这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。
这个值是我⼿动调试得来的。
在chrome和IE没发现问题。
⽅法2：使⽤三个容器包围起来，不需要计算滚动条的宽度该代码最早是在Microsoft博客上看到的，跟我上⾯的思路差不多，只不过⼈家⾥⾯⼜加多了⼀个盒⼦，将内容限制在盒⼦⾥⾯了。
这样⼦就看不到滚动条同时也可以滚动。
代码如下：<div class="outer-container"><div class="inner-container"><div class="content">......</div></div></div>//code from /hide-scrollbar.html.element, .outer-container {width: 200px;height: 200px;}.outer-container {border: 5px solid purple;position: relative;overflow: hidden;}.inner-container {position: absolute;left: 0;overflow-x: hidden;overflow-y: scroll;}.inner-container::-webkit-scrollbar {display: none;}⽅法3：css隐藏滚动条同时该⽂章还分享了⼀种通过CSS隐藏滚动条的⽅法，不过这个⽅法不兼容IE，做移动端的可以使⽤。
css试题及答案
css试题及答案【篇一：xhtml+css试题有答案】、单项选择题 (每套20题，每题2分，共40分)1、关于web标准以下说法错误的是（ b ）a、web标准是一个复杂的概念集合，它由一系列标准组成b、这些标准全部都由w3c起草与发布c、web标准可以分为3个方面d、web标准里的表现标准语言主要包括css2、以下是!doctype元素作用的是（a ） a、该元素用来定义文档类型 b、该元素用来声明命名空间c、该元素用来向搜索引擎声明网站关键字d、该元素用来向搜索引擎声明网站作者3、以下可将一对象的背景色透明度改为80%的声明是：（d ） a、filter:alpha:(opacity=80);b、filter:alpha: opacity=80; c、filter:alpha:(opacity:80); d、filter:alpha(opacity=80);4、以下选项中，可以解决超链接访问过后hover样式不出现问题的是：（b ） a、重新书写关于连接状态的css样式b、改变关于链接状态的css属性排列顺序: l-v-h-ac、将关于链接状态的css属性全部写再a中d、以上说法都不对5、阅读以下代码： style type=text/css body {margin:0} div {float:left; margin-left:10px; width:200px; height:200px;border:1px solid red }/style 解析正确的是：（c ）a、浮动后外边距10px,但ff解释为20pxb、浮动后本来外边距20px,但ie解释为10px,解决办法是加上display:block;c、浮动后本来外边距10px,但ie解释为20px,解决办法是加上display:inlined、以上说法都不对6、“滑动门技术”的原理是（b ）学院班级姓名a、命名锚点链接的作用b、使用背景图片位置滑动c、将a元素转换为块元素d、将span元素转换为块元素7、关于背景，以下描述错误的是： (c)a、background-img: b、background-img: c、background-widthd、background-attachment8、以下声明中，可以取消加粗样式的有 ( c )a font-weight:bolder；b font-weight:bold；c font-weight: normal;d font-weight:600；9、以下声明中，可以控制单词间距的是： ( b )a letter-spacing:b word-spacing:c font-weight: normal;d font-weight:600；10、display属性的属性值共有： ( a )a 18个b 4个c 6个d 12个11、xhtml基本元素类型不包括a 块状元素 b 内联元素 c 可变元素 d 浮动元素12、关于float描述错误的是 ( b )a float:left;b float:centerc float:rightd float:none;13、为了解决浮动双倍间距问题，我们可以在相应元素上添加 ( c )a float:left;b display:block;c display:inline;d margin:0;14、以下哪种现象在ff2.0中会存在：（c） a 双倍边距的问题b图片间隙的问题c 父元素不能自适应子元素高度d 以上说法都不对15、外部样式表文件不可以由以下哪个标签导入 (c)( d )学院班级姓名a 、link b、import c、style 16、以下标签哪个不是空标签：(d)Ａ metab input c hr d form17、标签 p 的对齐属性是：(b) Ａ、 styleb 、alignc、 angle d、padding18、以下哪个选项是设置底边框的：(a)a、border-bottomb、border-topc、border-left d、border-right19、以下关于class和id的说法，错误的是：(d) a、class的定义方法是： . 类名 {样式}; b、id的应用方法：指定标签 id=id名c、class的应用方法：指定标签 class=类名d、id和class只是在写法上有区别，在应用和意义上没有任何区别20、关于id选择符说法错误的是: ( c )a id选择符的语法格式是“#”加上自定义的id名称b 当我们使用id选择符时，应先为当前元素定义一个id属性，如：div id=top/divc 选择符更适合定义类样式d 一个id名称只能对应于文档中一个具体的元素对象21.以下哪个选项是对对象进行定位的：(c)a、paddingb、marginc、positiond、display22.关于div以下描述正确的是（ a ）. a. div是类似于一行一列表格的虚线框b. div由行列形成的单元格构成，可执行合并拆分等操作c. 由div布局的网页结构与表现不分离d. div不要求我们严格css 支持23.关于使用css以下说法错误的是（ c ）a. 选择符：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.b. 选择属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性。
无缝滚动-js原理分析和css分析
学习情景四图片（文字）无缝滚动4.1任务目标4.1.1任务引入滚动效果，是网页中很常见，用途也很广的一种效果。
就是HTML自带的标签也有专门表示滚动的标签<marquee>。
Marquee标签可以很轻松的实现页面中的文字或者图片的滚动。
如下：但是，marquee标签有个致命的缺陷－－滚动中会有空白出现。
这些空白，会让网页的界面效果大打折扣。
如果能让滚动的时候没有空白，那么整个页面效果就舒服多了！这种没有空白的滚动，我们通常称之“无缝滚动”――就是“没有缝隙（空白）的滚动效果”。
怎么才能让图片滚动的时候没有空白呢？HTML自带的滚动标签<marquee>自然满足不了这种视觉特效要求（也正是因为这点，marquee标签现在已经逐渐的淡出人们的视线，处于被淘汰的境地了）。
因此，需要借助我们神通广大的Javascript来实现这个效果。
现在很多网站都喜欢使用无缝滚动的图片或者文字来突出内容，以此来吸引浏览者的注意。
特别是一些企业网站的产品展示、人物介绍或者新闻公告部分，更是滚动特效的常用部分。
图4.1.1－1 某网站的产品展示部分――该部分就是用js实现了产品图片的水平滚动。
图4.1.1－2 某网站的客户动态部分――该部分用js实现了客户信息的垂直向上滚动。
4.1.2任务目标利用js效果，实现如下样式的新闻动态向上无缝滚动。
图 4.1.2－1 新闻动态无缝滚动效果图4.2设计思路任何网站网页都是从效果图切片后，再通过各种方式布局而成（现在主要使用div＋css）。
一个特效做的再好看，它的“前身”还是一张静静的效果图。
（本例效果图见源码中“学习情景四无缝滚动”――“无缝滚动效果图.jpg”,并附有psd源文件以供参考切片）因此，我们在制作绚丽的JS特效的先前步骤一般是：1.根据策划和页面的效果图，完成效果图的切片，做成静态html页面――这里采用时下流行的div＋css布局。
2.在html静态页面的基础之上，再添加JS代码，完成特效。
CSS盒子模型
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽 度＋右填充＋右边框＋右边界
IE quirk模式下盒子的宽度
当将文档声明DOCTYPE删除后，IE 6对网页的解释 会进入quirk（怪异）模式，此时盒子的宽度等于左 边界＋宽度＋右边界 因此当使用了盒子属性后切忌删除DOCTYPE
body{border:1px dotted #FF0000} </style> </head>
<body> <div id="box1"><div id="box2">这是里面的盒 子</div> </body>
边框border属性
盒子模型的margin和padding属性比较简单，只能设 置宽度值，最多分别对上、右、下、左设置宽度值。 而边框border则可以设置宽度、颜色和样式。 分别是border-width（宽度）、border-color（颜色） 和border-style（样式）其中border-style属性可以将 边框设置为实线（solid）、虚线（dashed）、点划线 （dotted）、双线（double）等效果
盒子的margin叠加问题
盒子的margin在标准流中的计算
实验1——行内元素之间的水平margin
span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; }
CSS盒子模型计算题
如果盒子里面嵌套有盒子，且两个盒子都有边框，那 么两个盒子边框之间的距离等于外面盒子的填充值＋ 里面盒子的边界值
《CSS布局教程详解》
《CSS布局教程详解》CSS布局教程详解CSS（层叠样式表）是Web开发中不可或缺的一部分。
它不仅可以美化页面，还可以控制HTML元素的布局。
在Web开发中，页面布局是非常重要的一环。
一个好的页面布局可以增加用户体验，提高网站的可用性和可读性。
本篇文章将详细介绍CSS布局的各种方法和技巧。
一、基本布局1.流式布局：流式布局是指页面随着浏览器大小的变化而自适应调整大小。
可以通过设置宽度百分比（如width: 100%）实现。
2.定宽布局：定宽布局是指页面大小固定不变。
可以通过设置固定宽度（如width: 960px）实现。
3.弹性布局：弹性布局是指页面可变宽度、可变高度、可变间距。
可以通过设置flex布局实现。
二、布局技巧1. 圣杯布局：圣杯布局是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果。
2. 双飞翼布局：双飞翼布局也是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果，同时可以避免圣杯布局的一些负面效果。
3. 瀑布流布局：瀑布流布局是一种流式布局，通过设置每个元素的位置使其自然排列，适用于图片墙等排列不规则的布局。
4. 响应式布局：响应式布局是指页面针对不同设备（如手机、平板、电脑等）自适应调整大小和布局。
可以通过设置Media Query实现。
三、布局优化1. 减少HTTP请求：HTTP请求是影响网站性能的主要因素之一，可以通过合并CSS文件、缓存CSS等方式来减少HTTP请求。
2. 使用辅助工具：CSS布局的实现过程中，可以使用很多辅助工具来简化任务，如CSS预处理器、网格系统、框架等。
3. 确定元素大小：在对元素进行布局时，一定要确定其大小。
如果不确定大小，布局可能会出现问题，影响页面的美观度和用户体验。
四、总结CSS布局是Web开发中非常重要的一环，它可以影响页面的美观度、用户体验、可用性和可读性。
本文介绍了CSS布局的基本方法和各种技巧，并提出了优化布局的建议。
CSS的技术特点和应用
CSS的技术特点和应用CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的标记语言，它为网页设计师提供了丰富的样式控制能力。
本文将介绍CSS的技术特点和应用。
一、CSS的技术特点1. 分离式样式：CSS将网页的内容和样式分离，使得网页结构与样式表达分离开来。
这种分离式样式的设计使得网页的维护和修改变得更加容易，同时也提高了网页的加载速度。
2. 层叠性：CSS中的样式可以通过层叠的方式进行组合和覆盖。
当多个样式同时作用于一个元素时，CSS会根据样式的优先级和特殊性来确定最终的样式。
这种层叠性的设计使得样式的控制更加灵活和精确。
3. 继承性：CSS中的样式可以通过继承的方式传递给子元素。
这意味着，如果父元素定义了某个样式，子元素可以继承这个样式，而无需重复定义。
这种继承性的设计使得网页的样式表达更加简洁和高效。
4. 盒模型：CSS中的元素都可以看作是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。
通过设置这些属性，可以对元素的布局和样式进行精确控制。
盒模型的设计使得网页的布局更加灵活和自由。
二、CSS的应用1. 网页布局：CSS可以用来实现各种网页布局，包括固定布局、流动布局和响应式布局等。
通过设置元素的宽度、高度、浮动和定位等属性，可以实现各种复杂的布局效果。
2. 字体和排版：CSS可以用来设置网页中的字体样式、大小、颜色和行高等属性。
通过设置这些属性，可以改变网页的字体排版效果，使得网页更加美观和易读。
3. 背景和边框：CSS可以用来设置网页元素的背景颜色、背景图片和背景位置等属性。
同时，CSS还可以用来设置元素的边框样式、边框宽度和边框颜色等属性。
通过设置这些属性，可以为网页元素增加更多的视觉效果。
4. 动画和过渡：CSS可以通过使用关键帧动画和过渡效果来实现网页元素的动态效果。
通过设置元素的动画属性和过渡属性，可以实现元素的平滑过渡、渐变效果和动态变换等效果。
用CSS 3新特性实现圆角效果
这种方法不用创建有颜色的图片作为圆角的背景，而
是 创 建 曲线 型 的 图 片 来 盖 住 内 容 框 的 背 景 颜 色 。 这张
图片有一半是透 明的 ，因此露 出背景颜色的地方就有
奄 盛扩 ｆ 《时 ｔ ｐ ｒｇ ｔ．ｉ ｏ ｉｈ ｇ ｆ 摧 越 荔ｔ ｌ ＋ ． ｉ ｏ ｅｔｇｆ
２ ０ １Ｏ Ｏ１ １ ２ ９
￣Ｔ ｃ ｎ ｌｇ 技 ｅ ｈ ｏｏ ｙ ｌ 术
ｑ ｔ ），
』 ｛ ０ｔｔ０ —ｒ ｇｎｔ ・ ｃ ｇ ＝ 』 Ｄａｃ ｋｇｒ０ｕ ａ —
有 应 用 ， 可 以 实 现 比 圆 角 复 杂 得 多 的 效果。
ｂ ｄ －ｍａ ｏｒ ｅｒｉ ｇｅ
致。
最后实现 的效果大致如图２ 所示。
掌 ＇Ｓｉ ｅ Ｒｏｕｎ Ｃｏｍｅｒ ｍｐｌ ｄ
Ｓ ｎ ｌ ｏｏ ｅ ａ ｋ ｒ ｕ ｄｗｉ ｉ ｅ ｉｇｅｃ ｌｒ ｄｂ ｃ ｇ ｏ ｎ ｌ ｘ ｄｗｉｔ ． ｅｔ ｈｆ ｄｈ Ｕｓ ｗｏ ｂ ｃ ｇｏ ｎ ｍａ ｅ ． ａ ｋ ｒ ｕ ｄｉ ｇ ｓ
内 容框 的颜 色 ， 只 需 要 在ＣＳ 代 码 中修 改．ｏ 的背 景 Ｓ ｂｘ
颜 色 值 ，不 必 创 建任 何 新 的 图 片 。需 要 注 意 的是 覆 盖
我 们 要 将 之 前 应 用 于 顶部 和底 部 的 图 片分 别分 割 成 两张 ，所 以这 项 技 术 需 要 四张 图 片 ，并 且 要 增 加 一 些 无意 义 的Ｈ ｐｐｅｒ一１ｎ
ｉ — ｅ １ ｒ ｐｅ ｔ ｌ ｆ ｔ ｐ ） ｏ ａ ｅ ｔ ｏ
．
多个背景 图像
仍 以前 面 的 Ｈ ＭＬ 码 为例 ： Ｔ 代
＜ｄｉｖ ｃｉａｓｓ一 ” ｂ ０× ” ＞
滑动门原理
滑动门原理
滑动门是一种常见的门窗类型，其原理是通过滑轨和滑块的配合，使门扇可以在水平方向上滑动开合。
它的结构简单、使用方便，因此在现代建筑中得到了广泛的应用。
下面我们就来详细了解一下滑动门的原理。
首先，滑动门的主要结构包括门扇、滑轨、滑块和固定框。
门扇是由门框和玻璃等材料组成的移动部分，滑轨则是固定在地面上的导向轨道，滑块则是连接门扇和滑轨的零件，固定框则是门扇的支撑结构。
这些部件共同协作，使得滑动门可以顺利地开合。
在滑动门的使用过程中，滑块起着至关重要的作用。
它通过与滑轨的配合，使得门扇可以在水平方向上轻松地滑动。
而滑轨的设计也是十分关键的，它需要保证门扇的稳定性和平稳性，同时还要考虑到门扇的重量和使用寿命，因此滑轨的材料和制作工艺都需要经过精心设计和选择。
另外，滑动门的密封性也是需要重点考虑的问题。
为了保证室内外的隔音和隔热效果，滑动门需要在门扇和固定框之间设置密封条，以减少空气和声音的流失。
同时，为了增加门扇的稳定性，滑动门的固定框通常会采用钢铝材质，以确保门扇在使用过程中不会产生晃动和变形。
除此之外，滑动门的设计还需要考虑到人性化的因素。
比如，门把手的设计需要符合人体工程学，使得用户在开合门扇时感觉舒适，同时还需要考虑到门扇的防夹手设计，以确保用户在使用过程中不会受伤。
总的来说，滑动门的原理是通过滑轨和滑块的配合，使得门扇可以在水平方向上滑动开合。
在实际的设计和制作过程中，需要考虑到滑轨、滑块、固定框、密封性和人性化等多个方面的因素，以确保滑动门的稳定性、使用寿命和用户体验。
希望本文对滑动门的原理有所帮助，谢谢阅读！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
原文标题：Sliding Doors of CSS原文作者：Douglas Bowman原文出自：A List Apart中文翻译： (2005-01-31)版权说明：中文翻译版权属于 nobita 所有在CSS中，一个经常被人们讨论的先进之处即背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
根据CSS2.0当前的规定，每一个背景图像都需要各自的HTML元素。
在许多情况下，典型的标记已经为一般的接口组件提供了多种元素以供我们使用。
标签导航栏就是其中的一个例子。
过去，我们频繁的使用这些标签，并已成为了一种非常流行的站点导航方式。
现今，在CSS已被广泛支持的前景下，我们可以为我们站点制作出更高质量和更好外观的标签导航栏来。
你也许知道CSS可以用来“驯服”无序的列表，或许你还曾经看到过这种样式的标签列表：[一般的基于CSS的标签，采用单色及直角]如果我们想用和以上类似的标记，将导航标签变成这种样式，该怎么办呢？[加入一定样式的标签，具有圆角和3D及阴影效果]经过简单的设计，我们是可以做到的。
创新于何处？我见过的许多基于CSS的导航标签大都具有一类的特征：矩形的色块，也许仅仅是一个轮廓，对于当前选中的标签则没有边框，标签在鼠标指针游至其上时改变颜色。
这难道就是CSS所能给我们的全部吗？一连串的小盒子和单调的色彩吗?在CSS被广泛采用之前，我们已经看到许多标签导航设计中的创新之处。
独创的外形，熟练的色彩混合，以及对真实世界中许多物理接口的模仿。
但是这些设计往往过分依赖于经过复杂制作、带有文本的图像，或被包装成若干嵌套的表格。
修改文本或改变标签的顺序则需要一个复杂的过程。
文本的伸缩更是不可能的，或给页面的布局极大的影响。
纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度。
同样，我们甚至可以为每一个图像加上alt属性，对于弱视者，纯文本更可以自由的改变大小。
不足为奇的是，基于纯文本的导航栏，并加以CSS样式，又重新回到Web设计中来。
但是，大多数基于CSS的导航栏设计，至今为止仍然是毫无意义的。
一种最近被采用的技术（例如CSS）可以让我们做的更好，同样不失先前提到的那些表格和图片标签的效果。
滑动门技术美观的工艺，真正灵活的接口组件，并根据文本自适应大小，我们可用两个独立的背景图像来创造它。
一个在左边，一个在右边。
把这两幅图像想象成两扇可滑动的门，它们滑到一起并交迭，占据一个较窄的空间；或者相互滑开，占据一个较宽的空间，就像下图所显示的那样：[图中有两扇门。
第一幅中两扇门叠在一起的部分较多，第二幅则较少。
]在这个模型中,一个图像掩盖住另一个图片的一部分。
假设我们放置一些独特的内容在每个图像的周围，例如标签的圆角，我们并不希望上面一副图像完全的遮蔽住下面一副。
为了防止这种情况的发生，我们可以将上面一副图像（此例中的左边那幅）控制的尽可能的窄。
但仍然要保证一定的宽度来显现标签一侧的独特性。
如果外部是圆角，我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。
[图像显示了左边一个独立较窄的带有圆角的图像，右边的图像则于其类似，只是圆角的位置不同。
]如果目标在大小上增长，并超过了以上所显示的宽度，归咎于文本大小及字体的改变，图像会被拉开，产生不美观的间隙。
我们需要判断的是，预测这种可扩展的量将有多大。
如果在浏览器中改变字体的大小，目标又会如果增长呢？实际来说，我们至少应该估算到字体大小增长至300%的情况。
背景图像也得适应这种增长。
对于以上的例子，我们将下面（即右边）的图像设为400*150像素，上面的设为9*150像素。
在头脑中，始终要有这样的认识：背景图像只是显示一个可供内容填充的有效空间（即内容区域和padding，称为doorway）。
这两幅图像始终和各自外部的边角相锚定。
背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间（doorway）：[图像显示了两幅图像底部的额外高度。
右边图像的左侧同样具有额外的宽度。
可见的部分是标签成型。
]如果标签被撑大，图像即滑开，doorway变宽，图像的也将被显露的更多：[图像显示出两幅图像被拉开，形成更宽标签的情况，在高度上则是使用额外的那部分高度。
]此例中，我在photoshop中制作两个平滑，细的3D标签图像，如文章开头所显示的那样。
对于其一，内部明亮，边框暗淡些，用来表现当前选中的标签。
将这种技巧模型应用于左右两幅图像中，我们需要扩大标签图像覆盖的区域，将它裁剪成两部分：[左侧和右侧的图像]同样的方式将应用到被称为“当前”的标签中。
一旦我们完成了这四幅图像（1, 2, 3, 4），我们就可以开始用标记和CSS来制作我们的标签了。
标签的创造当你在研究用CSS来创造水平列表时，会发现至少有两种方法将列表项安排在同一行里。
两种方法各有千秋，但都需要CSS来解决布局所带来的混乱。
一种方法使用inline box，另一种则用floats。
方法一，可能是比较普遍的一种，是将列表项都inline显示。
inline方法的魅力在于它的简易性。
但是，对于我们即将谈到的滑动门技术来说，inline方法在特定的浏览器上存在一些解释上问题。
方法二，是我们将要关注的，即用floats将列表项安排在同一行里。
令人沮丧的是，floats 表面上矛盾的行为正巧回避了自然的逻辑。
尽管如此，对于解决多重浮动元素的基本认识，以及可靠浮动的意义，仍是值得讨论的。
我们将用另一种浮动元素来解决浮动元素的排列问题。
这样，父类元素将子类元素完全包括起来。
于是，我们就可以为标签加上背景色彩和背景图像。
非常重要的一点必须记住，紧跟在标签后的文本元素用CSS中的clear功能来清除浮动对象。
这样避免了浮动标签影响页面上其它元素的位置。
我们从以下的标记开始：<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>现实中，#header div可能同样包含logo和搜索框。
对于我们的例子，我们要缩短每一个锚链中超链接的值。
显然，这些值应该正确的包含文件或者目录的位置。
我们从定位#header容器开始设计列表。
这样确保了这个容器确确实实的充当了容器的作用，以包容它内部浮动的列表项。
既然元素是浮动的，我们同样需要声明它的宽度为100%。
加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。
同样，设定默认的文本属性，确保样式的统一：#header {float:left;width:100%;background:yellow;font-size:93%;line-height:normal;}现在，我们同样需要为无序列表设定默认的margin/padding值为0，并去掉列表项前面的标记。
每个列表项左浮动：#header ul {margin:0;padding:0;list-style:none;}#header li {float:left;margin:0;padding:0;}设定锚链强制作为块对象呈递，我们便可无忧的控制所有的样式：#header a {display:block;}下一步，我们将右侧的背景图像加入到列表项中去（改变如粗体所示）：#header li {float:left;background:url("norm_right.gif")no-repeat right top;margin:0;padding:0;}在加入左侧图像之前，我们可以在效果1种看看目前为止的效果。
（在效果中，忽略body中的规则。
仅设定基本margin,padding,colors,text的属性。
）---现在我们可以将左侧图像放置在锚链的左边（容器内的元素）。
我们同时加入padding，扩大标签并将文本从标签的边缘推开：#header a {display:block;background:url("norm_left.gif")no-repeat left top;padding:5px 15px;}这样我们就得到了效果2。
注意我们的标签是如何成型的。
在这里，IE5/Mac的用户会立刻惊奇道，“天啊，我的标签垂直堆在一起并且延伸至整个屏幕！”不要着急，我们马上帮你解决。
眼下，尽量按照下面去做，或者方便的话，临时改换其他的浏览器，并且IE5/Mac版本的问题会马上得到解决。
---现在，一般标签的背景图像已经完成了，我们要为“当前”标签更换图像。
我们通过对目标列表项加入id="current"和锚链来实现。
既然不需要改变背景的其他外观，图像除外，我们就使用background-image的特性：#header #current {background-image:url("norm_right_on.gif");}#header #current a {background-image:url("norm_left_on.gif");}我们要在标签下添加一条边框。
但是，将边框属性应用于父类的#header容器上，将不能解决“当前”标签无需边框的问题。
于是我们制作新的带有边框的图像以代替它。
同样，我们可以为它加入渐变效果：我们将图像放置到#header容器的背景中去（代替原有的黄色背景），将背景图像移至到最下方，并为图像上方留出的空白添加相应的背景颜色。
同时，去掉由body继承下来的padding，为ul的上、左、右边加进10像素的padding：#header {float:left;width:100%;background:#DAE0D2 url("bg.gif")repeat-x bottom;font-size:93%;line-height:normal;}#header ul {margin:0;padding:10px 10px 0;list-style:none;}我们必须让“当前”标签覆盖边框，如下面提示的那样。