CSS自适应宽度圆角按钮
作者：dowhatyouwant 来源：5key.net 发布时间：2007-11-20 11:38:00
标签：圆角,css,自适应
本文介绍的圆角方法很特别，有创意。
昨天群里大家讨论到一个豆瓣上的按钮，下面这个。在这里用到了不同宽度的按钮，但是只是用到了一个图片。
先来看张图片：
原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧.
CSS:
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(1.gif) left -30px;height:30px;}
a span{background:url(1.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }
HTML:
<body>
<h1><strong>CSS自适应宽度圆角按钮 asp之家</strong></h1>
<a href="#"><span>首页</span></a>
<a href="#"><span>不是首页</span></a>
<a href="#"><span>他也许是首页</span></a>
<a href="#"><span>但他一定不是首页</span></a>
<a href="#"><span>好了，就这样把。别扯了~</span></a>
</body>
演示地址：
https://www.aspxhome.com/examples/design/css/237320/liquid-css-menu.htm
0
投稿猜你喜欢
项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目- python是一门灵活的语言，也可以说python是一门胶水语言，顾名思义，就是其可以导入各类的包，python的包可以说是所有语言中最多的
- 1、首先模拟python类似shell命令行操作的接口：python安装subprocess（本地）、paramiko（SSH远程）#-*-
- 译序：这篇文章是可用性大师 Jakob Nielsen 在10年前总结的，到今天仍然受用。通过这个时间跨度，可以得出，可用性话题不是某个时代
- 在使用python做数据分析的时候，经常需要先对数据做统一化的处理，缺失值的处理是经常会使用到的。一般情况下，缺失值的处理要么是删除缺失数据
- DJANGO-ALLAUTH是github上面排名较高的django user系统.本来通过对比是想选用django-userea的,可是博
- 这次我使用ADO.NET来插入一条数据，到数据库中。主用到存储过程。我不想每次都是用SQL文本的形式了，那样始终没有进步～～～下面首先，我把
- 七夕节简介每年农历七月初七这一天是我国汉族的传统节日七夕节。因为此日活动的主要参与者是少女，而节日活动的内容又是以乞巧为主，故而人们称这天为
- 一、下载PyCharm下载最新版PyCharm，官方地址：https://www.jetbrains.com/pycharm/downloa
- 先用最简单的三层全连接神经网络，然后添加激活层查看实验结果，最后加上批标准化验证是否有效首先根据已有的模板定义网络结构SimpleNet，命
- 这篇文章主要介绍了基于python3抓取pinpoint应用信息入库,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- 本文实例讲述了Python实现网络端口转发和重定向的方法。分享给大家供大家参考，具体如下：【任务】需要将某个网络端口转发到另一个主机（for
- python升级到2.7.13函数执行的结尾加上这个即可for x in locals().keys(): del locals
- 实现效果先看看效果这比我手动的快多了，而且是单机的，自动玩没惹骂我，哈哈 ，多人游戏整个自动玩会被骂死~代码没装软件的先安装一下软件，没装模
- 前言给新的环境安装pip install tensorflow，结果报错了。跟着我分析解决一波。报错原因这个红字已经说的很清楚了。ERROR
- 具体就不做详细讲解了，直接上代码：<!DOCTYPE html><html><head><meta
- 字符串常用方法# 去掉左右空格'hello world'.strip() # 'hello world&
- Go 编写定时器和定时任务在 项目开发当中，可能会遇到这样的场景:1 A任务需要在多久之后执行一次（定时器）2.B任务需要每隔多长时间执行一
- 本文实例为大家分享了python实现飞机大战的具体代码，供大家参考，具体内容如下游戏的实现本质是多个图片的快速切换，类似动画一样，达到动态的
- 在Python中，当我们有两个字典需要合并的时候，可以使用字典的 update 方法，例如：a = {'a': 1,
