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

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

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

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

效果图如下：

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. H5动效的常见制作手法

    众所周知,一个元素,动往往比静更吸引眼球: 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验: 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表 ...

  2. 深入理解 Swift 派发机制

    原文: Method Dispatch in Swift作者: Brain King译者: kemchenj 译者注: 之前看了很多关于 Swift 派发机制的内容, 但感觉没有一篇能够彻底讲清楚这件 ...

  3. jsmind实现思维导图，和echars 的tree图类似

    https://blog.csdn.net/qq_41619796/article/details/88552029

  4. java中super和this用法总结

    一.this用法 概念:this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的指针. this的用法在java中大致可以分为三种: 1. 普通对象的直接引用:this相当于指向当前对象本身 ...

  5. JQuery课堂学习笔记

    第1课 JQuery技术简介 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

  6. node中exports和module.exports的关系及使用

    在node中,需要记住,在使用exports和module.exports的时候,实际输出的是module.exports. exports指向module.exports,是module.expor ...

  7. gud-cloud

    架构:计算层:三台机器,包含处理器,内存条,外加一个64GB的存储器,这个存储器安装exsi主机,然后创建cvm虚拟机,硬盘空间选择在之前安装exsi主机的存储器里面 存储层:三台机器内置多个硬盘8T ...

  8. Python Django log日志

    log日志 log开发日志 一.创建项目 1.python -m venv ll_env # 创建虚拟环境 2.source ll_env/bin/activate # 激活虚拟环境 3.pip in ...

  9. 3、KOA模板引擎+访问静态资料中间件

    一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...

  10. js中获取宽高

    <script type="text/javascript"> function getWH() { var a = ""; a += " ...