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

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

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

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

效果图如下：

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. switch穿透中语句的执行顺序

    Day04_SHJavaTraing_4-6-2017 计算下列switch语句的运行结果 1. int x = 2,y=3; switch(x){ default: y++; case 3: y++ ...

  2. 图片放大不失真软件PhotoZoom如何使用？

    PhotoZoom可以将我们一些过于像素低的照片可以无失真放大,那么PhotoZoom是如何实现无失真照片放大的呢? 以上图像中的编号表示每个步骤应操作的位置. 单击“打开”,并选择您想调整大小的图像 ...

  3. 转载：rem的用法

    本文属于转载,为尊重原作者的劳动成果,在此标注原文地址,点击此处浏览. 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font siz ...

  4. JS 实现1!+2!+3!+4!+5!+....+n!

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. The socket is closed！

    关闭mongodb    /usr/local/app/mongidb//bin/mongod   --shutdown  --dbpath /usr/local/data/mongo/data/ 然 ...

  6. Python数据分析4------------数据变换

    1.简单变换: 开方.平方.对数等 2.数据规范化: (1)离差标准化(最小最大标准化):消除量纲(单位)影响以及变异大小因素的影响. x1=(x-min)/(max-min) 代码:data1=(d ...

  7. JavaScript进阶【四】JavaScript中的this,apply,call的深入剖析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Django入门--模型系统(一)：模型基础

    1.Django的ORM介绍 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不 ...

  9. [LeetCode] 75. 颜色分类（荷兰国旗）

    class Solution { public: void sortColors(vector<int>& nums) { ,current=,end=nums.size()-; ...

  10. RE：ゼロから始める文化課生活

    觉得有必要在NOI之前开一篇学习内容记录. 至于为什么要取这个标题呢?也许并没有什么特殊的借口吧. 5.23 在LOJ上搬了三道原题给大家考了考,然后大家都在考试就我一个人在划水. SSerxhs 和 ...