原理:

最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明

结构:

<div class="module-title">

<span class="left">

<span class="right"></span>

</span>

</div>

样式:

.module-title {
    height:33px;
    background: url(../images/more-title.png) 0 -33px repeat-x;
    text-indent: 0;
}
.module-title .left{
    display:inline-block;
    height: 33px;
    line-height: 34px;
    padding-left:30px;
    background: url(../images/more-title.png) 0 0 no-repeat;
}
.module-title .right{
    display:inline-block;
    min-width:4em;
    height: 33px;
    padding-right:48px;
    line-height: 34px;
    background: url(../images/more-title.png) right -66px no-repeat;
    text-align:center;
}

背景图:

[CSS]三层嵌套的滑动门的更多相关文章

  1. html+css第八篇滑动门和可爱的css精灵

    滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...

  2. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

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

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

  4. CSS基础(滑动门,雪碧图,网页布局)

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

  5. 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  7. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

  8. 认识CSS中精灵技术(sprite)和滑动门

    前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...

  9. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

随机推荐

  1. iOS - UITextField

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITextField : UIControl <UITextInput, NSCoding> @ava ...

  2. Linux下的字符集问题

    怎么设置Linux系统中文语言,这是很多小伙伴在开始使用Linux的时候,都会遇到一个问题,就是终端输入命令回显的时候中文显示乱码.出现这个情况一般是由于没有安装中文语言包,或者设置的默认语言有问题导 ...

  3. iOS开发 设置状态栏样式

    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault animated:NO];

  4. shelve模块

    #coding:utf-8 __author__ = 'similarface' #email:similarface@outlook.com ''' shelve模块: 映射容器 存储对象,被存储的 ...

  5. JSON 语法规则详解

    JSON 的语法规则十分简单,无论用何种方法总结都只有数条而已,它参考了 C 语言家族的一些习惯,学习起来并不会感到陌生. 回顾JSON 的五点语法 1)- 数组(Array)用方括号("[ ...

  6. phpstorm xdebug 碰到很神奇的一件事

    早上配置好了,且正常运行了,然后没有退出phpstorm, 结果到了下午,配置消失了, 还好稳住了阵脚,然后配置了,就好了. 很重要一点,在调试观看源代码的时候,一定要浅薄,然后深入,不然累死,得不偿 ...

  7. tif图片编辑利器

    http://www.onlinedown.net/soft/99112.htmTIF编辑器 0.4 http://www.zjda07.cn/软件类别:国产软件/图像处理软件大小:1089KB软件授 ...

  8. 多路由器环境下路由器的入口IP地址及DHCP设置探讨

    多路由器环境下路由器的入口IP地址及DHCP设置探讨 这里把路由器的LAN口管理IP地址称为路由器的入口地址,把直接接入互联网的路由器称为主路由器,其他路由器称为从路由器.在多路由器环境下路由器的设置 ...

  9. 堆排序(C语言)

    #ifndef HEAP_SORT_H #define HEAP_SROT_H #include<iostream> void maxHeap(int *arr,unsigned int ...

  10. 三种语言(c++、as、lua)中函数的差异性

    对于不同的语言, 尤其是静态语言和动态语言, 对于函数的定义(即如何看待一个函数)和处理截然不同.具体来说可以分为两类: 1.将函数视为第一类型值, 即函数和其他的对象一样, 都是语言中一个普通的对象 ...