滑动门的核心技术：

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，以使自由拉伸滑动

利用css精灵（主要是背景位置）和盒子padding撑开宽度，以便适应不同字数的导航栏

一般经典布局

<li>

    <a href="#">

    <span>导航内容</span>

    </a>

</li>

样式设置

a {

            margin: 100px;

            display: inline-block;

            height: 33px;

            background: url(image/ao.png) no-repeat;

            padding-left: 15px;

}

a span {

    height: 33px;

    display: inline-block;

    background: url(image/ao.png) no-repeat right;

    padding-right: 15px;

}

总结：

1. a设置背景左侧， padding撑开合适宽度

2. span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度

3. 之所以a包含span就是因为整个导航都是可以点击的

微信导航栏练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        body {

            background: url(image/wx.jpg) repeat-x;

        }

        .nav {

            height: 75px;

        }

        .nav li {

            float: left;

            margin: 0 15px;

            padding-top: 21px;

        }

        .nav li a {

            display: block;

            height: 33px;

            background: url(image/to.png) no-repeat;

            color: #fff;

            font-size: 14px;

            line-height: 33px;

            text-decoration: none;

            padding-left: 15px;

        }

        .nav li a:hover {

            background-image: url(image/ao.png);

        }

        .nav li a:hover span {

            background-image: url(image/ao.png);

        }

        .nav li a span {

            display: block;

            line-height: 33px;

            background: url(image/to.png) no-repeat right;

            padding-right: 15px;

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul>

            <li>

                <a href="#">

                    <span>首页</span>

                </a>

            </li>

            <li>

                <a href="#">

                    <span>帮助与反馈</span>

                </a>

            </li>

                <li>

                <a href="#">

                    <span>公众平台</span>

                </a>

            </li>

            <li>

                <a href="#">

                    <span>帮助与反馈</span>

                </a>

            </li>

                <li>

                <a href="#">

                    <span>公众平台</span>

                </a>

            </li>

        </ul>

    </div>

</body>

</html>

css滑动门技术的更多相关文章

  1. CSS——滑动门技术及应用

    先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...

  2. CSS - 滑动门技术

    1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...

  3. CSS 滑动门案例

    一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...

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

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

  5. css+html应用实例1：滑动门技术的简单实现

    关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...

  6. CSS——滑动门

    在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...

  7. CSS滑动门

    如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...

  8. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

  9. DIV+CSS滑动门效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. fileBeat的简单使用

    Beat的简单使用 Filebeat配置 Output 常见日志格式封装 简单使用filebeat格式化nginx日志 Filebeat的配置: # 修改filebeat.yml # vim file ...

  2. ISO/IEC 9899:2011 条款6.2.3——标识符的名字空间

    6.2.3 标识符的名字空间 1.如果一个特定标识符的多个声明在一个翻译单元的任意一点可见,那么语法上下文会区分对不同实体的引用.从而,对于标识符各种不同的类别具有独立的名字空间: ——标签名(通过标 ...

  3. SQL语句里合并两个select查询结果

    SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 ...

  4. 自己发挥的内容 有关ViewModel的一句翻译（难点expecting）

  5. 使用libxml2创建和解析xml文件

    毕业设计需要用到xml文件来组织和存放数据, 对于Linux环境下,有libxml2可供使用. 经过一段时间查询文档和网站, 基本掌握创建xml文档和解析xml的操作, 简单做一下记录. 创建xml ...

  6. Carve Visual Studio2015编译

    下载Carve库  https://github.com/folded/carve 目录结构如下: 用Visual Studio2015打开,点击右键,生成即可 在bin目录下生成了   .lib文件 ...

  7. 123457123457#0#-----com.yuming.YiZhiFanPai01--前拼后广--益智早教游戏记忆翻牌cym

    com.yuming.YiZhiFanPai01--前拼后广--益智早教游戏记忆翻牌cym

  8. SUBMIT标准程序取ALV数据

    示例1: 调用J3RFLVMOBVEDH ,取物料的期初/ 期末庫存数.金额 FORM frm_call_j3rflvmobvedh. DATA: lr_bukrs TYPE RANGE OF buk ...

  9. 简介Python设计模式中的代理模式与模板方法模式编程

    简介Python设计模式中的代理模式与模板方法模式编程 这篇文章主要介绍了Python设计模式中的代理模式与模板方法模式编程,文中举了两个简单的代码片段来说明,需要的朋友可以参考下 代理模式 Prox ...

  10. python：python2与python3共存时，pip冲突，提示Fatal error in launcher: Unable to create process using '"d:\python27\python2.exe" "D:\Python27\Scripts\pip2.exe" '

    问题背景: 机器上同时装了python2.和python3后,导致只能用pip3了,使用pip2时提示:Fatal error in launcher: Unable to create proces ...