关于Google 圆角 高光 高宽 自适应 按钮
最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多。下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘,
在此,我做了些修改。当然,想观摩原版的可以,狠狠的戳链接啦!http://www.zhangxinxu.com/wordpress/?p=292
好了,那现在,我们先看一下这个按钮的代码
CSS代码:
以下是HTML代码:
以下是显示结果:
下面,我们来解析一下代码
首先,我们最外层的p标签,只是为了演示 本按钮 可以进行图文混编,这个不是必要的,大家要清楚
其次,内层的超链接 .g_a ,将其定义为内联块级元素,这样是赋予行级标签a宽高等属性。然后,设置他的边框及圆
角,附上背景色,并消除超链接的默认样式。接着,让其超出部分隐藏,因为内部的的span标签都设置为块级属性了,所
以隐藏掉超出部分。这里vertical-align: middle;的作用是演示图文混编,让其与文字居中显示的,非必须代码。
最后,对于第一个span标签.g_b ,他的作用就是产生高亮效果,大家可以给他加一个背景色,看看他的所属位置,
也可以,放大按钮观察,竖直方向按钮的颜色变化是.g_b的背景色,.g_b的边框,然后是a标签的背景色
而,第二个span标签.g_c ,他是为按钮添加文字的,而且padding: 0.1em 0.6em; margin-top: -0.6em;的目的
是使文字近乎于居中显示,此时.g_c的大小使几乎充满整个a标签的,通过.g_c的行高和宽度撑起整个a标签的空间,而且
所有span标签均使用 em (他是相对大小单位,默认为浏览器的字体大小)的倍数,可以实现按钮宽高的自适用。
cursor: pointer;仅仅是让鼠标显示小手形状,不加也行,超链接默认就是此图形。
此按钮的优点:
1.可以与文字混排,对vertical-align属性敏感
2.宽度自适应于内部文字的个数,高度自适应于内部文字的大小
3.支持用css实现鼠标经过样式改变
4.页面性能提成,开发维护成本降低
好啦,以上就是我修改之后的按钮代码,我自认道行还浅,若有什么错误,还请指出,我们共同交流
关于Google 圆角 高光 高宽 自适应 按钮的更多相关文章
- 关于Google圆角高光高宽自适应按钮及其拓展
关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...
- jQuery实现布局高宽自适应
在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要 ...
- LayIM聊天框全屏根据浏览器高宽自适应
个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...
- 纯CSS写九宫格样式,高宽自适应正方形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- CSS实现圆角六色渐变自适应按钮
Css代码 .g_a{display:-moz-inline-stack; display:inline-block; border-bottom:1px solid #cccccc; border- ...
- UILabel实现自适应高宽
UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
- iOS开发 UILabel实现自适应高宽
UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
- JS获取IMG图片高宽
前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...
- javascript获取网页各种高宽及位置总结
screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系 ...
随机推荐
- html5中新增的非主体结构的元素
html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...
- html5中的全局属性
在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...
- R实战 第七篇:绘图文本表
文本表是显示数据的重要图形,一个文本表按照区域划分为:列标题,行标题,数据区,美学特征有:前景样式.背景央视.字体.网格线等. 一,使用ggtexttable绘图文本表 载入ggpubr包,可以使用g ...
- 前端工程师的修真秘籍(css、javascript和其它)
以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如De ...
- java并发容器(Map、List、BlockingQueue)
转发: 大海巨浪 Java库本身就有多种线程安全的容器和同步工具,其中同步容器包括两部分:一个是Vector和Hashtable.另外还有JDK1.2中加入的同步包装类,这些类都是由Collectio ...
- ORACLE数据库维护
ORACLE数据库维护(转)----一篇关于oracle的不错的文章 1. ORACLE数据库启动与关闭 1.1 打开和关闭数据库 (手工)1.1.1 sqlplus连接 1.1.2 打开数据 ...
- php namespace与use
实验代码 ~/aa.php ~/bb.php 1.命名空间与文件加载的关系 本人在命名空间与文件加载上一直有一个误区,用了命名空间文件不用加载了? 实验1:去掉requre语句 可以看到就算使用命名空 ...
- Day18 Django的深入使用
在向某一个数据库中插入表的时候,应该在项目下面的models里边写入: class book(models,Model): #book代指的是表名 id=models.AutoField(primar ...
- svn path already exists的解决办法
这种问题的一般原因是这个path所指的目录在服务器端是一个空目录,对客户端不可见,客户端如果新建了这个目录,而且向服务器端commit的时候就会报错,服务器端此目录已存在,这个时候就会存在一个问题:就 ...
- hadoop配置文件详解系列(一)-core-site.xml篇
接上一个属性,这个属性就是设置阈值的. hadoop.security.groups.cache.secs 300 配置用户组映射缓存时间的,当过期时重新获取并缓存. hadoop.security. ...