CSS让网页里的提交按钮变得更漂亮

2016-02-19 23:22 38 1 收藏

下面这个CSS让网页里的提交按钮变得更漂亮教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

      1、把按钮的背景由灰色变成黄色,下面是代码:

〈form method="POST"〉
〈input type="button" value="按钮" name="B1" style="background-color: rgb(255,255,0)"〉
〈/p〉
〈/form〉

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),说明文字是红色的楷体字,好了,通过这个例子来了解一下什么叫做样式表单。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

首先,什么叫样式表单呢?如果你使用过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)"〉 字串9 
〈/p〉
〈/form〉
其实,形式和前面讲的是一样的,只不过多了几种属性而已,font-family: 隶书;Font-size: 9pt;用来说明按钮文字是9PT大小的隶书,按钮的背景是一幅图画,用了一个background-image属性。接下去用了一个border-left属性说明按钮的左边框是隆起的,边框线是深红色的,厚度为中等。其余的就可以以此类推了,分别是用来说明按钮的右边、上边和底边的。

来源:http://www.tulaoshi.com/n/20160219/1629772.html

延伸阅读
标签: 音乐 胎教
五类音乐胎教法让宝宝更聪明 众所周知,宝宝们应该从在妈妈们的肚子里,就开始进行教育,这就是我们所说的胎教。那么,胎教的方法多种多样,孕妈妈们是否都了解呢?这里,小编就向大家介绍五种音乐胎教的方法,让你的宝宝胎教工作不落后于人,让宝宝的智力更加健康的发展! 音乐胎教的原理 怀孕4个月以后胎儿就有了听力,尤其是6个月...
标签: 新生儿 育儿
怎样让宝宝变得更聪明 新生的宝宝就像一张白纸,所以说宝宝的未来有一大半是作为父母能够给予的。那么我们如何让在这张洁白的纸上画上上出色的一笔呢?如何为宝宝打造一个聪明的大脑呢? 大脑发育分为两个阶段 第一个阶段,从怀孕到婴儿出生。 这个阶段我们称为大脑长数量的阶段。当婴儿出生时,大脑已经有大约100-80亿个脑细胞,接近成...
怎样让宝宝变得更聪明 新生的宝宝就像一张白纸,所以说宝宝的未来有一大半是作为父母能够给予的。那么我们如何让在这张洁白的纸上画上上出色的一笔呢?如何为宝宝打造一个聪明的大脑呢? 大脑发育分为两个阶段 第一个阶段,从怀孕到婴儿出生。 这个阶段我们称为大脑长数量的阶段。当婴儿出生时,大脑已经有大约100-80亿个脑细胞,接近成人...
标签: 育儿知识
12招:使宝宝更聪明    儿童发展心理学家认为,出生第一年是宝宝认知发展的关键时期。而要促进宝宝认知发展,父母并不需要专门准备古典音乐、语言磁带、五花八门的卡片等来刺激宝宝的大脑发育。其实宝宝最好的学习工具是父母和宝宝一起聊天、唱歌、阅读和欢笑生活中的亲子互动是最重要的。 有12种有趣、科学、简便的方法,它...
标签: 育儿知识
怎样让宝宝变得更聪明 新生的宝宝就像一张白纸,所以说宝宝的未来有一大半是作为父母能够给予的。那么我们如何让在这张洁白的纸上画上上出色的一笔呢?如何为宝宝打造一个聪明的大脑呢? 大脑发育分为两个阶段 第一个阶段,从怀孕到婴儿出生。 这个阶段我们称为大脑长数量的阶段。当婴儿出生时,大脑已经有大约100-80亿个脑细胞,接近...

经验教程

377

收藏

75
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部