滑动门的核心技术：

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

利用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. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_12-课程预览功能开发-需求分析

    5 课程预览功能开发 5.1 需求分析 课程预览功能将使用cms系统提供的页面预览功能,业务流程如下: 1.用户进入课程管理页面,点击课程预览,请求到课程管理服务 2.课程管理服务远程调用cms添加页 ...

  2. Qt编写控件属性设计器4-加载属性

    一.前言 控件能加载拖曳拉伸了,这些都是基本的前提工作,接下来的重点就是要动态加载选中控件的属性了,Qt的属性机制那是异常的强大,只能用强大到爆来形容,Qt中编写自定义控件,如果属性都用Q_PROPE ...

  3. SpringMVC+Ajax实现文件批量上传和下载功能实例代码

    需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...

  4. matlab学习——05插值和拟合(一维二维插值,拟合)

    05插值和拟合 1.一维插值 (1) 机床加工零件,试用分段线性和三次样条两种插值方法计算.并求x=0处的曲线斜率和13<=x<=15范围内y的最小值. x0=[0 3 5 7 9 11 ...

  5. java springmvc 前端 跨域问题

    有个朋友在写扇贝插件的时候遇到了跨域问题.于是我对解决跨域问题的方式进行了一番探讨. 问题 API:查询单词URL: https://api.shanbay.com/bdc/search/?word= ...

  6. hadoop：/bin/bash: /bin/java: No such file or directory

    Stack trace: ExitCodeException exitCode=127 In HADOOP_HOME/libexec/hadoop-config.sh look for the if ...

  7. webstorm2017中添加git

    1.pc中先安装git 2.在webstorm中选择VCS -> Checkout from Version Control -> Git Git Repository URL:  [gi ...

  8. [转帖]postgres csv日志和查看用户权限

    postgres csv日志和查看用户权限 最近在使用postgres 时遇到的2个问题,顺便记录一下查到的比较好的资料. 怀疑postgres在执行SQL时报错,程序日志中有无明确异常信息.通过查看 ...

  9. XDomainRequest IE8&amp;IE9 cors 跨域通讯的处理方法

       版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/detail ...

  10. JAVA支持字符编码读取文件

    文件操作,在java中很常用,对于存在特定编码的文件,则需要根据字符编码进行读取,要不容易出现乱码 /** * 读取文件 * @param filePath 文件路径 */ public static ...