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

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

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

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

效果图如下：

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. Websphere 手动模拟删除应用操作

    Websphere  手动模拟删除应用操作 切记:不要在程序还在运行的时候,直接的remove掉应用程序,不然,会发生意外的错误.       最近,在项目中,不小心手动移除了正在运行的应用,发现se ...

  2. 7.5.5编程实例－Bezier曲线曲面绘制

    (a)Bezier曲线                         (b) Bezier曲面 1. 绘制Bezier曲线 #include <GL/glut.h> GLfloat ct ...

  3. 模拟试题C

    模拟试题C 一.单项选择题(2′*14 =28′) 1．双线性法向插值法(Phong Shading)的优点是( ) A)法向计算精确 B)高光域准确 C)对光源和视点没有限制 D)速度较快 2．用编 ...

  4. day28 re(正则)模块

    目录 re模块有什么用? re模块的基础使用 元字符 终极 贪婪模式 非贪婪模式 re模块高级 comple match和search re.split() sub和subn 分组 re模块有什么用? ...

  5. -ms-,-moz-,-webkit-,-o-含义

    transform:rotate(30deg); //统一标识语句 -ms-transform:rotate(30deg); //-ms代表ie内核识别码 -moz-transform:rotate( ...

  6. 配置thinkphp项目遇到的坑

    坑一: nginx配置必须改成伪静态配置 否则出现nginx 403 forbiddem错误 坑2: 缓存目录权限必须开放 坑3:服务器权限准备: 坑4:防火墙关闭 systemctl stop fi ...

  7. 【JavaScript框架封装】公共框架的封装

    /* * @Author: 我爱科技论坛 * @Time: 20180706 * @Desc: 实现一个类似于JQuery功能的框架 // 公共框架 // 种子模块:命名空间.对象扩展.数组化.类型的 ...

  8. 喵哈哈村的魔法考试 Round #3 (Div.2)

    菜的抠脚 A 题解:判断能否构成一个三角形. #include "iostream" #include "algorithm" #include "c ...

  9. [洛谷 P1967] 货车运输 （最大生成树 lca）

    题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情况下,最多 ...

  10. TCP连接的11中状态

    1.CLOSED:初始状态,表示TCP连接时关闭状态,没有任何连接. 2.LISTEN:表示服务器端的某个SOCKET处于监听状态,可以接收客户端的连接请求. 3.SYN_RCVD:表示服务器接收到来 ...