如下图所示,每个导航栏目的文字个数不一样多，有的长，有的短,如何用一张背景图片，适应不同字数”的导航条,“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠的部分的宽度会根据里面的文字的字数而自动调整，就像两扇推拉门一样，因此这种技术就叫做“滑动门”。(鼠标经过有凹凸感)

图片准备如下:

html结构:

<body>

    <div class="wrap">

        <div class="head">

            <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>

                <li><a href="#"><span>微信网页版</span></a></li>

                <li><a href="#"><span>表情开放平台</span></a></li>

                <li><a href="#"><span>微信广告</span></a></li>

            </ul>

        </div>

    </div>

</body>

css样式

<style>

        *{

            margin: 0;

            padding: 0;

        }

        .wrap{

           background: url("wx2.jpg") repeat-x;(背景颜色图片)

        }

        .head{

            width: 1000px;/*甚至高度宽度,盒子居中,文字居中*/

            height: 50px;

            line-height: 50px;

            margin: 0 auto;

        }

        .head li {

            list-style:none;/*浮动,调整距离*/

            float: left;

            margin: 0 10px;

        }

        .head li a {

            /* a 里面放置左圆角 设置左padding值 */

            text-decoration: none;

            color: #fff;

            display: inline-block;

            height: 33px;

            line-height: 33px;

            padding-left: 15px;

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

        }

        .head li span{

            /* span 里面放置右圆角 设置右padding值 */

            display: inline-block;

            height: 33px;

            line-height: 33px;

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

            padding-right: 15px;

        }

        .head li a:hover, .head li a:hover span{

            /* 鼠标经过a 和鼠标经过a 里面的span 的背景图像变化 */

            background-image: url(to.png);

        }

    </style>

CSS滑动门的更多相关文章

  1. CSS 滑动门案例

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

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

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

  3. CSS - 滑动门技术

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

  4. CSS——滑动门

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

  5. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

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

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

  7. DIV+CSS滑动门效果

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

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

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

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

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

随机推荐

  1. 如何用navicat导入数据？

    介绍了如何使用navicat导入数据到数据库 0背景介绍 这里用的软件版本号是11.2.7 1选择要导入的数据库,右击选择导入向导 2 选择导入数据文件的类型 根据要导入数据文件的类型,选择对应的导入 ...

  2. PHP写入文件

    file_put_contents('log.txt',PHP_EOL.'zhangsan'.$time.'查看了数据', FILE_APPEND);

  3. node-red 使用 创建第一个流程

    前言 这只是一个简单的示例,具体详细文档去官网查看 官网指南:https://nodered.org/docs/user-guide/ 打开浏览器,进入编辑器页面:http://localhost:1 ...

  4. java之struts2的配置讲解（2）

    在 java之struts框架入门教程 基础上,进行下列操作 1.结构对比 原来的项目结构图 现在的结构图 即从结构上可以看出,在HelloStruts项目中增加了config 文件夹(Source ...

  5. [C#] 生成中文电子通讯录

    var template = @" BEGIN:VCARD VERSION:2.1 N;CHARSET=gb2312:;{0};;; FN;CHARSET=gb2312:{0} TEL;CE ...

  6. Wireless support

    Wireless support 参考: https://www.rhyous.com/2010/12/03/freebsd-wireless-configuring-a-wireless-inter ...

  7. jmeter进行压测的步骤

    1)安装jmeter和Badboy. 2)用badboy录制脚本,保存之后直接导出. 3)用jmeter打开badboy录制的脚本,假如是有参数的话,需要写一个csv的参数化文件,在jmeter中添加 ...

  8. JS中回调函数的简单用法

    a能拿b,b能拿到c,c能拿到d,实现a拿到d的东西. function a() { b(function (data) { console.log(data); }); } function b(c ...

  9. CSS知识整理

    1. 权重问题(CSS优先级): 继承或 * :0,0,0,0 标签:0,0,0,1 每个类,伪类:0,0,1,0 每个ID:0,1,0,0 每个行内式:1,0,0,0 !important:无穷大 ...

  10. 过渡属性transition

    过渡属性:使元素变化过程可见 transition: all 1s;元素所有变化过程都可见 transition: 1s;元素所有变化过程都可见 transition: 指定属性 2s 1s;指定属性 ...