CSS按钮的制作方法系列文章.doc

CSS按钮的制作方法系列文章_按钮与链接 本文是CSS按钮的制作方法系列文?章第一部分：按钮与链接。 在上篇文章中我曾提到过一点，按钮在网页中最常用的作用是提交表单，以及作为一个动作的开始按钮，有的时候可以作为页面中着重突出的内容。 “提交表单”这个很容易理解，无非是在一个表单的最后添加上“提交”、“重填”这样的按钮，比如注册会员表单、调查表等。 “动作的开始按钮”即一个或一系列动作的开始按钮，其实提交表单也属于这种作用之一，只是作为动作的开始按钮可以运用的更灵活，比如淘宝商铺购买页面的“立即购买”和“加入购物车”按钮，如上图中所示，它是开启下一个动作的按钮，也可以说是提交购买数量的表单提交按钮。而图中的“在线申请”和“点击阅读”按钮则仅仅是一个动作开始按钮。 有人会问，“着重突出的内容”和开始按钮不是一样的吗？其实在表面意义上是相同的，但在其“内在”有着本质的不同，“内在”其实就是“源代码”。有时候着重突出的内容虽然在设计时做的像个按钮，但在制作页面时却是用链接标签a制作成一个链接。 为什么要这样做？ 第一，为了CSS语义的正确性，因为页面中着重突出的内容本身不是按钮，只是做成了按钮的样子而已； 第二，为了SEO优化，如果一个页面中突出的内容制作成一个按钮，为了让其打开后面的页面，必须写一段Javascript，让其有点击触发的效果，但有哪些信誉好的足球投注网站引擎的有哪些信誉好的足球投注网站爬虫不能由此按钮爬到更深一步的页面。而如果将其做成一个链接，爬虫会顺理成章地从该链接有哪些信誉好的足球投注网站到下一个页面，从而保持网站被有哪些信誉好的足球投注网站引擎抓取的纵深和连续性。 所以，形式虽然都是按钮，却存在着几种细微的差别，不知道通过上面的讲解，您对它们是否有了一定的了解？不理解也没关系，以后慢慢体会、慢慢消化。如果对此已烂熟于胸，那就即刻进入第二部分《 HYPERLINK /od/divcss/a/css-btn-2.htm \t _blank 三种按钮形式，以及它们的优缺点》。 CSS按钮制作方法系列文章_按钮形式及优缺点 本文是CSS按钮的制作方法系列文?章第二部分：三种按钮形式，以及它们的优缺点。 在上篇文章中，我提到了按钮的三种作用和两种制作方法。三种作用分别是：提交表单、动作开始按钮和着重突出；两种制作方法是：制作成按钮和制作成链接。 有些朋友会出现疑问，上篇文章中明明写的是两种制作方法，为什么这篇文章又说是三种按钮形式及优缺点呢？ 因为从制作方面讲，按钮除了前面文章中提到的input和链接标签a，还有一种制作方法：button。 input和button都可以制作按钮，它们制作按钮的代码分别是： input type=submit name=Submit value=提交表单 / 和 button type=button在线申请/button input以“/”作为结尾，利用type定义类型，让其变为按钮、复选框、单选框等等，而当其是提交按钮时type类型为submit，可见其着重体现“提交”这个意义。 button以/button结尾，相比input而言，提供了更为强大的功能和更丰富的内容。button与 /button 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像，比如这样写： buttonimg src=button.gif alt=在线申请 /在线申请/button buttonimg src=button.gif alt=在线申请 /b在线申请/b/button 需要注意的是，请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 button，而其他浏览器中（包括 W3C 规范）的默认值是 submit。 虽然所有浏览器都支持button标签，但如果在 Html 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button 与 button/ 之间的文本，而其他浏览器将提交 value 属性的内容。 以上就是按钮的两种制作方法，我们可以当做按钮的两种形式。第三种形式就是上篇文章中说到的链接标签a制作方法。这三种方法都可以将Html中的元素做成按钮样式，如上图中所示。 至于具体的制作方法嘛，我将在下篇文章中详细讲解。如有兴趣请点击第三部分《 HYPERLINK /od/divcss/a/css-btn-3.htm \t _blank 三种按钮的制作方法》继续阅读。 CSS按钮制作方法系列_三种按钮的制作方法 CSS按钮制作方法系列_三种按钮的制作方法 来源：黄超 [ HYPERLINK /od/divcss/a/css-btn-3_p1.htm \t _blank 点