DIV+CSS布局重新学习之使用A标签和CSS制作按钮

这里主要利用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: 2; 

    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制作按钮

鼠标移动到“按钮”后的效果:DIV+CSS布局重新学习之使用A标签和CSS制作按钮

你可能感兴趣的:(div+css)