[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]三层嵌套的滑动门

时间： 2024-08-05 18:38:11

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

CSS滑动门圆角

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS滑动门圆角</title> <style type="text/css"> .huadong{ width:500px; border:1px solid #ccc;  line-height:50px; padding-top:20px;} .huadong

一款CSS+JS+DIV制作的蓝色风格tab滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>一款CSS+JS+DIV制作的蓝色风格ta

一款经典简洁的CSS滑动门代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【前端】css自适应宽度滑动门菜单

html     css    width  自适应 什么是CSS自适应宽度滑动门菜单? CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了.那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单.         自适应宽度按钮的效果是怎样的呢? 那么,自适应宽度按钮,是怎么实现的呢? 要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一

CSS如何实现滑动门效果

CSS如何实现滑动门效果:所谓的滑动门和tab选项卡其实是一个意思,下面就通过实例介绍一下如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <meta name="key

CSS——滑动门

在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利用的是字体的宽度,在加上padding进行调整. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="te

认识CSS中精灵技术（sprite）和滑动门

前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片显示都是浏览器向服务器发送一次请求的结果,精灵技术是把多个小图片拼接为一个大图,有效减少了浏览器请求服务器的次数,与此同时也提高了页面的加载速度. 精灵技术使用 精灵技术实际是通过background属性限定盒子大小以后,通过background-position属性调整背景图片的位置,使得一个大图

css滑动门技术

双重滑动门效果还是比较常用的,其实很好理解: 两个门就好比两个块级的元素重合所形成的效果,看一段代码如下: #Mydoor ul li a:hover{ color:#fff; //设置背景 黑色 background: url(hover.gif); //设置背景 图片,图片周边应为透明,这样才能把背景衬托出来 } 可以看到左侧变化如下 /* *将连接a下的内容变为块级:给右边一个宽度 */ #Mydoor ul li a b{ display:block; //设置为块元素 padding:

css滑动门制作圆角按钮

之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式. 效果展示:http://runjs.cn/detail/evk8nkc8 先上传要用的两张图片吧.              btnBg.png                                                      bg.png <!doctype html>