码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-10 10:18:53      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   width   

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

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

代码:

<!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设置背景的时候使用图片能达到很好的效果,这里是做例子就使用一个单纯的背景色。

效果如下:

bubuko.com,布布扣

鼠标移动到“按钮”后的效果:bubuko.com,布布扣

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

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

标签:style   blog   http   color   使用   width   

原文地址:http://www.cnblogs.com/yangzhilong/p/3812277.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!