CSS滑动门Sliding door详解

更新时间：2023-05-30 04:22:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

css滑动门技术推荐度：
相关推荐

CSS滑动门Sliding door详解

其实CSS滑动门这个概念早在几年前就已经出现了，只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起，特别是一些新手朋友，所以我在这里写篇详解，希望能有所帮助。

说起来滑动门也不是什么高深的技术，也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了，我们可以把一左一右两个圆角背景想像成两扇可以滑动的门，他们可以滑到一起并交迭以显示较少的内容，也可以相互滑开以显示较多的内容，就如下图所示：

在以往的一些教程中，都喜欢把背景图切成一宽一窄两部分进行拼接，其实一张图就足矣。

在这里，我们只用了《a》跟《span》两个标签，样式可以定义三种状态，可以说是最简单的一种方式了。

CSS滑动门Sliding door详解

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

body {font-size:12px;}

.nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px

solid #579cc6;}

.nav a {display:inline-block; margin:0 3px; height:25px;

background:url(/upimg/allimg/090506/0158361.jpg) left bottom no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;} .nav a span {display:inline-block; height:25px; line-height:25px;

background:url(/upimg/allimg/090506/0158361.jpg) right bottom no-repeat;

padding-right:15px;}

.nav a:hover {background:url(/upimg/allimg/090506/0158361.jpg) left top

no-repeat; color:#FFF;}

.nav a:hover span {background:url(/upimg/allimg/090506/0158361.jpg) right

top no-repeat;}

.nav a.set {background:url(/upimg/allimg/090506/0158361.jpg) left top

no-repeat; color:#FFF; }

.nav a.set span {background:url(/upimg/allimg/090506/0158361.jpg) right top

no-repeat;}

</style>

</head>

<body>

<a href="#"><span>还可以再长一点</span></a>

</div>

</body>

</html>

Moondy

积安堂蜂蜜收集

本文来源：https://www.bwwdw.com/article/ih74.html

相关文章：

正在阅读：

CSS滑动门Sliding door详解05-30

数据库实验三01-06

盘县洒基兴镇荣祥矿井(整合)水土保持方案报告书(报批稿)修复04-13

江苏省科技计划项目申报书201206-08

汇编语言第一次作业12-08

南京市江宁区人民政府关于公布征地拆迁补偿安置标准通知江宁政06-27

国际经济学习题有答案权威大学资料05-01

台湾地区行政法学研究集大成之巨著_评翁岳生主编之_行政法_04-24

学习部一帮一学习小组活动策划书04-13

成本会计6(产品成本计算的品种法)08-24

上一篇：丙酮安全技术说明书下一篇：国考经典逻辑推理