让网页里的提交按钮变得更靓丽

按钮|网页

你是不是觉得自己的主页不够靓丽,想让它有所改变呢?听说过样式表格吗?就是CSS,它就是那个能让你更为准确地控制网页的东东。让我们先来看两个例子:

1、把按钮的背景由灰色变成黄色,下面是代码:
〈form method="POST"〉
〈input type="button" value="按钮" name="B1" style="background-color: rgb(255,255,0)"〉
〈/p〉
〈/form〉
“form”标签就是表单的标签,“type”就是说明按钮的类型,这里说明按钮是普通的命令按钮。然后,请注意,重要的东西来了! “style”说明这里采用了一个样式表单,而“background-color”是用来声明按钮的背景颜色属性的,后面的“rgb”则给了它的属性值,在这里“(255,255,0)”表示是黄色。

2、把按钮文字的颜色变成红色,字体变成楷体,代码如下:
〈form method="POST"〉
〈input type="button" value="按钮" name="B1" style="background-color:rgb(255,255,0); font-family:楷体_GB2312; color: rgb(255,0,0)"〉〈/p〉
〈/form〉
看一下是不是多了些什么东西?对了,多了两个属性:“font-family”和“color”,前一个是字体属性,后一个是字体的颜色属性,它们的值分别是:楷体_GB2312和rgb(255,0,0),说明文字是红色的楷体字,好了,通过这个例子来了解一下什么叫做样式表单。
首先,什么叫样式表单呢?如果你使用过Word就知道只需要设置一次版面配置和打印格式,那么在该文件内所有的页面都具有了相同的格式,而样式表单起的也就是这个作用,在同一个网站只需要提供一份样式表单,然后在所有页引用它,那么整个网站都会有相同的格式。样式表单一共有三种。
第一种是外部网页样式表单。它是一个以CSS为后缀名的文件,相当于一个模板,设置好以后只需要在网页内部引用它,就能够使引用的网页具有相同的格式。
第二种是内嵌式的网页样式表单,它一般在申明,它只对本网页起作用,同时如果你已经使用了外部样式表单,那么它将被内嵌式的网页样式表单屏蔽。
第三种叫做内联式样式表单,用于一段文字,一个表格,或者是一幅图形。在前面,我们用的就是这种样式表单,请注意,它通常是接在一个我们比较熟悉的HTML标签之后,比如前文的“input”标签,以“style”开头,后面跟着一些属性和属性值。并且借助它们来准确地控制这个标签。属性与属性值之间以冒号隔开,属性与属性之间用分号隔开。
好了,有了以上的理论知识,我们再来联系一下实际,下面我们再看一个比较复杂的例子:
〈form method="POST"〉
〈input type="button" value="按钮" name="B1" style="font-family: 隶书; font-size: 9pt; background-image: url(’file:///D:/Inetpub/wwwroot/asp/wwwboad/IMAGES/asp400.jpg’); border-left: medium ridge rgb(128,0,0); border-right: medium none rgb(128,0,128); border-top: medium none rgb(0,255,0); border-bottom: medium ridge rgb(255,0,0)"〉
〈/p〉
〈/form〉
其实,形式和我前面讲的是一样的,只不过多了几种属性而已,“font-family: 隶书;Font-size: 9pt;”用来说明按钮文字是9PT大小的隶书,按钮的背景是一幅图画,用了一个“background-image”属性。接下去用了一个“border-left”属性说明按钮的左边框是隆起的,边框线是深红色的,厚度为中等。其余的就可以以此类推了,分别是用来说明按钮的右边、上边和底边的。
试试看,你的主页是不是漂亮多了?

时间: 2024-10-12 00:29:35

让网页里的提交按钮变得更靓丽的相关文章

C#初学者问题 :提交按钮只点击一次就被禁用了,以后都不用

问题描述 使用this.btnSubmit.Enabled=false;后,为什么返回来查看提交页面,提交按钮又恢复可以提交了呢求帮忙,谢谢 解决方案 解决方案二:你这个返回来是怎么个返回法?解决方案三:就是提交后,提交按钮变灰只是暂时不可用了,如果从其他页面再跳到含有提交按钮的这个页面后,仍然可以提交,没有达到提交按钮以后都不可用的效果.解决方案四:引用1楼shingoscar的回复: 你这个返回来是怎么个返回法? 就是提交后,提交按钮变灰只是暂时不可用了,如果从其他页面再跳到含有提交按钮的这

