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

图片准备如下:

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. 【题解】Luogu P4910 帕秋莉的手环

    原题传送门 "连续的两个中至少有1个金的"珂以理解为"不能有两个木相连" 我们考虑一个一个将元素加入手环 设f\([i][0/1]\)表示长度为\(i\)手环末 ...

  2. SpringBoot打成jar包后无法读取resources资源文件

    在项目中做了一个支付功能, 需要引入第三方渠道的配置文件config.xml用来初始化文件证书, 将配置文件 config.xml 放到 resources 资源目录下. 本地开发环境下能正常读取该文 ...

  3. C# 文件类中 File ，FileInfo 类的主要区别

    System.IO命名空间中提供的文件操作类有File和FileInfo,这两个类的功能基本相同,只是File是静态类,其中所有方法都是静态的,可以通过类名直接调用,不需要实例化.而FileInfo是 ...

  4. 通俗易懂的join、left join、right join、full join、cross join

    内连接:列出与连接条件匹配的数据行(join\inner join) 外连接:两表合并,如有不相同的列,另外一个表显示null(left join\right join\full outer join ...

  5. 【洛谷 P3041】 [USACO12JAN]视频游戏的连击Video Game Combos（AC自动机，dp）

    题目链接 手写一下AC自动机(我可没说我之前不是手写的) Trie上dp,每个点的贡献加上所有是他后缀的串的贡献,也就是这个点到根的fail链的和. #include <cstdio> # ...

  6. Sqlite in flutter, how database assets work

    First off, you will need to construct a sqlite database from your csv. This can be done in the follo ...

  7. Spring Boot 实战 —— MyBatis（注解版）使用方法

    原文链接: Spring Boot 实战 -- MyBatis(注解版)使用方法 简介 MyBatis 官网 是这么介绍它自己的: MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过 ...

  8. 关于移动端图片浏览，previewimage的使用

    我相信在移动端项目中,大家都会遇到图片浏览的问题,像qq,微信,微博,淘宝,当你点击图片时,图片会放大全屏显示,双击图片时图片继续放大查看,双指左右滑动也可以放大,当你再次点击时图片,图片恢复原始大小 ...

  9. Vue的11个生命周期函数的用法

    实例的生命周期函数(官方11个):beforeCreate:在实例部分(事件/生命周期)初始化完成之后调用.created:在完成外部的注入/双向的绑定等的初始化之后调用.beforeMount:在页 ...

  10. JAVA基础之ServletContext对象

    个人理解:  ServletContext类似字节码文件对象,在web创建的时候就自动生成了,并且是唯一的,跟随着项目和服务器共存亡了.通过这个对象,我们可以向里面存数据(键值对),也可以通过别的Se ...