这里主要利用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#]WebClient异步下载文件并显示进度

    摘要 在项目开发中经常会用到下载文件,这里使用winform实现了一个带进度条的例子. 一个例子 using System; using System.Collections.Generic; usi ...

  2. Fast dev didn't succeed, trying another location

    Android 调试时,出现快盘加载失败问题.调试输出如下: Fast dev didn't succeed, trying another location 解决办法: 将项目属性->Andr ...

  3. Entity Framework实现事务回滚

    在使用Entity Framework为主从表添加数据,当一个表添加数据成功,另一个表添加数据失败,这时候就需要用到事务回滚. 比如有以下关系的2张表. 客户端使用TransactionScope类可 ...

  4. 如何使用==操作符,Equals方法,ReferenceEquals方法,IEquatable接口比较2个对象

    "世界上不会有两片完全相同的树叶",这句话适用于现实世界.而在软件世界中,这句话变成了"世界上必须有两片完全相同的树叶",否则,很多事情无以为继. 当比较2个对 ...

  5. 记录一次apache错误：“child pid 29023 exit signal Segmentation fault (11)”

    目前做了一台公网的测试机,主要是  php 5.3.3 版本,是 browser  --> nginx  --> apache --> php 今天因为想要安装一个商城,要求需要 P ...

  6. XCode快捷键 转

    1. 文件 CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD + SHIFT + S: 另存为CMD + W: 关闭窗口CMD + S ...

  7. 【spring boot】【log4jdbc】使用log4jdbc打印mybatis的sql和Jpa的sql语句运行情况

    在spring boot 中使用mybatis 想看到sql语句的运行情况. 虽然按照 之前说的配置了 logging.level.你的mapper包位置 = debug 但是依旧没有起作用. 所以采 ...

  8. UITableView的headerView展开缩放动画

    UITableView的headerView展开缩放动画 效果 源码 https://github.com/YouXianMing/Animations // // HeaderViewTapAnim ...

  9. UML状态图

    状态图(Statechart digram)是系统分析的一种经常使用工具,系统分析员在对系统建模时,最先考虑的不是基于活动之间的控制流,而是基于状态之间的控制流,由于系统中对象的状态变化最易被发现和理 ...

  10. Ubuntu下设置服务自启动

    Ubuntu下设置服务自启动 一般/etc下可能还有/etc/rc.local,/etc/rc.sysinit文件,一般/etc/rc.local默认并不做什么实事,可能是系统留下的一个接口,供用户添 ...