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

图片准备如下:

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. 导出Excel的2个方法

    导出到Excel的两种方法 第一种: 1.首先创建Excle模板,另存为 “xml”文件.使用记事本等编辑软件打开文件的代码.然后另存为视图文件“Export.cshtml”; 2.控制器操作 pub ...

  2. spring 通过启动命令配置文件路径

    公司使用dubbo开发,提供了很多的服务,每个服务中一些配置都是一样的,比如注册中心地址,公共码表库等一下配置,这样在部署每一个程序的时候,修改每一个服务的配置增加很多的工作量.且领导不想对程序有大的 ...

  3. Webform中的前后端分离

    Webform常用的开发方式 (1)运用服务器端控件的aspx页面 (2)一般处理程序+html静态页面+Ajax(所谓的前后端分离) (3)一般处理程序+html模板引擎   这里简单记录html+ ...

  4. .net core使用ocelot---第五篇 服务质量

    简介 .net core使用ocelot---第一篇 简单使用  .net core使用ocelot---第二篇 身份验证使用 .net core使用ocelot---第三篇 日志记录  .net c ...

  5. ② Python3.0 运算符

    Python3.0 语言支持的运算符有: 算术运算符.比较(关系)运算符.赋值运算符.逻辑运算符.位运算符.成员运算符.身份运算符.运算符优先级 一.算术运算符 常见的算术运算符有+,-,*,/,%, ...

  6. 如何在Unity中创造真实的水

    你将要创造什么 Unity是由Unity Technologies开发的多平台游戏引擎,用于为控制台,移动设备,计算机甚至网站等多种设备创建视频游戏和应用程序.Unity的核心优势在于其稳健性,可移植 ...

  7. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  8. Java 之 Servlet 体系结构

    Servlet 的体系结构 体系结构示意图: 1.Servlet 接口 如果直接实现这个接口,需要重写里面所有的方法,但是只需要使用 service() 方法,其他的不常用. 2.GenericSer ...

  9. c#读写apk的 comment

    写入: ZipFile zipFile = new ZipFile("C:\\Users\\Administrator\\Desktop\\2.apk"); zipFile.Beg ...

  10. instanceof 和isInstance

    Java中的instanceof关键字 instanceof是Java的一个二元操作符,和==,>,<是同一类东东.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边 ...