在背景图片中可以对图片进行圆角设置，但是这样是写死的。如下图： 情况分析：如果我们li标签中的文字变少了或者变多了，我们就需要重新定义背景图片。所以我们使用滑动门技术。它将图片特殊地方进行分割。宽度利用的是字体的宽度，在加上padding进行调整。 效果： ...
分类：
Web程序 时间：
2017-11-08 14:58:03
阅读次数：
192
http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件 ...
分类：
Web程序 时间：
2017-10-11 12:45:25
阅读次数：
191
效果图： 思路：通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现。 HTML: CSS： JS: ...
分类：
Web程序 时间：
2017-04-13 21:17:57
阅读次数：
209
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元素在一行上显示 ->设置了浮动的元素,影响其后面的元素 作用: 解决了文字图片环绕问题 制作网页导航栏 网页布局 清除 ...
分类：
Web程序 时间：
2017-03-23 13:42:12
阅读次数：
195
1.固定宽度和可变宽度的圆角框 方法一：适用于新型浏览器，直接用border-radius属性 方法二：适用于旧版浏览器，IE6等 对于固定宽度圆角框，需要有两个图像，一个图像用于框的顶部，一个用于框的底部。 对于可变宽度圆角框，需用到滑动门技术（随着框尺寸的增加，大图像有更多的部分显露出来，这样就 ...
分类：
Web程序 时间：
2017-03-17 00:20:47
阅读次数：
329
1、滑动门结构代码？ <ul> <li><a href="#"><span>百度</span></a></li> <li><a href="#"><span>百度</span></a></li> <li><a href="#"><span>百度</span></a></li> </ul> 2、滑动门 ...
分类：
其他好文 时间：
2017-03-08 13:35:38
阅读次数：
150
虽然css3的border-radius实现圆角很简单，但是我还是认为css2.1中好多技术还是很值得学习的，我也是后来才知道这就是传说中的滑动门技术。脑洞大开啊 附上demo 我觉得我写的注释只有我自己能看懂，哈哈哈哈，这个案例的图片设计的很有技巧，一般人真想不到，可通过审查元查看图片的样子，演示 ...
分类：
Web程序 时间：
2016-12-15 17:50:01
阅读次数：
246
html部分 <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" href= ...
分类：
Web程序 时间：
2016-11-19 20:41:11
阅读次数：
238
在之前的工作中有一次遇到了一种菜单，要随菜单名称的长短而伸展和缩短，后来查了相关资料才知道这种菜单的被称为“滑动门菜单”…… 样子就像下面的图片这样： 做法： 把菜单分成三部分：左边、中间、右边。菜单的左边和右边各用一张背景图片（不平铺），中间用一张背景图片，这张背景图是要平铺的，因为中间部分会随着 ...
分类：
其他好文 时间：
2016-09-22 23:42:52
阅读次数：
167
思想：首先定义三个选项卡，可以用任何标签，只要如下图， 一共有三个ul，第一个ul给一个class，因为默认第一个选项卡的内容显示出来， 其他两个ul display：none； 当我鼠标移到第二个第三个选项卡的时候，删除第一个选项卡的class，鼠标移到哪里就给哪个选项卡那个class 思路就這样 ...
分类：
Web程序 时间：
2016-09-05 13:57:18
阅读次数：
231
