<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>滑动门Demo</title>

<style type="text/css">

    .btn{height:28px; font-size:12px; text-decoration:none; line-height:28px;}

    .btn,.btn span{ float:left;background:url(btn.png) 0 0;  color:#fff;}

    .btn span{background-position: right 0;padding: 7px 8px 5px 0;margin: 0 0 0 8px;height: 16px;line-height: 16px;}

</style>

</head>

<body>

<a href="#" class="btn"><span>这是大按钮</span></a>

</body>

</html>

相当于a负责左门，span负责右门

css：滑动门的更多相关文章

  1. CSS 滑动门案例

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

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

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

  3. CSS - 滑动门技术

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

  4. CSS——滑动门

    在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...

  5. CSS滑动门

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

  6. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

  7. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

  8. DIV+CSS滑动门效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  10. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

随机推荐

  1. swift出师作，史丹佛大学游戏制作案例，计算器，小游戏

    这两个案例得好好弄清楚,感觉在任何方面既然能够作为公开课被提到这所名校的课程里面自然有不得不学习的理由,感觉应该去入手一下,毕竟这种课,价格不匪,难以接触,能看到就当再教育了.

  2. bzoj 2820 mobius反演

    学了一晚上mobius,终于A了一道了.... 假设枚举到i,质数枚举到p(程序里的prime[j]),要更新A=i*p的信息. 1. p|i    这时A的素数分解式中,p这一项的次数>=2. ...

  3. MSP432P401R时钟入门

    拿到msp432的板子差不多一年了,刚刚进行了开机点亮LED工程:         首先是msp432的时钟模块(CS),个人理解msp432最特色的功能应该是超低功耗和高性能的组合.432系列的时钟 ...

  4. golang写一个简单的爬虫

    package main import( "fmt" "io/ioutil" "net/http" ) func gethtml(url s ...

  5. JWT是什么？

    # 转载请留言联系 什么是JWT? Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的 ...

  6. python中进程池的应用

    #原创,转载请联系 假设我们写的一个程序需要运行100个子进程的时候,那么写程序时,不可能循环创建销毁100个进程吧?进程的创建与销毁是很耗系统的资源的. 进程池的作用就体现出来了. 进程池可以控制进 ...

  7. Selenium2+python自动化51-unittest简介【转载】

    前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,这个招聘的需求上也是经常见到的.python里面也有单元测试框架-unittest,相当于是一个python版的junit. ...

  8. 服务器老是出现502 Bad Gateway?

    给你的upstream增加keepalive配置没有? upstream backend { server http://127.0.0.1:8888; keepalive 32; } 在nginx和 ...

  9. css样式表中的样式覆盖顺序(转)

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  10. Jstorm草草配置

    今天帮同事调试一个双节点的Jstorm测试集群. UI界面总是不能出现集群的具体信息. 参考几个URL调了一下.搞定了. 收获以下知识点: 1,UI是在storm.yaml里配置的 2,Jstorm分 ...