在网页中,尤其是那种需要交互性的,都会使用到提交性质的按钮,您不觉得系统默认那些灰灰的按钮太单调了吗,而且不能够吸引访问者的注意力。下面我将通过CSS(网页样式表)和Javascript把您的网页按钮装扮的富有个性化,您也可以试着用这种方法来把按钮做的和页面整体风格一致。
首先,运用CSS定义按钮的整体风格,您可以把下面的代码放到网页的头部之间。
首先,运用CSS定义按钮的整体风格,您可以把下面的代码放到网页的头部之间。
--> |
代码说明:
input{}:
|
是说明我们要对HTML使用的具有标记的语句(也就是按钮啦)进行属性定义;
|
BACKGROUND-COLOR:
|
定义按钮的背景颜色,一般使用标准的十六进制表示法;
|
BORDER-BOTTOM:
|
定义按钮下边框边框线的属性。"#006A00"表示边框线颜色,"1px"表示下边框边框线的宽度,"solid"表示边框线为实线;
|
BORDER-LEFT:
|
定义按钮的左边框边框线的属性;
|
BORDER-RIGHT:
|
定义按钮的右边框边框线的属性;
|
BORDER-TOP:
|
定义按钮的上边框边框线的属性;
|
COLOR:
|
定义按钮上文字的颜色;
|
FONT-SIZE:
|
按钮文字的大小;
|
注意:
边框线的常见属性包括:1.实线 solid;2.虚线 dotted;3.破折号 dashed;4.双线 double;5.凹线 groove;6.凸线 ridge;7.嵌入 inset;8.开端 outset。
细心的朋友会发现这和FrontPage中关于边框属性定义是一致的,我觉得就实线和虚线在按钮边框的表现还不错,其它效果并不是很美观。
您可以充分发挥你的创造力,设置按钮边框不同的明暗度颜色,就可以创造出具有个性化颜色的立体按钮来了。怎么样,经过这样的设置后,您的按钮是不是比原来漂亮了许多呢?
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/9650775/viewspace-922743/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/9650775/viewspace-922743/