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

情况分析：如果我们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. WEB开发----springboot的登录拦截机制

    如果是一个后台的管理项目的,有些东西是不能直接就可以访问的,必须要登录才可以进去,所以就需要进行登录拦截,只有登录过的用户才可以正常访问. 登录拦截是不会拦截jsp页面的方法,所以我们需要在Contr ...

  2. [bzoj1040][ZJOI2007]骑士（环套树DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1040 分析:第一感觉肯定是树形DP,但可惜不是树.仔细分析,这个图很特殊,每个联通块肯 ...

  3. WeixinJSBridge 微信

    <!DOCTYPE html> <html> <head><title>微信WeixinJSBridge API</title> <m ...

  4. centos6.2安装kvm虚拟机

    http://www.wenzizone.com/2012/03/06/centos_6-2_install_kvm.html KVM虚拟机简介 kernel-based Virtual Machin ...

  5. ubuntu How do I configure proxies without GUI?

    想法:  我的想法是想是一台国内的 ubuntu 云主机可以通过另外一台在国外(新加坡)的服务器 ,来实现可以访问 google ,哈哈,比较好查资料:) 下面的做法 去修改 /etc/environ ...

  6. LeetCode OJ 322. Coin Change DP求解

    题目链接:https://leetcode.com/problems/coin-change/ 322. Coin Change My Submissions Question Total Accep ...

  7. 斯坦福《机器学习》Lesson8感想-------1、SMO

    从上一篇文章可知支持向量(supervector)就是指的离分隔超平面近期的那些点.整个SVM最须要的步骤是训练分类器.得到alpha,从而得到整个用于数据分类的分隔超平面.支持向量机(super v ...

  8. 字节数组byte[]和整型,浮点型数据的转换——Java代码

    近期在写C++ socket和java socket之间的通信程序,涉及到整数浮点数的传输.须要从字节数组还原数据,查了一些资料.总结例如以下 1.       整数和浮点数的机器表示 在机器内部.不 ...

  9. ORACLE 11G 怎样改动 awr 的保留期限小于8天

     ORACLE 11G 怎样改动 awr 的保留期限小于8天 Oracle Database 11g 默认具备一个系统定义的Moving Window Baseline,该基线相应于 AWR 保留 ...

  10. 从es中提取全量数据的shell脚本

    [root@hadoop3 xiaole_chk_url]# sh looh.es.res.sh 100 200 1 % Total % Received % Xferd Average Speed ...