这里主要利用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. C#值类型装箱后能改变其值吗

    当把一个值类型赋值给引用类型,这个过程可以看作是"装箱". ; 以上,堆栈上的过程大致是:1.在栈上开辟空间给变量a2.在堆上开辟空间,习惯上把该空间看作是"箱子&quo ...

  2. jQuery判断复选框是否被选中的3种方式

    页面部分:     <input type="checkbox" id="cbx" /><label for="cbx"& ...

  3. tomcat 启动时设置 java 参数，mark

    在文件  startup.bat/.sh 中添加 set "JAVA_OPTS=-Xms2048m -Xmx4096m -XX:NewSize=256m -XX:MaxNewSize=102 ...

  4. Linked List Cycle leetcode II java （寻找链表环的入口）

    题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...

  5. SQL Server 视图索引

    在视图上创建索引的另一个好处是:查询优化器开始在查询中使用视图索引,而不是直接在 FROM 子句中命令视图.这样一来,可从索引视图检索数据而无需重新编码,由此带来的高效率也使现有查询获益.在视图上创建 ...

  6. visual studio2013 php

    C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\12.0\Extensions\DEVSENSE\PHP Tools for V ...

  7. Java 程序内存分析

    转自:http://www.iteye.com/topic/528230 java程序内存主要分为了2个部分,包括stack segment(栈内存区).heap segment(堆内存区). 在分析 ...

  8. UE如何去除重复行，删除重复行

    1 如图所示,原理一个文本文档有两千多行,但是有大量的重复 2 使用UE的排序功能,有删除重复行的选项. 3 处理之后只剩下不到两百行了.

  9. Office EXCEL VBA数组如何使用

    Excel VBA数组入门教程 1. 前言:不要把VBA数组想的太神秘,它其实就是一组数字而已. 2. 数组的维数: Sub 数组示例()  Dim x As Long, y As Long  Dim ...

  10. 理解进程调度时机跟踪分析进程调度与进程切换的过程(Linux)

    ----------------------------------------------------------------------------------- 理解进程调度时机跟踪分析进程调度 ...