实现div可编辑的常见方法

评论(0)浏览(128)分类:HTML/CSS兼容/XML
实现div可编辑的常见方法功能:实现网页内容的即时编辑,增加页面的可用性、交互性。方法1:直接通过textarea标签实现,请运行下边代码:+展开-HTML!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">HTMLHEADTITLENewDocument/TITLEstyletype="text/css"#info{font-size:12px;overflow:hidden;background-color:#ffffcc;color:black;padding-right:5px;padding-..

IE7- radio无法去掉内边距

评论(0)浏览(127)分类:HTML/CSS兼容/XML
IE7- radio无法去掉内边距  IE7-浏览器下,设置radio容器的margin和padding都为0都无法去掉圆点周围的补白内容,IE8和firefox浏览器可以去掉补白内容。  注:IE8需要添加xhtml申明为CSS1Compat才行。  最后只好用JS+图片来模拟radio选项,测试效果如下  获取焦点和没有焦点的2张radio图片:   源代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transiti..

IE alpha滤镜

评论(0)浏览(127)分类:HTML/CSS兼容/XML
IE alpha滤镜  IE alpha滤镜:设置透明层次语法 filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)说明opacity代表透明度水准。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。finishopacity是一个可选参数,如果想要..

CSS3 @font-face简介

评论(0)浏览(126)分类:HTML/CSS兼容/XML
CSS3 @font-face简介  @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说..

CSS在线生成网站

评论(0)浏览(126)分类:HTML/CSS兼容/XML
CSS在线生成网站  CSS代码编写是设计师的一个重要工作。写一个CSS代码和实施所需的设计任务。是非常不容易的,,今天给大家带来几个不错的工具,您可以生成在线CSS代码。节省您的时间,并自动获得一个专业的CSS代码。如果你没有css编写经验,不要紧,这几个工具正是你的所需,在线代码生成。基本上css方面的全了,像背景,布局,样式等等都包含了,哈哈CSS3.0..

HTML5实现本地存储

评论(0)浏览(125)分类:HTML/CSS兼容/XML
HTML5实现本地存储  在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:   1. HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。  2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML 的behaviour属性来存储本地..

CSS跨浏览器颜色渐变

评论(0)浏览(125)分类:HTML/CSS兼容/XML
CSS跨浏览器颜色渐变  Webkit大约在两年前推出CSS渐变特性,可惜由于大多数浏览器都对它不是很兼容,这个属性很少被使用。但是现在随着越来越多的浏览器对渐变 的支持,我们不必再通过图片来创造渐变的效果了。这篇文章将会告诉你如何通过CSS来创造对于主流浏览器都兼容的渐变:Firefox 3.6+、 Safari、Chrome和IE浏览器。对于Webkit浏览器下面代码适用于webkit浏..

firefox通过XUL实现text-overflow:ellipsis的效果

评论(0)浏览(124)分类:HTML/CSS兼容/XML
firefox通过XUL实现text-overflow:ellipsis的效果  firefox不支持text-overflow一直让人很折腾。。不过还好有大虾为我们提供解决方案。。text-overflow: ellipsis for firefoxFirefox still does not implement the proposed CSS3 text-overflow property. It does however provide a similar behaviour for the XUL description element. Furthermore, it does support XBL bindings through..

HTML技巧(二)

评论(0)浏览(123)分类:HTML/CSS兼容/XML
HTML技巧(二) HTML技巧(二)ps:部分已失效 31. 如何知道我的站点连接出现的地方?可能你的站点被其它站点连接,如何知道呢,访问搜索引擎站点:http://www.altavista.digital.com/在搜索窗口中,输入:+link:yoursite.com-host:yoursite.com这样,包含你站点连接的页面被列出,当然,你也可能什么都没有找到。32. 如何避免自己的图片被其它站点利用?为图片起..

IE DropShadow滤镜

评论(0)浏览(123)分类:HTML/CSS兼容/XML
IE DropShadow滤镜  IE DropShadow滤镜:创建对象的固定影子语法filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive) 说明 Color:#rrggbb格式,任意. Offx:X轴偏离值. Offy:Y轴偏离值. Positive:1或0.如果为TRUE(非0),就为任何的非透明像素建立可见的投影 如果为FASLE(0),就为透明的像素部分建立透明效果 例子:filter:DropShadow..

IE glow滤镜

