这里主要利用A元素的伪类来实现：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可

display这个CSS在我以前的印象中就紧紧是用来控制HTML元素的隐藏和显示，翻阅CSS文档后发现display表述如下：

display：
取值：
　　none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

　　block： 指定对象为块元素。

代码：

<!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" />

<style type="text/css">

a {

    display: block;

    height: 34px;

    width: 107px;

    line-height:;

    text-align: center;

    background: yellow;

    color: #d84700;

    font-size: 14px;

    font-weight: bold;

    text-decoration: none;

    padding-top: 3px; }

a:hover { background: green;}

</style>

</head></p>

<p><body>

<p><a href="#">免费注册</a></p>

</body>

</html>

在给a设置背景的时候使用图片能达到很好的效果，这里是做例子就使用一个单纯的背景色。

效果如下：

鼠标移动到“按钮”后的效果：

DIV+CSS布局重新学习之使用A标签和CSS制作按钮的更多相关文章

  1. CSS布局模型学习

    转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习   参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...

  2. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  3. DIV+CSS布局重新学习之float/margin/padding

    之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...

  4. 2014第16周三CSS布局再学习摘录

    今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识. 1.CSS的class ...

  5. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  7. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  8. CSS font-style中italic和Oblique有何区别 标签： css字体 2017-01-05 14:42 60人阅读 评论

    *要搞清楚这个问题,首先要明白字体是怎么回事.一种字体有粗体.斜体.下划线.删除线等诸多属性. 但是并不是所有字体都做了这些,一些不常用的字体,或许就只有个正常体,如果你用Italic,就没有效果了~ ...

  9. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

随机推荐

  1. 通过内存盘提高MSMQ的消息吞吐能力

    转载:http://www.ikende.com/blog/00f2634be4704b79a3e22439edeb1343 由于MSMQ的消息交互都需要对磁盘进行读写操作,所以提高MSMQ的消息吞吐 ...

  2. 取消SVN版本号控制的bash脚本

    原理非常easy,递归删除当前文件夹下全部的 .svn 文件. 把 .svn 换成 .git 就可以用于删除 git 控制

  3. java四舍五入保留两位小数4种方法

    4种方法,都是四舍五入,例: import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...

  4. vc中nmake.exe cl.exe 的使用

    首先简单介绍一下程序是如何编译链接的.程序写好之后,我们进行编译和链接来产生可执行程序.这时候,编译器为了完成编译和链接,需要知道很多信 息.比如要编译的文件是哪一个,使用哪些编译选项进行编译,编译好 ...

  5. SAE java应用读写文件（TmpFS和Storage）

    近期不少java用户都在提sae读写本地文件的问题,在这里结合TmpFS和Storage服务说说java应用应该如何读写文件TmpFS是一个供应用临时读写的路径,但请求过后将被销毁.出于安全考虑,sa ...

  6. 在Mac OS X上配置Apache2

    转载:http://www.cnblogs.com/yuanyq/p/3435022.html#2821339 最近一段时间在开发面向移动设备的网页,而且是静态网页.所以很需要一个HTTP服务器,简单 ...

  7. poj 1007 Quoit Design（分治）

    Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  8. iOS：删除、插入、移动单元格

    删除.插入.移动单元格的具体实例如下:   代码如下: #import "ViewController.h" #define NUM 20 typedef enum { delet ...

  9. vue-router路由模式详解

    一.路由模式解析 要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置. 如果有进行过服务器开发或者对http协议有所了解就会知 ...

  10. iOS_2_button控制物体形变

    终于效果图: BeyondViewController.h // // BeyondViewController.h // 02_button控制物体形变 // // Created by beyon ...