关于滑动门，现在的页面中好多地方都会用到滑动门，一般用作于导航背景，它的官方解释如下：

滑动门：根据文本自适应大小，根据背景的层叠性制作，并允许他们在彼此之上进行滑动，以创造出一些特殊的效果。

为什么很多人喜欢用滑动门呢，因为有些时候导航的字体长度不一致，长长短短实在不好弄背景图片之类啥的，如果单独根据不同的长度调用不同的背景图片太麻烦不说服务器压力

也太大，所以滑动门技术应运而生，它可以根据元素本身的长度而调节背景图片的长度，至始至终只用到两张图片，网页加载速度提高不说，程序员工作量也减少了。

效果图如下：

1.准备图片如下：（left.jpg和right.jpg是由1.jpg分割而来的）)

2.代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .top{height: 35px;width: 600px;margin: 0 200px;background: url("imags/2.jpg"); }

    .top ul{margin: 0;padding: 0;list-style: none;}

    .top ul li{float: left;line-height: 30px;}

    .top ul li:nth-child(1){margin-left: 15px;}/*选择第一个li并单独style*/

    .top ul li a{text-decoration: none;display:block;padding: 0 0 0 15px;}/*不设置高度它自己会默认和父级一样大*/

    .top ul li a b{color: white;padding: 0px 15px 0 0;display:block;}/*块级元素才能拥有宽高度*/

    .top ul li:hover a{background:url(imags/left.jpg)  ;}

    .top ul li:hover b{background:url(imags/right.jpg) no-repeat right top;color: black;}/*背景图片不重复显示（横向和竖各都不重复）并从元素的右上方开始显示*/

</style>

<body>

<div class="top">

    <ul>

        <li><a href="#"><b>Interesting</b></a></li><!--滑动门技术关键在于一定存在嵌套关系，至少两级*/-->

        <li><a><b>Dlfgagi Ulsaafasdf</b></a></li><!--这里li里套a再套span，通过a和span显示图片左右边框*/-->

        <li><a><b>FDASDF</b></a></li><!--a和span也就是所谓的左右钩子*/-->

        <li><a><b>Zing</b></a></li>

        <li><a><b>FAasssiopg</b></a></li>

    </ul>

</div>

</body>

</html>

　　

css+html应用实例1：滑动门技术的简单实现的更多相关文章

  1. CSS——滑动门技术及应用

    先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...

  2. CSS - 滑动门技术

    1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...

  3. CSS 小结笔记之滑动门技术

    所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...

  4. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

  5. [css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分

    全是代码,直接拷走吧,看是不怎么好看的 参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9ska ...

  6. 滑动门出现的背景---实例微信导航栏（a盒子里面包span盒子，文字写在span里）

    需求: 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,其中最大的问题是字数不同,如何做? 解决: 用一个a包含span来制作,字数放在span里面. ...

  7. CSS基础(滑动门，雪碧图，网页布局）

    3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hi ...

  8. CSS——滑动门

    在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...

  9. CSS 滑动门案例

    一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...

随机推荐

  1. Difference between == and ===

    In swift 3 and above === (or !==) Checks if the values are identical (both point to the same memory ...

  2. 基于Nginx的SSL虚拟主机

    通过私钥,证书对站点www.test.com的所有数据加密,实现通过https访问www.test.com 环境说明: 源码安装Nginx时必须使用--with-http_ssl_module参数,启 ...

  3. ajax发送请求是图标转圈圈实现

    css部分 .load-img{ //控制图标大小width:40px;height:40px;margin:100px;border-radius:50%;-webkit-animation:cir ...

  4. hibernate一对多和多对一配置

    public class Dept { private int deptId; private String deptName; // [一对多] 部门对应的多个员工 private Set<E ...

  5. SSH启动失败解决方法

    今天连接linux时居然连不上,报错信息是: 查了一下终于找到了解决办法,只需要一些命令 : cd /etc/ssh sudo chmod 644 ./* sudo chmod 600 ssh_hos ...

  6. 解决time命令输出信息的重定向问题

    解决time命令输出信息的重定向问题 time命令的输出信息是打印在标准错误输出上的, 我们通过一个简单的尝试来验证一下. [root@web186 root]# time find . -name ...

  7. C语言提高 (5) 第五天 结构体，结构体对齐 文件

    1昨日回顾 2作业讲解 3 结构体的基本定义 //1 struct teacher { int id; char name[64]; }; struct teacher t5 = { 5, " ...

  8. Makefile错误总结

    自己在做嵌入式驱动时,编写makefile文件是犯的错及解决办法 问题1:makefile 3 missing separator.stop: 问题2:Nothing to be done for ' ...

  9. ❝ Windows系统的FTP上传下载脚本 ❞

    运行环境:windows 脚本功能:从目标系统下载数据库备份文件*.dmp 执行方法:windows任务计划定时调用文件ftp.bat 文件1:ftp.bat echo 开始备份日期: >> ...

  10. GIT文件的4种状态