ch5 创建类似按钮的链接
锚是行内元素,所以只有在单击链接的内容时它们才会激活,如果可以实现为按钮的效果,就可以有更大的可单击区域,实现方法为:display设置为block,修改width、height和其他属性,代码如下:
a{
display:block;
width:6.6em;
line-height:1.4;//使用line-height来控制高度,而不是用height,能够使得按钮中的文本垂直居中
text-align:center;
text-decoration:none;
border: 1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
实现的结果如下,链接显示为块级元素,单击块中的任何地方都会激活链接:
简单的翻转
使用:hover、:focus等伪类即可以创建翻转效果
a :hover,a:focus{
background-color: #f7a300;
border-color: #ff7400;
}
a :active {
background-color: #a7a7a7;
border-color: #868686;
}
图像翻转
修改背景图像对于简单的按钮很合适,但是对于复杂的按钮就要使用背景图像。
<a href="#" >Book Now »</a>
a :link,a:visited{
display: block;
width: 203px;
height: 72px;
text-indent: -1000em; //使用大的负文本缩进隐藏锚文本
background: url(img/button.png) left top no-repeat;
}
a :hover, a:focus {
background-image: url(img/button-over.png);
}
a :active {
background-image: url(img/button-active.png);
}
这种应用多图像方法的缺点是:在浏览器第一次加载鼠标悬停的图像时有短暂的延迟,会造成闪烁现象,让人感觉按钮反应迟钝。
Pixy样式的翻转
解决上述问题的方法是:
1、将鼠标悬停的图像作为背景应用于父元素,从而预加载它们。
2、不切换多个背景图像,而是使用一个图像并切换它的背景位置,使用单个图像减少了服务器请求的数量,而且可以将所有按钮状态放在一个地方——Pixy方法,如下代码:
<a href="#" >Book Now »</a>
a{
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(img/buttons.png) -203px 0 no-repeat;
}
a:hover {
background-position: right top;
}
a:active {
background-position: left top;
}
实现的效果和上述一样。
ch5 创建类似按钮的链接的更多相关文章
- Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下)
原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下) 接着上篇... 接下去,将一步步演示如果创建当点击checkBox后,其中的按钮由左边滑动到右边,表示处于 ...
- Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(上)
原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(上) 本篇文章,最终效果图: 当然,不只是一个UI而已,如果只是一张图片,那专业的设计师能做出更出色的效果.在 ...
- 拓展:使用终端创建、编译、链接OC…
本文介绍一下如何使用Mac OS X自带终端快速创建.编译.链接OC程序. 1.打开终端 顺序:打开Finder——应用程序——实用工具——终端 2.打开需要存放 .m 文件的路径(比如我需要放到桌面 ...
- Odoo 配置快速创建编辑按钮
对于Man2one类型的数据,我们知道,form view中总会显示出一个尾巴似的"create and edit"和一个快速创建的机制,有时候业务人员一不小心就容易创建一个新的行 ...
- linux 下的使用 ln 创建 软链接 和 硬链接
linux 下的一个指令 ln 作用: 创建软链接或者硬链接 Linux 系统下每创建一个文件,系统都会为此文件生成一个 index node 简称(inode) ,而每一个文件都包含用户数据(use ...
- 在Ubuntu 12.04下创建eclipse的桌面链接
在Ubuntu 12.04下创建eclipse的桌面链接 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Ubuntu 12.04上安装Hadoop并 ...
- Windows和Linux创建软链接和硬链接
1.Wondows创建软链接和硬链接 mklink [/d] [/h] link target /d--创建目录软链接:默认为文件软链接:创建目录链接时必须使用该选项不然创出的软链接无效 /h--创建 ...
- jquery点击按钮或链接,第一次与第二次执行不同的事件
本文和大家分享一个jquery的实例,这个实例实现的是点击网页里的按钮或链接,第一次和第二次会执行不同的事件,也就是两个事件会轮流执行. <script language="javas ...
- bootstrap 表单元素、按钮、链接的禁用
在Bootstra中,表单元素,按钮通过在标签内设置 disabled 或 disabled="disabled" 可以禁用表单元素,按钮.链接需要加入class="di ...
随机推荐
- dwz中的(tree)树形菜单的默认收缩
做网站后台时,为了方便管理,可能会用到dwz中的树形菜单,如下: 树形菜单的收缩有默认属性值,可以对其进行一定的初始设定: DWZ的树结构是按<ul>,<li>的嵌套格式构成, ...
- Euler Sums系列(三)
\[\Large\sum_{n=1}^{\infty}\frac{\left(H_{n}^{(2)}\right)^{2}}{n^{2}}=\frac{19}{24}\zeta(6)+\zeta^{2 ...
- ElasticSearch应用
1.什么是ElasticSearch Elaticsearch,简称为es, es是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本 身扩展性很好,可以扩展到上百台服务器,处理 ...
- Babel的安装和使用
安装Node.JS 和 npm,如未安装可参照其他文章 1.创建一个package.json npm init (回车, 一直下一步即可) 安装 Babel npm install --save-de ...
- 【转】教你怎么调用Gitlab API
官方文档: https://docs.gitlab.com/ce/api/ https://docs.gitlab.com/ee/api/branches.html#list-repository-b ...
- 基于Modelsim的视频捕获模拟仿真
一.前言 针对牟新刚编著的<基于FPGA的数字图像处理原理及应用>中第五章系统仿真中关于视频捕获模拟的例子进行补充和仿真验证,简言之,吊书袋子. 2020-02-27 21:09:05 二 ...
- dp-简单迷宫捡金币
链接:https://ac.nowcoder.com/acm/challenge/terminal 吃货LP参加了珠海美食节,每见一家摊位都会大吃一顿,但是如果不加收敛,接下来的日子就只能吃土了,所以 ...
- Community Cloud零基础学习(一)启用以及简单配置
本篇参考: https://trailhead.salesforce.com/en/content/learn/trails/communities https://trailhead.salesfo ...
- 【网摘】将图片地址直接 转为 base64
$(function() { function getBase64Image(img) { //转换为 base64 地址 var canvas = document.createElement(&q ...
- JavaScript - jQuery注意点
jQuery统一了不同浏览器之间的DOM操作的差异 1. jQuery === $ // true 1.1 $(x) //将x转换为jQuery对象,便于调用jQuery提供的API 1.2 方便操作 ...