[CSS]三层嵌套的滑动门

原理:
最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明
结构:
<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]三层嵌套的滑动门的更多相关文章
- html+css第八篇滑动门和可爱的css精灵
滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
- CSS基础(滑动门,雪碧图,网页布局)
3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hi ...
- 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层 ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- 认识CSS中精灵技术(sprite)和滑动门
前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
随机推荐
- Dijkstra(迪杰斯特拉)源最短路径 小白说明
源最短路径 小白说明 Dijkstra算法,书上其实说的很简洁,仔细看,仔细思考是会理解的.但要先理解几条引论和推理. 而自己思考的思路在不需要任何推理只从贪心思路出发,和Dijkstra有所不同,但 ...
- [转载] 淘宝内部分享:怎么跳出MySQL的10个大坑(上)
原文: http://mp.weixin.qq.com/s?__biz=MzAxNjAzMTQyMA==&mid=209773318&idx=1&sn=e9600d3db80b ...
- facebook 开源文件传输 lib
https://github.com/facebook/wdt WDT is an embeddedable library (and command line tool) aiming to tra ...
- [转载] tcp那些事2
原文: http://coolshell.cn/articles/11609.html 这篇文章是下篇,所以如果你对TCP不熟悉的话,还请你先看看上篇<TCP的那些事儿(上)> 上篇中,我 ...
- apiCloud结合layer实现动态数据弹出层
css /** 我的二维码 begin **/ .aui-list .wechat-media { width: 3rem; } .wechat-middle { padding: 1.3em 3.2 ...
- 每日一笔记之2:QT之坐标系统:
以前一直多单片机开发,也没怎么使用过大的显示器,第一次学习,备忘: QT画图系统. 绘图,通过QPainter类实现. Qt的绘图系统对底层函数进行了良好的封装,使得在屏幕和设备的绘图功能可能使用相同 ...
- WebDriver - 添加失败截图
WebDriver失败截图可以通过两种方式实现: 1. Use WebdriverEventListener 第一步:创建自己的WebDriverEventListener 创建自己的WebDrive ...
- 【Unity技巧】Unity中的优化技术
http://blog.csdn.net/candycat1992/article/details/42127811 写在前面 这一篇是在Digital Tutors的一个系列教程的基础上总结扩展而得 ...
- 谈谈JPA-02-HelloWorld
使用JPA持久化对象的步骤 创建 persistence.xml, 在这个文件中配置持久化单元 需要指定跟哪个数据库进行交互; 需要指定 JPA 使用哪个持久化的框架以及配置该框架的基本属性 创建实体 ...
- 在ArcGIS 10.3标注中竖排文字
ArcGIS 10.3中文字默认“从左至右”排列,而实际的标注比如“XX路.XX街”有些文字是竖直排列的. 接着就涉及到“标注样式”的问题. 如果是整体竖排,点击图层的Properties...(属性 ...