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

图片准备如下:

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. 在Firefox中操作iframe的一个小问题

    在做一个 Web 的打印功能时,需要将被打印的文档写到 iframe 的 document 中. <!doctype html> <html lang="en"& ...

  2. Luogu4233 射命丸文的笔记 DP、多项式求逆

    传送门 注意到总共有\(\frac{n!}{n}\)条本质不同的哈密顿回路,每一条哈密顿回路恰好会出现在\(2^{\binom{n}{2} - n}\)个图中,所以我们实际上要算的是强连通有向竞赛图的 ...

  3. 组件系列之RabbitMQ

    官网: https://www.rabbitmq.com/getstarted.html 1.四种交换机 TODO... 2.消费者获取消息方式:推 和 拉 拉取:每次拉取一条,循环拉取需要的条数在批 ...

  4. jdbcUrl is required with driverClassName

    https://blog.csdn.net/newbie_907486852/article/details/81391525 springboot2.0配置多数据源: spring.datasour ...

  5. NEST analyze与mapping

    /// <summary> /// POST /_analyze?pretty=true /// POST /employee/_analyze /// </summary> ...

  6. MQ相关

    1. 如何保证消息按顺序执行 2. 如何保证消息不重复消费 3. 如何保证消息不丢失 4.RabbitMQ Java Client简单生产者.消费者代码示例

  7. 阿里云OSS上传文件本地调试跨域问题解决

    问题描述: 最近后台说为了提高上传效率,要前端直接上传文件到阿里云,而不经过后台.因为在阿里云服务器设置的允许源(region)为某个固定的域名下的源(例如*.cheche.com),直接在本地访问会 ...

  8. JS权威指南读书笔记（六）

    第十五章 脚本化文档   1 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 2 文档节点的部分层次结构 Text和CDATASection都是characterData的子 ...

  9. python 简单工厂模式

    abc 是抽象类模块abc.ABC 是继承抽象类  也可直接继承 (metaclass=ABCMeta)abc.abstractmethod 是定义抽象方法 简单工厂模式:通过接口创建对象,但不会暴露 ...

  10. FreeRTOS优先级翻转

    举例 //高优先级任务的任务函数 void high_task(void *pvParameters) { while(1) { vTaskDelay(500); //延时500ms,也就是500个时 ...