一聚教程网:一个值得你收藏的教程网站

热门教程

用纯CSS作按钮[Good]

时间:2022-06-30 09:46:57 编辑:袖梨 来源:一聚教程网

本文示例用纯CSS作按钮,不用JavaScript代码。这并不是暗示JavaScript不好或陈旧,而是要说明CSS具有的能力。
============================================================
我们需要具有领先思路的代码,这是一个例子。本文代码要在第六代浏览器,即IE6+,    NN/Mozilla 6+或IE5.5上使用。本文示例用纯CSS作按钮,不用JavaScript代码。这并不是暗示JavaScript不好或陈旧,而是要说明CSS具有的能力。
本文代码与传统按钮代码相比有些新优点。
首先,它是文件型代码,不需任何图象,因此不要下载任何东西!
其次,很容易维护。例如做增加链接,增加按钮,改变颜色这些事,只要在样式表里编辑一、二行代码。
这些特点深受程序员的喜爱。不过这里的代码不能向下兼容,会给那些不愿意更换浏览器的人和公司画上一条鸿沟。
还是让跑在前面的人们看看这段代码吧:


这就是不用JavaScript的按钮,还不错吧。让我们来看看CSS是如何工作的。
这里是第一个div的样式:
#elButton a {
 color: #000000;
 font-size:10px;
 font-family:verdana;
 font-weight:bold;
 text-decoration: none;
 border:4px outset aqua;
 background-color:#00ffff;
 display: block;
 
 padding: 3px 5px;

热门栏目