1.CSS滑动门技术产生的原因

例如：导航栏中，同样的背景，字数不同，背景可以自己适应字数的增加，本质上就是各种形状背景的左右自由拉伸，以适应元素内部的文本内容。

2.CSS精灵技术

精灵技术的本质：CSS精灵技术是用于处理网页背景图像的方式，将所有零星的图片都集中到一张图片上去，然后将图片应用到网页中，这样可以减少服务器的请求。
使用精灵技术的源图叫做精灵图，精灵图通常被使用在背景上，x，y的位置通常都是负数。

.phone {width: 15px;height: 20px;精灵图有一张phone的图片background: url(images/jd.png) no-repeat 0 -100px;}

2.滑动门的核心技术
CSS滑动门技术核心内容就是使用CSS精灵和padding样式撑开宽度，注意不能够给背景设置宽度或者高度，否则背景的宽度或者高度是固定的，实现不了文本的撑开。
滑动门技在页面的导航部分的应用，其使用步骤：
1.使用a设置背景的左侧，padding撑开背景的宽度
2.使用span设置背景的右侧，padding撑开背景的宽度，填写文字继续撑开
使用a包含span的原因：使得整个背景的可以被点击的使用padding撑开页面的原因：每个背景下的文本字数是不同的。

a {display: inline-block; 将a转换为行内块元素height: 33px;margin: 20px auto;background: url(images/ao.png) no-repeat;padding-left: 15px; 使用padding撑开页面margin-left: 100px;color: #ffffff;line-height: 33px;text-align: center;text-decoration: none;}

滑动技术也可以使用的伪元素，在块元素内添加内容。

3.before和after伪元素在页面元素内部之前和之后添加新内容

伪元素不是真正的页面元素，HTML没有对应的元素，实际上是css样式展现的行为，before和after添加的内容默认是inline元素
before和after两个伪元素的必须设置content属性，否则伪元素不起作用经常需要转换为块级元素。

 div {width: 720px;height: 306px;margin: 100px auto;position: relative; /*子绝父相*/}div:hover::before { /*鼠标经过之后 插入伪元素*/display: block;content: "";width: 100%;height: 100%;border: 5px solid red;position: absolute;top: 0;left: 0;box-sizing: border-box; /*将border不算到width里面*/}

CSS学习笔记——滑动门技术相关推荐

CSS中的滑动门技术
原文作者: Douglas Bowman 原文出自: A List Apart 中文翻译: 54player.com nobita 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许 ...
css滑动门技术的应用,DIV+CSS滑动门技术简介
你对DIV+CSS滑动门技术的概念和使用是否熟悉,这里和大家分享一下,其实DIV+CSS滑动门技术是一种只需要鼠标悬停便可自动切换板块的JS特效,相信本文介绍一定会让你有所收获. DIV+CSS滑动门 ...
CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑动门门技术所谓滑动门技术就是利用背景图片的分割,实现不同内容长度下,按钮的可伸缩性. 具体思路:根据文本自适应大小,我们可用两个独立的背景图像来创造它.一个在左边,一个在右边.把这两幅图像想象成两 ...
用CSS实现“滑动门”技术
在前几天无意中翻看网页代码的过程中,无意中发现了微信官网的nav里有一个很有意思的小细节.在跟着代码学习了一番,在网上阅读了相关资料,原来这就是传说中的滑动门技术. 接下来就来分享一下我个人对滑动门的 ...
css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
HTML+CSS(精灵图)实现微信滑动门技术
微信滑动门技术为了使各种[特殊形状的背景]能够[自适应元素中文本内容的多少],出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强 ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
html css圆角按钮,CSS：CSS使用滑动门技术实现圆角按钮
使用滑动门技术实现圆角按钮,如图所示,背景图和效果图. 所谓滑动门,就是当按钮的状态改变时,移动背景图,显示不同的状态.此法简单有效,但缺点是不能纵向扩展.要处理纵向扩展,就要使用复杂的圆解技术,如4 ...

CSS学习笔记——滑动门技术

1.CSS滑动门技术产生的原因

2.CSS精灵技术

3.before和after伪元素在页面元素内部之前和之后添加新内容

CSS学习笔记——滑动门技术相关推荐

最新文章

热门文章

CSS学习笔记——滑动门技术

1.CSS滑动门技术产生的原因

2.CSS精灵技术

3.before和after伪元素 在页面元素内部之前和之后添加新内容

CSS学习笔记——滑动门技术相关推荐

最新文章

热门文章

3.before和after伪元素在页面元素内部之前和之后添加新内容