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

情况分析：如果我们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. 自定义EL表达式，将对象转成json格式，关键代码

    做javaweb开发的最常用的一个东西el表达式,这个东西是个很好用的东西,但有些时候我们处理复杂的字符串操作,就有些相形见绌了,这个时候就需要用自定义的方法去实现更多简洁方便的事情. 下面自定义一个 ...

  2. MYSQL中有关表的简单操作

    #创建表 CREATE TABLE table02( tid INT, tname VARCHAR(20)); #查看所有表SHOW TABLES; #查看表的结构DESC table01; #修改表 ...

  3. SPOJ QTREE2 lct

    题目链接 题意: 给一棵树.有边权 1.询问路径的边权和 2.询问沿着路径的第k个点标. 思路:lct裸题. #include <iostream> #include <fstrea ...

  4. iOS中的枚举:enum, NS_ENUM, NS_OPTIONS的使用区别

    1.enum可以声明一般类型和位掩码(bitmasked)类型 例如: enum Test{// 一般枚举 TestA, TestB, TestC, }; enum{// 匿名枚举 TestA, Te ...

  5. sqlite 数据库 相关知识

    一基本简单介绍 SQLite 是一个自持的(self-contained).无server的.零配置的.事务型的关系型数据库引擎.由于他非常小,所以也能够作为嵌入式数据库内建在你的应用程序中. SQL ...

  6. com.opensymphony.xwork2.inject.DependencyException: com.opensymphony.xwork2.inject.ContainerImpl$Mis

    为什么会出现这个错误? 我使用了Maven配置Struts,所以改动Struts配置文件的默认路径,例如以下: <!-- 配置struts --> <filter> <f ...

  7. 【Spark】DAGScheduler源代码浅析

    DAGScheduler DAGScheduler的主要任务是基于Stage构建DAG,决定每个任务的最佳位置 记录哪个RDD或者Stage输出被物化 面向stage的调度层.为job生成以stage ...

  8. GTK经常使用控件之笔记本控件( GtkNotebook )

    笔记本控件,能够让用户标签式地切换多个界面. 当我们须要多窗体切换时,使用笔记本控件是一个明智的选择. 笔记本控件的创建: GtkWidget *gtk_notebook_new(void); 返回值 ...

  9. Android之利用EventBus进行数据传递

    在项目中,不可避免的要在两个页面之间进行数据的传递,就算不传递,也需要进行刷新之类的,我们根据Google提供的库类方法,也是可以做的,主要有广播broadcastreceiver,startacti ...

  10. C# MySql Select

    MySqlCommand objCmd = new MySqlCommand("select * from `main_db`.`t_realdailyinfo` ", objCo ...