js中表单提交后按钮变灰色的功能

在点击"Submit按钮"之后,将Submit设置为Disable,使按钮变灰不可用,具体的做法如下: 1.先在Form里加入:  代码如下 复制代码 onSubmit="submitonce(this)" 2.再在"Submit按钮"之前加入下面的代码:  代码如下 复制代码 <html> <head> <meta http-equiv="Content-Type" content="

急急急 asp.net 修改密码页面 按提交按钮后,数据库密码已经修改,但网页弹框提示修改失败

问题描述 非常急,求助大家我在做一个网站修改用户密码页面按提交按钮后弹框说我修改失败但是在数据库里查看用户密码已经被修改 解决方案 解决方案二:那要看你的判断语句是怎样写的.解决方案三:就你这句话没人知道原因,代码呢--解决方案四:页面判断数据库sql语句执行成功代码错误.解决方案五:要么就是提示打错字了.解决方案六:有代码没,帮你看看解决方案七:这个一看就是你写判断地方的问题.仔细看看解决方案八:没码说个卵

JSP防止网页刷新重复提交数据的几种方法_javascript技巧

本篇文章主要介绍了网页如何防止刷新重复提交与如何防止后退的解决方法,具体如下: 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,按F5刷新怎么办? 使用Session 在提交的页面也就是数据库处理之前: if session("ok")=true then response.write "错误,正在提交" response.end end if 数据处理完后,修改session("ok")=false. 数据处理成功马上Redirec

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

怎样在Dreamweaver中创建提交按钮

  相信大家多多少少都会做过网页版的问卷调查,或者一些淘宝交易,这个时候,我们需要将信息提交,这里细心的朋友会发现,有些网页的提交按钮做得很漂亮,吸引了不少人的点击. 所以我们在Dreamweaver制作网页时,不妨花点心思,这里小编给大家分享制作图形提交按钮的制作步骤,希望对大家有所帮助. 一.在Dreamweaver中创建图形提交按钮 1. 点击鼠标,将光标定位在表单框线内,点击"插入"菜单,选择"表单"项,在弹出的子菜单中选择"图像域"命令

网页设计中的按钮设计

在网页设计中,按钮设计是常被忽略却又相当重要的一个角色.在网页设计中,按钮与链接的功能类似,都是经过点击后到达另一页面或实现某种目的,不过二者还是有实际上的区别的. 按钮代表着"做某件事",即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的.并且绝大多数都是对表单的提交.从技术上讲,这类按钮的作用是向后台提交了数据,"命令"服务器去做了一件事.而链接则是带你去另一个页面,从功能属性上而言,它是看,而非是做. 按钮和链接的另一区别就是它的眼球效应.因此

冒泡排序-java入门新人求代码:html中如何让一个提交按钮运行十个空格。

问题描述 java入门新人求代码:html中如何让一个提交按钮运行十个空格. 是这样,我做一个网页版的冒泡排序,对10个数字进行冒泡排序,每个数字占一个空格(表格), 然后设定一个提交按钮,点击这个按钮后可以对这十个空格的数字进行冒泡排序. 请不吝指教,谢谢. 要完整的代码,谢谢. 解决方案 可以这样写 ......复制十遍 用个form表单包着,这样就可以随机让别人输入10个数了,再加个ajax点击事件,这样点击它后台通过request.getparametervalues("shuzhi&q

getview-在listview中,在点击某行按钮后,按钮变灰。其它的行的按钮也变灰了。

问题描述 在listview中,在点击某行按钮后,按钮变灰.其它的行的按钮也变灰了. 在listview中,每行显示一个图片.一个按钮及说明文字,在点击某行按钮后,按钮变灰.但是发现点击某行的按钮后,在滑动界面时,发现其它的行的按钮也变灰了.请问这是什么问题? 下面是listview中getView方法代码: @Override public View getView(final int position, View convertView, ViewGroup parent) { ViewHo