评论(0)浏览(121)分类:HTML/CSS兼容/XML
IE glow滤镜  IE glow滤镜:在对象边缘添加类似发光效果  语法: STYLE=filter:Glow(Color=color,Strength=strength)   说明:Color:发光颜色. Strength:强度(0-100) 例子:filter:Glow(Color=#6699CC,Strength=5)   注意:作用域图片时,图片需要透明背景,要不不起作用。  IE glow滤镜测试代码和效果style body{background:#ffffff} ..

CSS背景拉伸

评论(1)浏览(121)分类:HTML/CSS兼容/XML
CSS背景拉伸 使用了滤镜,仅ie浏览器有效果divstyle="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='vv.jpg',sizingMethod='scale');width:200px;height:500px;"/div

纯CSS做的3D效果

评论(0)浏览(120)分类:HTML/CSS兼容/XML
纯CSS做的3D效果下面是一个用CSS做的一个3D的效果。你可以使用鼠标在图片中移动来显示这个效果。其实,这个效果只是能过移动图片来产生的。其可以工作在Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 和 Konqueror 3.5下。网页在这里:http://www.romancortes.com/ficheros/meninas.html

Nicholas C. Zakas谈怎样才能成为优秀的前端工程师

评论(0)浏览(120)分类:HTML/CSS兼容/XML
Nicholas C. Zakas谈怎样才能成为优秀的前端工程师Nicholas C. Zakas谈怎样才能成为优秀的前端工程师昨天,我负责了Yahoo!公司组织的一次面试活动,感触颇深的是其中的应聘者提问环节。我得说自己对应聘者们提出的大多数问题都相当失望。我希望听到一些对在Yahoo!工作充满激情的问题。在昨天的应聘者中,只有一个人的问题是我认为最好的,那个人问我:“你觉得怎么才能成为优秀的前端工程师?”..

CSS 结构和规则

评论(0)浏览(119)分类:HTML/CSS兼容/XML
CSS 结构和规则基本语法规则选择符  任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,P { text-indent: 3em }  当中的选择符是P。类选择符  单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :code.html { color: #191970 }code.CSS { co..

Dreamweaver常用技巧总结

评论(0)浏览(118)分类:HTML/CSS兼容/XML
Dreamweaver常用技巧总结实用的DW技巧:   --------------------   1.如何制作网页中的原角表格:   有几种方法,先介绍一种图片法:   第一、做两个导角的图片,这两个图片可以先做一个图片,然后到PHOTOSHOP里垂直翻转一下就行了,导角图片的做法,我简单的给大家介绍一下,首先用PHOTOSHOP先画一个矩形,然后羽化,然后level。然后切图。OK!   第二、 在中间..

IE5+的 Behavior HTC文件

评论(0)浏览(117)分类:HTML/CSS兼容/XML
IE5+的 Behavior HTC文件  在以往DHTML中想要共用一段程式码时,都是使用include的方式把程式码放进来,如果该程式需配合Event的运作(如:在TextBox中的onKeyPress()),还得定义该Event发生时需要执行哪一段程式,这些都使得程式变得难看且不易维护。IE5有了Behavior后,我们可以定义某个元件有哪些Behavior(例如:该TextBox只能输入0-9 或该TextBox是输入病歷号,所以..

关于IE的layOut bug

评论(0)浏览(116)分类:HTML/CSS兼容/XML
关于IE的layOut bug  在开发中我们常会在ie中遇到很多莫名的bug,尤其是ie6这个早就该退出历史的浏览器。刚刚在haslayout.net上看到有总结ie的一些 bug,分享一下。1.图片label bug,影响版本ie6/ie7/ie8,当label中有img的时候无法触发点击选中form元素事件.demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.htmlfix demo http://haslayout.net/dem..

Firefox下浮动布局时空白边叠加问题

评论(0)浏览(116)分类:HTML/CSS兼容/XML
Firefox下浮动布局时空白边叠加问题  在Firefox下,如果采用div+css浮动控制页面布局时,如果一个div设置了margin-top,并且使用clear:both清除浮动时,margin-top并未显示出来,而是和处于其上面的浮动div叠加在一起了。源代码如下所示,结果如图1所示+展开-HTMLstyletype="text/css".outerDiv{padding:4px;border:solid2pxblack;}.innerDiv{border:solid2px#ff7f27;height:50..

DTD 验证

评论(0)浏览(116)分类:HTML/CSS兼容/XML
DTD 验证  Internet Explorer 5.0 可根据某个 DTD 来验证您的 XML。通过 XML 解析器进行验证  当您试图打开某个 XML 文档时,XML 解析器有可能会产生错误。通过访问 parseError 对象,就可以取回引起错误的确切代码、文本甚至所在的行。注释:load( ) 方法用于文件,而 loadXML( ) 方法用于字符串。+展开-JavaScriptvarxmlDoc=newActiveXObject("Mic..

div高度在IE6显示不正常

评论(2)浏览(115)分类:HTML/CSS兼容/XML
div高度在IE6显示不正常  当一个div的高度设置为很小时,如1px,在FireFox和其他w3c浏览器中显示正常,可是在I中却不止1像素高。原因是IE文字有个最小高度,对次div增加一个font-size:1px样式就能解决问题此问题。方法一定义一个CSS样式,在DIV调用其样式+展开-HTMLstyletype="text/css".test{height:1px;font-size:1px;}/styledivclass="test"/div  在IE6里实现,..

head区的其他设置

评论(0)浏览(115)分类:HTML/CSS兼容/XML
head区的其他设置这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。收藏夹小图标如果你将本站加入收藏夹,可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单,首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码..

Canvas绘制时钟

评论(0)浏览(114)分类:HTML/CSS兼容/XML
Canvas绘制时钟  在html5-Canvas API,介绍了基础的canvas方法,现在使用javascript+Canvas绘制时钟做一个示例。  在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及 html5 Canvas的路径绘图,beginPath,closePath,rect,arc等,还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制,save,restore。  javascript+Canv..

css text-transform属性介绍

评论(1)浏览(114)分类:HTML/CSS兼容/XML
css text-transform属性介绍CSS text-transform 属性定义和用法text-transform 属性控制文本的大小写。说明这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个词。默认值:none继承性:yes版本:CSS1JavaScript 语法:object.style.text..

ie条件注释详解

评论(0)浏览(113)分类:HTML/CSS兼容/XML
ie条件注释详解ie浏览器的条件注释理论,用下面一段例子来解释这个问题(X)HTML下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果:+展开-HTML!--[ifIE]h1您正在使用IE浏览器/h1![endif]--!--[ifIE5]h1版本5/h1![endif]--!--[ifIE5.0]h1版本5.0/h1![endif]--!--[ifIE5.5]h1版本5.5/h1![endif]--!--[ifIE6]h1版本6/h1![endif]--!--[ifIE7]h1版本7/h1![e..

text-overflow:ellipsis溢出文本显示省略号的详细方法

评论(0)浏览(113)分类:HTML/CSS兼容/XML
text-overflow:ellipsis溢出文本显示省略号的详细方法今天有朋友在52css.com的留言板提出一个问题:为什么 text-overflow:ellipsis的时候没有任何效果呀?text-overflow是一个比较特殊的属性,在CSS手册中,这个属性是这样定义的:  语法:   text-overflow : clip | ellipsis   参数:   clip :  不显示省略标记(...),而是简单的裁切  (clip这个参数是不常用的!)  ellipsis :  ..

Firefox及W3C浏览器table设置margin属性不居中

评论(0)浏览(113)分类:HTML/CSS兼容/XML
Firefox及W3C浏览器table设置margin属性不居中  在W3C浏览器下,如firefox或者google的chrome浏览器,如果给table设置了margin:0px属性,再设置align="center"时,发现会无法居中了。IE浏览器不会出现这个问题。⊙﹏⊙b汗  有可能是设置了margin后,table变成块级元素了,而不是行级元素。因为设置成margin:0px auto后,去掉align="center",居然可以居中。  发现这个问题还是因为同时..

Document Object Model Events

评论(0)浏览(110)分类:HTML/CSS兼容/XML
Document Object Model Events1. Document Object ModelEventsEditorsTom Pixley, Netscape Communications Corp.Table of contents1.1. Overview of the DOM Level 2 EventModel 1.1.1. Terminology1.2.Description of event flow 1.2.1. Basic event flow1.2.2. Event capture1.2.3. Event bubbling1.2.4. Event cancelation1.3. Event listener registration 1.3.1. Event..

添加了DOCTYPE XHTML声明时设置绝对位置对象需要加单位

评论(0)浏览(110)分类:HTML/CSS兼容/XML
添加了DOCTYPE XHTML声明时设置绝对位置对象需要加单位  在Firefox,IE下,如果添加了DOCTYPE,XHTML声明,则要设置display为absolute,绝对位置的对象时,需要加上单位,如px,要不没有效果,测试用例如下+展开 -HTML!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htmlheadmetahttp-equiv="content-type"content="text/html..

防止选择,兼容ff和ie

评论(0)浏览(110)分类:HTML/CSS兼容/XML
防止选择,兼容ff和ie防止用户选择页面的内容,阻止系统右键弹出菜单+展开-HTMLscriptdocument.oncontextmenu=function(){returnfalse;}document.onselectstart=function(){returnfalse;}//这个函数是对ie/scriptstylehtml,body{height:100%;width:100%;padding:0px;margin:0px;}/*下面这个css是firefox防止选择的,firefox没有onselectstart事件*/body{-moz-user-fo..