在背景图片中可以对图片进行圆角设置，但是这样是写死的。如下图：

情况分析：如果我们li标签中的文字变少了或者变多了，我们就需要重新定义背景图片。所以我们使用滑动门技术。它将图片特殊地方进行分割。宽度利用的是字体的宽度，在加上padding进行调整。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style type="text/css">

        li {

            list-style: none;

            float: left;

        }

            li a {

                height: 35px;

                background-image: url("bg_r1_c1.png");

                background-repeat: no-repeat;

                padding-left: 7px;

                display: inline-block;

                color: white;

            }

            li span {

                height: 35px;

                background-image: url("bg_r1_c2.png");

                background-repeat: no-repeat;

                background-position: right;

                display: inline-block;

                padding-right: 22px;

                line-height: 35px;

            }

        a:hover {

            background: url("blue_r1_c1.png");

        }

        a span:hover {

            background: url("blue_r1_c2.png") right;

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <a href="#">

                <span>百度一下</span>

            </a>

        </li>

        <li>

            <a href="#">

                <span>百度</span>

            </a>

        </li>

        <li>

            <a href="#">

                <span>中国新闻网</span>

            </a>

        </li>

    </ul>

</body>

</html>

效果：

CSS——滑动门的更多相关文章

  1. CSS 滑动门案例

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

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

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

  3. CSS - 滑动门技术

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

  4. CSS滑动门

    如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...

  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. N的倍数

    题目来源: Ural 1302 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 一个长度为N的数组A,从A中选出若干个数,使得这些数的和是N的倍数. 例如:N = ...

  2. Prim算法和Dijkstra算法的异同

    Prim算法和Dijkstra算法的异同 之前一直觉得Prim和Dijkstra很相似,但是没有仔细对比: 今天看了下,主要有以下几点: 1: Prim是计算最小生成树的算法,比如为N个村庄修路,怎么 ...

  3. T1097 校门外的树 codevs

    http://codevs.cn/problem/1097/ 题目描述 Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的 ...

  4. 【转】gcov lcov 覆盖c/c++项目入门

    原文: http://www.cnblogs.com/turtle-fly/archive/2013/01/09/2851474.html ------------------------------ ...

  5. Java---15---单例设计模式：---饿汉式和懒汉式

    概念: 单例模式确保某个类仅仅有一个实例.并且自行实例化并向整个系统提供这个实例.   单例模式有下面特点: 1.单例类仅仅能有一个实例 2.单例类必须自己给自己创建自己的唯一实例 3.单例类必须给全 ...

  6. Andriod开发技巧——Fragment的懒载入

    我们在做应用开发的时候.一个Activity里面可能会以viewpager(或其它容器)与多个Fragment来组合使用.而假设每一个fragment都须要去载入数据.或从本地载入.或从网络载入,那么 ...

  7. Java创建和解析Json数据方法——org.json包的使用(转)

    org.json包的使用 1.简介   工具包org.json.jar,是一个轻量级的,JAVA下的json构造和解析工具包,它还包含JSON与XML, HTTP headers, Cookies, ...

  8. Localhost 回环IP 127.0.0.1

    LocalHost 127.0.0.1是一个保留地址,用于本地软件測试以及本地进程间通信, 也叫回环IP.回环地址.回送地址(loopback address).不管什么程序,一旦使 用回环IP发送数 ...

  9. 树莓派玩耍笔记1 -- 开箱 &amp; 安装系统以及简单配置

    零.前言 树莓派是什么? 吃的么? 呵呵,假设您连这个还不知道,真是out 了. 麻烦出门左拐.百度去(或者,看看官网去?),算了.还是粘贴一些大家都知道的树莓派百科吧: 树莓派由注冊于英国的慈善组织 ...

  10. 2015南阳CCPC D - Pick The Sticks 背包DP.

    D - Pick The Sticks Description The story happened long long ago. One day, Cao Cao made a special or ...