滑动门的核心技术：

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

利用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. django模型多对多调用

    对于如下的模型: from django.db import models # Create your models here. class Student(models.Model): name = ...

  2. opencv之调用摄像头

    基础知识 # cap.set(propId, value) # 设置视频参数: propId - 设置的视频参数, value - 设置的参数值 # cap.isOpened() 返回 true/fa ...

  3. window.open()详解及浏览器兼容性问题示例探讨

    这篇文章主要介绍了window.open()的使用及浏览器兼容性问题方面的知识,感兴趣的朋友可以参考下   一.基本语法: window.open(pageURL,name,parameters) 其 ...

  4. myeclipse打开jsp后卡死的问题详解

    myeclipse打开jsp后卡死的问题详解   1,打开 Window -> Preferences -> General -> Editors -> File Associ ...

  5. Jmeter响应断言--正则表达式判断纯数字

    如图所示,这样是匹配14位数字,如果响应是纯数字可以直接用上

  6. CDS视图篇 1

    CDS视图概览 CDS是Core Data Services的简称,是HANA数据库向上层ABAP应用层提供数据的一种高效的方式,CDS模型是基于数据库data definition language ...

  7. idea中Lombok的Buider构造器模式，getter/setter正确使用方法

    public class ApiUser implements Serializable { private Long id; /*** * 用户类型:single,org(organization) ...

  8. iOS compile sources问题

    以前xcode compile sources 这里是自动生成的,升级到新版本之后,我删掉这里的列表,就没法生成了.导致项目无法运行. 解决方法就是:自己手动添加.h文件

  9. WordPress主题制作：基础样式文件

    1.style.css文件,其中必须包含 /* Theme Name:主题名称 Theme URI: 主题链接 Version: 版本 Description: 主题简介 Author: 主题作者 A ...

  10. easyui 解决连弹两个dialog时候，第二个dialog居中问题

    $('#showDivSecond').dialog('center'); (该方法自1.3.1版开始可用)