在网页制作中,表单中的对象总是给人一种单调与沉闷的感觉,比如说按钮、文本框等,它们一成不变的模样与颜色出现在页面上时,或多或少都会破坏页面的美观程度,就像我才作的那个登陆页面。

第一种效果:无立体效果的文本框与按钮
  在网页的与标签之间插入这个样式表:

好了第一步就完成了,下一步我们就分别在文本框与按钮的htm语句中加上这一句代码:class=login
例:

好了,可以看一下文本效果与按钮效果了:

第二种效果:带颜色的下划线式文本框与按钮效果

  同样,我们也需要样式表的帮助来实现这个效果,和第一种效果的操作步骤一样在网页的与标签之间插入样式表,

  这个效果的实现是通过两个样式来实现的,一个是文本框的,一个是按钮的,所以在文本框与按钮的htm语句中就需要插入两句不同的代码,在文本框中插入的是class=smallInput代码.
例:
在按钮语句中插入的是 class=”buttonface”代码.
例:
其实这就对应了样式表中文本框与按钮的样式,最后的效果如下图所示:

第三种效果:文本框的自动聚焦

把下面这一段代码加到与之间:这里的代码用到了上面的第一种效果的CSS。
用  户

密  码

第四个:把提交和重设按钮替换为自己的图片:


呵呵,就这么简单,试试吧~
如果想在按钮上使用图片的话 可以用button标签 在button里可以使用绝大部分html标签 你可以实现文字和图片的混排
例:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.