来谈谈：CSS3实例进修教程:data范例的Url

只看该作者 · 发表于 2015-1-15 23:11:04

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

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

x

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
破洛洛文章简介：小例子：上面这个html代码能够在撑持data范例Url的扫瞄器中运转，比方Firefox。
所谓"data"范例的Url格局，是在RFC2397中提出的，目标关于一些“小”的数据，能够在网页中间接嵌进，而不是从内部文件载进。比方关于img这个Tag，哪怕这个图片十分十分的小，小到只要一个点，也是要从别的一个内部的图片文件比方gif文件中读进的，假如扫瞄器完成了data范例的Url格局，这个文件就能够间接从页面文件外部读进了。
data范例的Url格局早在1998年就提出了，时至昔日，Firfox、Opera、Safari和Konqueror这些扫瞄器都已撑持，可是IE直到7.0版本都还没有撑持，IE不撑持的器材太多了，也不差这一个。:(
小例子：上面这个html代码能够在撑持data范例Url的扫瞄器中运转，比方Firefox。
运转后会看到一条蓝色突变底色的题目。
01<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
02"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03<htmlxmlns="http://www.w3.org/1999/xhtml">
04<head>
05<styletype="text/css">
06.title{
07background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
08background-repeat:repeat-x;
09height:28px;
10line-height:28px;
11text-align:center;
12}
13</style>
14</head>
15<body>
16<divclass="title">Hello,world!</div>
17</body>
18</html>

这个突变的蓝色底色实践上是用一个1x28的小图片经由过程横行反复(repeat-x)构成的。
这个图片很小，不外104个字节，间接嵌进到html或css文件仍是很符合的。
data格局的Url最间接的优点是，这些Url底本会引发一个新的收集会见，由于那边是一个网页的地点，如今不会有新的收集会见了，由于如今这里是网页的内容。如许做，会削减服务器的负载，
固然同时也增添了以后网页的巨细。以是对“小”数据出格有优点。
data范例Url的情势
既然是Url，固然也能够间接在扫瞄器的地点栏中输出。
data:text/html,<html><body><p><b>Hello,world!</b></p></body></html>
在扫瞄器中输出以上的Url，会失掉一个加粗的"Hello,world!"。
也就是说，data:前面的数据间接用做网页的内容，而不是网页的地点。
复杂的说，data范例的Url大抵有上面几种情势。

01data:,<文本数据>
02data:text/plain,<文本数据>
03data:text/html,<HTML代码>
04data:text/html;base64,<base64编码的HTML代码>
05data:text/css,<CSS代码>
06data:text/css;base64,<base64编码的CSS代码>
07data:text/javascript,<Javascript代码>
08data:text/javascript;base64,<base64编码的Javascript代码>
09data:image/gif;base64,base64编码的gif图片数据
10data:image/png;base64,base64编码的png图片数据
11data:image/jpeg;base64,base64编码的jpeg图片数据
12data:image/x-icon;base64,base64编码的icon图片数据

由于Url是一种基于文本的协定，以是gif/png/jpeg这类二进制属于必要用base64举行编码。
换句话说，引进base64今后，就能够撑持恣意情势的数据格局。
能够在Html的Img工具中利用，比方
<imgsrc="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..."/>
能够在Css的background-image属性中利用，比方

1div.image{
2width:100px;
3height:100px;
4background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
5}

能够在Html的Css链接处利用，比方
<linkrel="stylesheet"type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..."/>
能够在Html的Javascript链接处利用，比方
<scripttype="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完全的语法界说
在RFC中，完全的语法界说以下。
dataurl:="data:"[mediatype][";base64"]","data
mediatype:=[type"/"subtype]*(";"parameter)
data:=*urlchar
parameter:=attribute"="value
urlchar指的就是一样平常url中同意的字符，有些字符必要本义，
比方"="要本义为"%3D"，不外我测试上去，最少在Firefox内里，不本义也是能够的。
parameter能够对mediatype举行属性的扩大，罕见的是charset，用来界说编码格局，在多言语情形下必要用到。
比方上面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显现出"你好，中文！"。假如吧charset部分往失落，就会显现乱码，由于我用的是UTF-8编码。
Firefox有一个data范例Url的测试页面，列出了各类格局的data范例Url的测试Url，和测试了局申明。
base64编码和内容的秘密
把二进制数据转换成为Base64不是甚么难事，好比TotalCommander就有如许的功效。另有一些在线资本，
http://www.greywyvern.com/code/php/binary2base64
有些在线转换把base64内里的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没甚么成绩。
固然，这类Url另有一种秘密的优点，就是将一些不苟言笑者不喜好的器材，冠冕堂皇的放在页面上。
</p>
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。

只看该作者 · 发表于 2015-1-17 07:34:59

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-1-20 15:45:43

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-1-29 12:36:24

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-2-6 01:00:30

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-2-14 19:27:51

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-4 10:01:22

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-11 18:17:46

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-3-19 07:19:46

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-27 14:08:40

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：CSS3实例进修教程:data范例的Url

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

相关帖子