<!DOCTYPE html PUBLIC "-//W3C//ttp://www.w3.org/1999/xhtml"><head><
原创
2023-07-19 16:25:39
58阅读
很荣幸老师给了我一天的时间让我把滑动门这个效果当作一节课来讲，感觉收获很多，知道如何能更容易的让大家接受你的思想。讲课的过程：1.效果2.思路3.代码4.难点，从这4个方面入手的。其中第三步占据了主要的时间，第三步类似与Tab切换的5种方法，有最简单的不可以复用的方法讲起，到最后比较精简。
1.思路
1.第一步弄清楚如何布局，知道每张图片的left值。每张图片的起点和终点在哪，有如
原创
2012-10-08 18:15:01
550阅读
css滑动门技术的一些总结和归纳 前些天加了一个设计群,里面一帮人都在嚷嚷要学css,但是不知道从哪里入手,于是我就在群里随便嘀咕了一句"哈哈,我是高手...." 结果引来骂声无数,虽然我心里不服,不过还是承认自己的css功底不够,除了布局/文字/链接这些简单的处理之外,其他的一些行为基本不会. 其中有个人说"如果你是高手,那你就详细介绍一下css滑动门技术",这句话把我刺激了,
转载
2010-01-19 13:56:28
301阅读
用到的背景图片 1 滑动门 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav { width: 800px; margin: 100px auto;
转载
2021-01-29 08:51:00
114阅读
2评论
滑动门Demo这是大按钮相当于a负责左门，span负责右门 Read More
转载
2015-09-08 11:21:00
105阅读
2评论
td"> <html xmlns="://.w3.o
转载
2017-04-28 16:19:00
80阅读
2评论
滑动门效果在日常的web开发中经常用到，现将一个完整的示例代码分享出来，供大家学习交流之用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
&
原创
2010-07-16 15:49:36
447阅读
二、滑动门效果概念：3个盒子浮动，左边和右边写宽高，负责加载两边的背景，中间的盒子宽度不定，让文字撑开<head> <meta charset="UTF-8"> <title>滑动门</title> <style type="text/css"> .box{ height:33px; margin-left:30...
原创
2021-08-18 02:04:17
381阅读
滑动门滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。核心技术核心技术就是利用...
原创
2021-09-02 09:50:04
261阅读
学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的
转载
2008-05-20 10:12:00
59阅读
2评论
二、滑动门效果概念：3个盒子浮动，左边和右边写宽高，负责加载两边的背景，中间的盒子宽度不定，让文字撑开<head> <meta charset="UTF-8"> <title>滑动门</title> <style type="text/css"> .box{ height:33px; margin-left:30...
原创
2022-03-02 17:29:42
322阅读
在CSS中，一个经常被人们讨论的先进之处即背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。根据CSS2.0当前的规定，每一个背景图像都需要各自的HTML元素。在许多情况下，典型的标记已经为一般的接口组件提供了多种元素以供我们使用。 标签导航栏就是其中的一个例子。过去，我们频繁的使用这些标签，并已成为了一种非常流行的站点导航方式。现今，在CSS已被广泛支持的前景下，我们可以为
转载
精选
2008-08-03 15:31:23
408阅读
站在css2.1的角度实现的demo，在不使用css3多背景的情况下，带有圆角的导航菜单，并且无论菜单文字的多少都能自适应<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
&nb
转载
2017-05-14 17:38:19
708阅读
今天收到袁马飞读者的一个问题，我觉得比较有价值，可能不少学习CSS的读者都会遇到相似的问题。因此这里详细讲解一下。他的问题是：“ 我是一个热爱ＣＳＳ的读者，你们写的书我都看完，也跟着做完了！可是我有一个问题，就是你们书本上没有介绍到的。我画了一个ＴＯＰ图片，可是左边有一个花纹，右边也有一个花纹，中间还有一张底图图片， 还有文字标题，我不知道怎样用CSS定义的啊！ 所以就要请教一下你们了...
原创
2021-06-16 19:19:58
105阅读
功能：保持标题风格以适应不同宽度；效果：源码： 滑动门技术h3{background-image: url(bg-slide.gif);background-repeat: no-repeat;padding-left: 40px; color: white;font-size: 13px;text-align: center;
原创
2023-08-22 10:22:31
74阅读
网页制作中，很多时候我们需要充分利用空间。这时候我们需要使用滑动门这种简
原创
2022-09-16 20:56:33
244阅读
效果测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>wechat</title> <style> * { margin:0; padding: 0; } a { t
原创
2022-11-19 05:44:04
61阅读
滑动门导航制作导航(使用背景图片制作)核心：1.使用背景图片。2.导航的内容区域不能设置固定宽度，一定要使用内容将导航撑开。效果如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</titl...
原创
2023-05-19 15:16:46
68阅读
"如果你是一个css高手的话,那你就来详细介绍一下css滑动门技术".看了这句话不得不学习一下这个所谓的css滑动门技术.我也想当高手啊.当时在百度知道里回答问题的时候发现有很多有问相关css滑动门技术的文章。当时真是不知道css里还有个滑动门技术. 所谓的滑动门，可以这样理解，菜单的 背景图(圆角，直角，其它等)会根据文字的多少而自动变长(变短)，这好象一个可滑动的门一样.
&nb
转载
精选
2009-10-13 11:09:10
714阅读
