这里主要利用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. eclipse svn最新更新地址

    http://subclipse.tigris.org/update_1.12.x http://subclipse.tigris.org/servlets/ProjectProcess?pageID ...

  2. Sublime Text3 配置 Python2 Python3

    { "cmd": "C:/Python27/python.exe", "-u", "$file"], "fil ...

  3. Mongodb后台daemon方式启动

    Mongodb可以通过命令行方式和配置文件的方式来启动,具体命令如下: 命令行: [root@localhost mongodb]# ./bin/mongod --dbpath=/data/db 配置 ...

  4. Android之多媒体扫描过程

    转自:http://blog.csdn.net/yan8024/article/details/6620359下面是系统图      MediaScannerReceiver会在任何的ACTION_B ...

  5. 微商营销实战技巧分享，轻松月入10W

    如今能够说是移动互联时代.在这个时代,微信眼下能够说是当之无愧的移动应用,依据报道,眼下微信有7个多亿的用户,怪不得那么多人看到微商的时代,一大批人開始涌入微商,导致如今微信上卖产品都已经泛滥了,导致 ...

  6. JavaScript 面向对象编程之一

    一:Class and private And public JS 中的类以 function 进行声明,同时 JS 也支持声明私有 private 和公有 public 成员,只不过跟 C# 不一样 ...

  7. vijos p1729 Knights

    描述 在一个N*N的正方形棋盘上,放置了一些骑士.我们将棋盘的行用1开始的N个自然数标记,将列用'A'开始的N个大写英文字母标记.举个例子来说,一个标准的8*8的国际象棋棋盘的行标记为1..8,列标记 ...

  8. Git教程之工作区和暂存区

    工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区:

  9. 数据库实例: STOREBOOK > 用户 > 编辑 用户: PUBLIC

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: PUBLIC 编辑 用户: PUBLIC 1. 一般信息返回顶部 1.1, 1.2, 2 ...

  10. 关于html5获取用户地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...