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

情况分析：如果我们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. 产品需求分析神器:KANO模型分析法

    前言: 任何一个互联网产品,哪怕是一个简单的页面,也会涉及到很多的需求,产品经理也会经常遇到这样的情况:老板,业务提的各种新需求一下子都扎堆,哪个需求对用户来说最重要,用户对我们的新功能是否满意?开发 ...

  2. （13）Corner Detection角点检测

    import cv2 import numpy as np img=cv2.imread('opencv-corner-detection-sample.jpg') gray = cv2.cvtCol ...

  3. PHP中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR使用详解

    1.REMOTE_ADDR:浏览当前页面的用户计算机的ip地址 2.HTTP_X_FORWARDED_FOR: 浏览当前页面的用户计算机的网关 3.HTTP_CLIENT_IP:客户端的ip 在PHP ...

  4. NOIP2014 提高组合集

    NOIP 2014 提高组 合集 D1 T1 生活大爆炸版石头剪刀布 首先,先将两个人的猜拳序列都变得不小于n.然后逐个模拟.胜败什么的看表就行了. #include <iostream> ...

  5. Ubuntu 16.04开机自动开启数字键盘NumLock

    注意:以下方法不适合在登录时开启,只能是登录后开启.而且我经过测试之后会自动暗下去,但是不影响功能使用.这个是BUG的修复方法:https://askubuntu.com/questions/5090 ...

  6. IIS: 配置web.config解决Maximum request length exceeded错误

    In system.web <httpRuntime maxRequestLength="1048576" executionTimeout="3600" ...

  7. muduo库源码剖析(一) reactor模式

    一. Reactor模式简介 Reactor释义“反应堆”,是一种事件驱动机制.和普通函数调用的不同之处在于:应用程序不是主动的调用某个API完成处理,而是恰恰相反,Reactor逆置了事件处理流程, ...

  8. Unity3D 怎样在安卓手机上播放视频

    曾经仅仅会在电脑上通过Unity3D播放视频,研究了下发现通过Unity3D在手机上播放视频也很easy.现介绍例如以下. void OnGUI()     {         if (GUI.But ...

  9. 《转》OpenStack对象存储——Swift

    OpenStack Object Storage(Swift)是OpenStack开源云计算项目的子项目之中的一个.被称为对象存储.提供了强大的扩展性.冗余和持久性.本文将从架构.原理和实践等几方面讲 ...

  10. 洛谷 P3377 模板左偏树

    题目:https://www.luogu.org/problemnew/show/P3377 左偏树的模板题: 加深了我对空 merge 的理解: 结构体的编号就是原序列的位置. 代码如下: #inc ...