仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 908|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 给大家带来CSS让网页提交input按钮不同凡响

[复制链接]
蒙在股里 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-16 00:05:20 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
结构清晰,容易被搜索引擎搜索到,天生优化了seo

你是否是以为本人的主页不敷靓丽,想让它有所改动呢?传闻过款式表格吗?就是CSS,它就是谁人能让你更加正确地把持网页的东东。让我们先来看两个例子:

1、把按钮的背景由灰色酿成黄色,上面是代码:
〈formmethod="POST"〉
〈inputtype="button"value="按钮"name="B1"style="background-color:rgb(255,255,0)"〉
〈/p〉
〈/form〉
“form”标签就是表单的标签,“type”就是申明按钮的范例,这里申明按钮是一般的命令按钮。然后,请注重,主要的器材来了!“style”申明这里接纳了一个款式表单,而“background-color”是用来声明按钮的背景色彩属性的,前面的“rgb”则给了它的属性值,在这里“(255,255,0)”暗示是黄色。

2、把按钮笔墨的色彩酿成白色,字体酿成楷体,代码以下:
〈formmethod="POST"〉
〈inputtype="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”开首,前面随着一些属性和属性值。而且借助它们来正确地把持这个标签。属性与属性值之间以冒号离隔,属性与属性之间用分号离隔。
好了,有了以上的实际常识,我们再来接洽一下实践,上面我们再看一个对照庞大的例子:
〈formmethod="POST"〉
〈inputtype="button"value="按钮"name="B1"style="font-family:隶书;font-size:9pt;background-image:url(’/IMAGES/asp400.jpg’);border-left:mediumridgergb(128,0,0);border-right:mediumnonergb(128,0,128);border-top:mediumnonergb(0,255,0);border-bottom:mediumridgergb(255,0,0)"〉
〈/p〉
〈/form〉
实在,情势和我后面讲的是一样的,只不外多了几种属性罢了,“font-family:隶书;Font-size:9pt;”用来讲明按钮笔墨是9PT巨细的隶书,按钮的背景是一幅丹青,用了一个“background-image”属性。接下往用了一个“border-left”属性申明按钮的右边框是隆起的,边框线是深白色的,厚度为中等。其他的就能够以此类推了,分离是用来讲明按钮的右侧、上边和底边的。
所有的设计第一步就是构思,构思好了。
金色的骷髅 该用户已被删除
7#
发表于 2015-3-24 04:19:02 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
小魔女 该用户已被删除
6#
发表于 2015-3-17 08:09:11 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
柔情似水 该用户已被删除
5#
发表于 2015-3-10 13:04:12 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
只想知道 该用户已被删除
地板
发表于 2015-2-10 08:24:35 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
乐观 该用户已被删除
板凳
发表于 2015-2-4 20:35:03 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
灵魂腐蚀 该用户已被删除
沙发
发表于 2015-1-26 14:53:23 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
蒙在股里 该用户已被删除
楼主
 楼主| 发表于 2015-1-18 05:13:44 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 01:23

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表