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

CSS按钮的制作方法系列文章_按钮与链接本文是CSS按钮的制作方法系列文章第一部分：按钮与链接。在上篇文章中我曾提到过一点，按钮在网页中最常用的作用是提交表单，以及作为一个动作的开始按钮，有的时候可以作为页面中着重突出的内容。“提交表单”这个很容易理解，无非是在一个表单的最后添加上“提交”、“重填”这样的按钮，比如注册会员表单、调查表等。“动作的开始按钮”即一个或一系列动作的开始按钮，其实提交表单也属于这种作用之一，只是作为动作的开始按钮可以运用的更灵活，比如淘宝商铺购买页面的“立即购买”和“加入购物车”按钮，如上图中所示，它是开启下一个动作的按钮，也可以说是提交购买数量的表单提交按钮。而图中的“在线申请”和“点击阅读”按钮则仅仅是一个动作开始按钮。有人会问，“着重突出的内容”和开始按钮不是一样的吗？其实在表面意义上是相同的，但在其“内在”有着本质的不同，“内在”其实就是“源代码”。有时候着重突出的内容虽然在设计时做的像个按钮，但在制作页面时却是用链接标签制作成一个链接。为什么要这样做？第一，为了CSS语义的正确性，因为页面中着重突出的内容本身不是按钮，只是做成了按钮的样子而已；第二，为了SEO优化，如果一个页面中突出的内容制作成一个按钮，为了让其打开后面的页面，必须写一段Javascript，让其有点击触发的效果，但搜索引擎的搜索爬虫不能由此按钮爬到更深一步的页面。而如果将其做成一个链接，爬虫会顺理成章地从该链接搜索到下一个页面，从而保持网站被搜索引擎抓取的纵深和连续性。所以，形式虽然都是按钮，却存在着几种细微的差别，不知道通过上面的讲解，您对它们是否有了一定的了解？不理解也没关系，以后慢慢体会、慢慢消化。如果对此已烂熟于胸，那就即刻进入第二部分三种按钮形式，以及它们的优缺点。CSS按钮制作方法系列文章_按钮形式及优缺点本文是CSS按钮的制作方法系列文章第二部分：三种按钮形式，以及它们的优缺点。在上篇文章中，我提到了按钮的三种作用和两种制作方法。三种作用分别是：提交表单、动作开始按钮和着重突出；两种制作方法是：制作成按钮和制作成链接。有些朋友会出现疑问，上篇文章中明明写的是两种制作方法，为什么这篇文章又说是三种按钮形式及优缺点呢？因为从制作方面讲，按钮除了前面文章中提到的input和链接标签，还有一种制作方法：button。input和button都可以制作按钮，它们制作按钮的代码分别是： 和 在线申请以“/”作为结尾，利用type定义类型，让其变为按钮、复选框、单选框等等，而当其是提交按钮时type类型为submit，可见其着重体现“提交”这个意义。以结尾，相比input而言，提供了更为强大的功能和更丰富的内容。与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像，比如这样写：在线申请 在线申请 需要注意的是，请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 button，而其他浏览器中（包括 W3C 规范）的默认值是 submit。虽然所有浏览器都支持标签，但如果在 Html 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与 之间的文本，而其他浏览器将提交 value 属性的内容。以上就是按钮的两种制作方法，我们可以当做按钮的两种形式。第三种形式就是上篇文章中说到的链接标签制作方法。这三种方法都可以将Html中的元素做成按钮样式，如上图中所示。至于具体的制作方法嘛，我将在下篇文章中详细讲解。如有兴趣请点击第三部分三种按钮的制作方法继续阅读。CSS按钮制作方法系列_三种按钮的制作方法CSS按钮制作方法系列_三种按钮的制作方法 来源：黄超点击放大 本文是CSS按钮的制作方法系列文章第三部分：三种按钮的制作方法。在上篇文章中，我提到了三种按钮，它们是用和html代码input制作的按钮、用button制作的按钮和用链接标签制作的按钮。本篇文章将讲解三种按钮的制作方法。其实按钮的制作并不难，在前面的文章中我也曾提到过，可以参阅用CSS制作个性化按钮这篇文章。这篇文章中只提到了用input制作按钮，但这次文章中还涉及了button和a的用法，所以会进行更全面的介绍。先请看上面图中所示，最左侧的一排是没有用CSS修饰的源代码input、button、a预览时的原始样式，要想让它们成为最右侧的按钮样式必须经过CSS修饰才可以。下面就开始制作步骤。在图中从上至下的Html代码是： 在线申请 点击阅读 将上面的代码复制到网页源代码中，在浏览器中预览一下，效果应该如上图中所示。下面就开始利用CSS对按钮进行修饰。CSS代码如下： 经过上面的CSS修饰，三个按钮就会变成上图最右边那排按钮的样式，但要注意CSS中的背景图片路径。到这里，三种按钮的简单制作方法就算完成了，如果想为按钮的效果升级或学习更高级的制作方法请继续关注下篇文章第四部分：按钮的高级制作方法，增强特效的方法等。CSS按钮的制作方法系列文章-按钮特效css按钮特效 来源：黄超点击放大 本文是CSS按钮的制作方法系列文章第四部分：按钮的高级制作方法，增强特效等。在上篇文章中，讲解了三种按钮的制作方法，三者最终完成效果相同。为了优化增强网站与用户的交互体验，给网页中的按钮加上一些特效是非常友好的选择，比如一些突出的修饰效果、翻转效果等。一提到翻转效果，自然会联想起鼠标悬浮状态和点击后状态。在input、button、a三种按钮的制作方法中，鼠标悬浮时翻转效果制作起来都不难，但最简单的还要属标签，因为它仅用:hover、:active两个伪类就可以完成效果制作。虽然input和button也可以用:hover和:active伪类定义，但二者的效果仅被一些现代浏览器支持，诸如IE7以上版本、Firefox、Opera、Chrome等等，如果非要让input和button在IE6等浏览器中也具有悬浮时的翻转效果也不是没有办法，那就需要用到一小段Javascript代码，这里暂且不讨论。一、鼠标悬浮时的翻转效果 CSS代码如下：a:hover,button:hover,input:hover background:url(btnbg2.gif); 这里仅列出了鼠标悬浮时状态的CSS代码，其余按钮Html、CSS代码请参阅上篇文章三种按钮的制作方法，btnbg2.gif要事先准备好，即为上图中鼠标悬浮时状态背景图。既然有了鼠标悬浮状态的效果，那就再添加一个鼠标点击后的效果：a:visited background:url(btnbg3.gif); 需要注意的是，按照伪类LoVe-HAte的原则，这段CSS要添加在伪类:hover的前面，即：a:visited background:url(btnbg3.gif); a:hover,button:hover,input:hover background:url(btnbg2.gif); 二、修饰图片在按钮上添加一些修饰图片也可以起到突出按钮的作用，比如上图中最下面的按钮，上面多了一个绿色的小对勾，在无形间多少勾起了用户的点击欲望。使用input和a标签制作方法，这个效果只需要使用背景图就能搞定，但使用button方法制作则更为简单，只需要准备一张小小的透明对勾图片，然后将图片插入到Html代码的与之间即可，比如： 在线申请 三、滑动门效果利用滑动门效果，可以让按钮的长度根据按钮中的文字长度自动伸展，具体制作方法可以参考滑动门效果及其制作方法这篇文章。到这里，几种按钮的特效部分就算完成了，如果想在制作方面和显示效果方面有更多提高，请继续关注下篇文章第五部分：其它按钮特效及制作方法。CSS按钮的制作方法系列文章-其它按钮特效css3圆角按钮 来源：smashingmagzine点击放大 本文是CSS按钮的制作方法系列文章第五部分：其它按钮特效以及制作方法等。在前面的文章中，已经讲了按钮和链接的主要区别，不同的作用以及不同的制作费方法等。本文将向您介绍一些按钮的特殊效果及制作方法。为了追求比较好的显示效果和精简的结构源代码，许多制作者会采用一些以前系列文章中没有用到的方法，比如CSS3和CSS Sprite。CSS3在按钮制作中的应用windows默认浏览器中的按钮几乎都是直角形状的，如果欲将网页中的按钮做成圆角，原来只能靠背景图来完成，但现在或者不久的将来就可以使用CSS3来完成了。如上图中所示，方法1中可以使用背景图和边框可以定义按钮的样式；方法2中使用Firefox和webkit核心浏览器的特有CSS样式也可定义按钮样式，这个方法和CSS3相同，目前只有少量浏览器支持，但以后应该可以广泛应用，示例：input,button border-radius:50px 25px; 具体方法可查看这篇文章CSS3新体验之一_圆角效果。css sprite 背景图 来源：黄超点击放大CSS Sprite在按钮制作中的应用上篇文章中已经给（链接）按钮加上了鼠标悬浮状态和点击后状态，但有时候鼠标悬浮在按钮上时背景会发生闪烁现象，这是由于鼠标触发翻转效果时页面需要立即读取CSS中的背景图片，造成短暂的空白间隙。使用一张同时包含按钮的默认状态、鼠标悬浮状态和点击过后状态的背景图片，利用CSS背景属性进行定义，可以有效解决这个问题，这就是CSS Sprite技术。使用CSS Sprite技术，重要的就是CSS背景属性和背景图片的准确使用，首先将图片制作好，如上图所示。然后在CSS中定义：a background:#FFF url(buttons.gif) 0px 0px no-repeat; a:hover background-position:-42px 0px; /*经过时的背景位置*/ a:active background-position:-84px 0px; /*点击后的背景位置*/ 经过使用CSS Sprite这么简单的几步定义，既解决了背景闪烁的问题，又减少了用户浏览对服务器的请求数量，可谓一举两得。详细的CSS Sprite技术文章请参考什么是CSS Sprite。滑动门效果及其制作方法网站承诺：阿邦网坚持写作客观独立的立场，永远不受金钱影响。秉承为人民生活服务的宗旨，与您分享特邀帮手的经验和知识，帮您解决生活问题，提高生活品质。本文系阿邦网独家稿件，未经许可，任何媒体和个人，不得全部或部分转载，违者必究。 css滑动门效果示意图 来源：smashingmagzine点击放大 滑动门大家都听说过，就是那种带有轨道的可以左右推拉的门。而网页制作范畴中的滑动门效果指的又是什么呢？ 网页制作范畴中的滑动门效果是个舶来品，最早出现在国外的制作圈，英文全称为：Sliding Doors。 它主要用在制作可伸展的按钮或tab标签时，它和生活中的滑动门相似之处在于按钮或tab标签的背景图可根据元素中文本字数的多少自动延伸，如上图中所示，即右侧的图片可以根据文字数量的增多一直向右滑动。css滑动门背景图 来源：黄超点击放大 知道了原理，制作起来就轻松的多，下面我介绍一下滑动门效果的制作方法。 如果在按钮中使用滑动门效果，那么按钮的制作方法必须使用标签，因为input中不能再加入可以添加背景其它标签，button中也没有合适的标签可以使用。详细理由可以参阅这篇文章，这里不再赘述。 使用标签制作的话，Html应如下： 滑动门按钮文字 CSS代码如下： a background:url(button_right.gif) no-repeat top right; display: block; float: left; padding-right:10px; height:33px; line-height:33px; a span background: url(button_left.gif) no-repeat; display: block; padding-left:10px; height:33px; line-height:33px; 在制作滑动门效果前，先准备两