<![CDATA[dudumao's blog - 前端开发]]> http://blog.dudumao.net/ zh-cn PBlog2 v2.4 dudumao's blog http://blog.dudumao.net/images/logos.gif http://blog.dudumao.net/ dudumao's blog http://blog.dudumao.net/article.asp?id=186 <![CDATA[XHTML语言默认的CSS样式]]> dudumao1860#163.com(dudumao) Mon,02 May 2011 13:56:31 +0800 http://blog.dudumao.net/default.asp?id=186 html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,
dir,hr,menu,pre { display:block}

li { display:list-item}

head { display:none}

table { display:table}

tr { display:table-row}

thead { display:table-header-group}

tbody { display:table-row-group}

tfoot { display:table-footer-group}

col { display:table-column}

colgroup { display:table-column-group}

td,th { display:table-cell;}

caption { display:table-caption}

th { font-weight:bolder;text-align:center}

caption { text-align:center}

body { margin:8px;line-height:1.12}

h1 { font-size:2em;margin:.67em0}

h2 { font-size:1.5em;margin:.75em0}

h3 { font-size:1.17em;margin:.83em0}

h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu { margin:1.12em0}

h5 { font-size:.83em;margin:1.5em0}

h6 { font-size:.75em;margin:1.67em0}

h1,h2,h3,h4,h5,h6,b,strong { font-weight:bolder}

blockquote { margin-left:40px;margin-right:40px}

i,cite,em,var,address { font-style:italic}

pre,tt,code,kbd,samp { font-family:monospace}

pre { white-space:pre}

button,textarea,input,object,select { display:inline-block;}

big { font-size:1.17em}

small,sub,sup {font-size:.83em}

sub { vertical-align:sub}

sup { vertical-align:super}

table { border-spacing:2px;}

thead,tbody,tfoot { vertical-align:middle}

td,th { vertical-align:inherit}

s,strike,del { text-decoration:line-through}

hr { border:1pxinset}

ol,ul,dir,menu,dd { margin-left:40px}

ol { list-style-type:decimal}

ol ul,ulol,ul ul,olol {margin-top:0;margin-bottom:0}

u,ins { text-decoration:underline}

br:before { content:"\A"}

:before,:after {white-space:pre-line}

center { text-align:center}

abbr,acronym { font-variant:small-caps;letter-spacing:0.1em}

:link,:visited {text-decoration:underline}

:focus { outline:thindottedinvert}

/* Beginbidirectionalitysettings(donotchange)*/

BDO[DIR="ltr"] { direction:ltr;unicode-bidi:bidi-override}

BDO[DIR="rtl"] { direction:rtl;unicode-bidi:bidi-override}

*[DIR="ltr"] { direction:ltr;unicode-bidi:embed}

*[DIR="rtl"] { direction:rtl;unicode-bidi:embed}

h1 { page-break-before:always}

h1,h2,h3,h4,h5,h6 { page-break-after:avoid}

ul,ol,dl { page-break-before:avoid}

]]> http://blog.dudumao.net/article.asp?id=185 <![CDATA[跳转转菜单在新窗口打开]]> dudumao1860#163.com(dudumao) Wed,06 Apr 2011 03:54:34 +0800 http://blog.dudumao.net/default.asp?id=185 跳转菜单于主窗口打开：
JavaScript代码
  1. function MM_jumpMenu(targ,selObj,restore){ //v3.0   
  2. eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");   
  3. if (restore) selObj.selectedIndex=0;   
  4. }  

跳转菜单于新窗口打开：

JavaScript代码
  1. function MM_jumpMenu(targ,selObj,restore){ //v3.0   
  2. window.open(selObj.options[selObj.selectedIndex].value,'','');   
  3. if (restore) selObj.selectedIndex=0;   
  4. }   

 

]]> http://blog.dudumao.net/article.asp?id=178 <![CDATA[秒杀所有版本IE的HTML代码]]> dudumao1860#163.com(dudumao) Mon,01 Nov 2010 00:00:00 +0800 http://blog.dudumao.net/default.asp?id=178 　　在西方万圣节即将到来之际，让我们来看一个真正吓人的东西——如何用一段简单的HTML和CSS，将任何版本的IE搞死。 将下面的代码复制，然后保存文件，例如demo.html。然后用Internet Explorer打开它——哈哈！

　　这个bug几乎存在于现在流行的所有IE版本，从IE6到刚刚发布的IE9的第6个平台预览版。在IE6中，该页面显示为空白，但是整个窗口都无法交互。在IE8中，彻底崩溃。而IE9 Beta增强了坚固性，经实测会导致整个进程无响应，而IE9偶尔会提示你网页存在的问题，但是这都无法避免崩溃的现实。

 

XML/HTML代码
  1. <html>
  2. <head>  
  3. <style type="text/css">  
  4. #a {  
  5. margin:0 10px 10px;  
  6. }  
  7.   
  8. #b {  
  9. width:100%;  
  10. }  
  11.   
  12. </style>  
  13. <title>IE Crasher</title>  
  14. </head>  
  15. <body>  
  16. <table><tr><td>  
  17. <div id="a">  
  18. <form id="b">  
  19. <input type="text" name="test"/>  
  20. </div>  
  21. </td><td width="1"></td></tr></table>  
  22. </body>
  23. </html>  

 

　　当然，如果你细心的话，会发现上面的HTML代码中<form>标签没有闭合。我们需要在<input>标签后使用</form>闭合标签才能让这段代码符合规范。规范的代码就不会让IE崩溃了，这样看来似乎并不是IE的错。

　　还有一个专门的网站（http://crashie8.com/，请谨慎传播此链接）。非IE浏览器打开此网站都不会有任何问题，但是IE却莫名其妙地崩溃。

]]> http://blog.dudumao.net/article.asp?id=169 <![CDATA[CSS3新特性一览]]> dudumao1860#163.com(dudumao) Sat,23 Oct 2010 10:18:32 +0800 http://blog.dudumao.net/default.asp?id=169 　　CSS3到底给我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。

1.选择器

 

2.RBGa和透明度

 

3.多栏布局

 

4.多背景图

 

5.word-wrap

 

6.文字阴影

 

7.@font-face

 

8.圆角（边框半径）

 

9.边框图片

 

10.盒阴影

 

11.盒子大小

 

12.媒体查询

 

13.语音

]]> http://blog.dudumao.net/article.asp?id=162 <![CDATA[下一代WEB开发标准HTML5]]> dudumao1860#163.com(dudumao) Fri,15 Oct 2010 19:18:22 +0800 http://blog.dudumao.net/default.asp?id=162 什么是 HTML5？

　　HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

 

新特性、新标签

　　HTML5 中的一些有趣的新特性：

  1. 新增用于绘画的 canvas 元素，结合JS在网页上绘制图形；
  2. 新增用于媒介回放的 video 和 audio 元素，支持.ogg/.mp3/.wav/.mp4网络媒体文件格式；
  3. 新的特殊内容元素，比如 article、footer、header、nav、section，更利于WEB语义化；
  4. 新的表单控件，比如 calendar、date、time、email、url、search，增加了对非拉丁字符的支持；
  5. 对本地离线存储的更好的支持，微数据（标记内容以描述特定类型的信息）的引入；

 

新应用程序接口（API）

　　除了原先的DOM接口，HTML5增加了更多API，如：　　

  1. 用于即时2D绘图的Canvas标签
  2. 定时媒体回放 　
  3. 离线数据库存储
  4. 文档编辑
  5. 拖拽控制 　　
  6. 浏览历史管理

 

与HTML 4的不同之处

　　新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput元素的新属性：日期和时间，email, url。新的通用属性：ping, charset, async全域属性：id, tabindex, repeat。移除元素：center, font, strike。

　　HTML 5有两大特点：首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。其次，追加了本地数据库等Web应用的功能。

 

浏览器支持

　　最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

 

参考资料：

1.http://www.w3school.com.cn/html5/

2.http://www.w3.org/TR/html5/

3.http://developer.51cto.com/art/200907/133407.htm

4.http://zh.wikipedia.org/zh-cn/HTML_5

5.http://html5.org/

6.http://baike.baidu.com/view/951383.htm

]]> http://blog.dudumao.net/article.asp?id=154 <![CDATA[CKEditor编辑器的调用]]> dudumao1860#163.com(dudumao) Wed,16 Jun 2010 00:10:55 +0800 http://blog.dudumao.net/default.asp?id=154 　　CKEditor即原来的FCKeditor，官方的解释它是对FCK的完全重写。该公司的另一个产品为CKFinder，可能为了保持一致，将FCK更改为CK，并且将版本号继承了下来，即为CKeditor3.0版。

　　CKEditor的安装使用，官方开发参考见：CKEditor 3.x - Developer's Guide

　　一、在ASP中调用

　　1.下载CKEditor安装包，将之放在相应目录下，打开链接：http://<your site="">/<ckeditor installation="" path="">/_samples/index.html </ckeditor></your>进行测试检查；

　　2.在</head>前加上js引用语句，根据具体情况修改路径；

JavaScript代码
  1. <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>  

　　3.在调用编辑器的位置

XML/HTML代码
  1. <textarea name="editor1"><p>Initial value.</p></textarea>
  2. <script type="text/javascript">  
  3.     CKEDITOR.replace( 'editor1' );  
  4. </script>  

　　注意：当然也可以将这个JS加载在头部</head>之前，但是要加窗口载入事件

JavaScript代码
  1. <script type="text/javascript">  
  2.     window.onload = function()  
  3.     {  
  4.         CKEDITOR.replace( 'editor1' );  
  5.     };  
  6. </script>  

　　CKEditor的配置都集中在/ckeditor/config.js 文件中，可以修改其中的各个参数进一步配置。其中_samples（示例文件夹），/_source （未压缩源程序），/lang文件夹下除 zh-cn.js、en.js 以外的文件，根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；/skins 目录下不需要的皮肤等都可以在安装配置以后删除。

　　二、在.NET中调用

　　1.同上在头部载入调用的JS；

　　2.在调用编辑器的位置

XML/HTML代码
  1. <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" 
  2. Text='<%# Bind("info") %>' runat="server"></asp:TextBox>  

　　三、在PHP中调用

　　1.同上在头部载入调用的JS；

　　2.在调用编辑器的位置

PHP代码
  1. <?php  
  2. $editor_data = $_POST[ ’editor1’ ];  
  3. ?>   
  4. <script type="text/javascript">  
  5. var editor_data = CKEDITOR.instances.editor1.getData();  
  6. </script>   

　　四、整合CKFinder：http://docs.cksource.com/CKFinder_2.x/Developers_Guide

]]> http://blog.dudumao.net/article.asp?id=165 <![CDATA[JSON学习笔记]]> dudumao1860#163.com(dudumao) Fri,07 May 2010 17:00:58 +0800 http://blog.dudumao.net/default.asp?id=165
  1. 官方网站：http://www.json.org/
  2. IBM工作室：http://www.ibm.com/developerworks/cn/web/wa-lo-json/
  3. WIKI百科：http://en.wikipedia.org/wiki/JSON
  4. YAHOO专区：http://developer.yahoo.com/common/json.html
  5. 百度百科：http://baike.baidu.com/view/136475.htm

 

]]> http://blog.dudumao.net/article.asp?id=179 <![CDATA[jQuery学习笔记]]> dudumao1860#163.com(dudumao) Thu,06 May 2010 22:12:49 +0800 http://blog.dudumao.net/default.asp?id=179 相关网址：

　　Ajax维基百科：http://zh.wikipedia.org/zh-cn/AJAX

　　Ajax Tutorital：http://www.xul.fr/en-xml-Ajax.html

　　Ajax Plugins：http://www.ajax.ajaxrain.com/tag?tag=jquery

]]> http://blog.dudumao.net/article.asp?id=151 <![CDATA[eWebEditor在IE7+下所有按钮失效]]> dudumao1860#163.com(dudumao) Wed,31 Mar 2010 12:02:36 +0800 http://blog.dudumao.net/default.asp?id=151 　　07年给别人搞了一个小网站，编辑器用的是eWebEditor。最近帮助他添加新闻，发现点击编辑器所有的按钮都无效，一点反应都没有。起初以为是服务器上的文件有问题，测试本地端保存的文件，也是一点反应都没有。记得09年时还更新过几次呢，难道是IE8不兼容？启用兼容模式，无果，真是无语。

　　然后在网上找答案， 果然有人也遇到这样的问题了，感谢这些朋友提供的方法。下面将错误的原因和方法放在这里，做备忘。

　　错误的原因是因为ie8屏蔽了anonymous方法， 所以要改成onclick方法，打开/include/editor.js文件，有这样的段代码(大概在166行左右)：

JavaScript代码
  1. if (element.YUSERONCLICK) eval(element.YUSERONCLICK + "anonymous()");  

　　把anonymous方法改成onclick就可以了，但是结果发现把那个方法改成onclick之后，在ie6下面就不管用了 ，其解决方法：

JavaScript代码
  1. if(navigator.appVersion.match(/MSIE (7|8)\./i)!=null){    　if(element.YUSERONCLICK) eval(element.YUSERONCLICK + "onclick(event)");   
  2. }else{  
  3. if(element.YUSERONCLICK) eval(element.YUSERONCLICK + "anonymous()");  
  4. }  
]]> http://blog.dudumao.net/article.asp?id=148 <![CDATA[6款免费的图标编辑器]]> dudumao1860#163.com(dudumao) Sat,06 Feb 2010 11:35:38 +0800 http://blog.dudumao.net/default.asp?id=148 　　Web 设计中常用到图标，比如 Favicon，Windows 和 Mac 程序中也要用到图标，设计图标当然可以使用庞大的 Photoshop 或 Paint.NET，但也有一些免费的，简单工具可以随手拿来用，本文搜集了6款免费的图标编辑工具，有一些工具还可以从二进制文件中抽取图标。

　　 1. Greenfish Icon Editor Pro

　　Greenfish Icon Editor Pro 是一款强大的图标编辑器，但非常小巧，解压后不到1.8MB。它支持层，可以创建动画图标，包含高质量的滤镜，如 Bevel (斜面)，阴影以及光晕。

　　2. IconFX

　　IcoFX 是一款著名的图标编辑器，拥有很多功能，如，它支持带 PNG 压缩的 Vista 图标，支持批处理功能，除此之外，IcoFX 还支持高达 256×256  尺寸的高质量图标，并可以导入导出 bmp, jpg, gif, png 等格式的图片。

　　3. Sib Icon Editor

　　 Sib Icon Editor 是 Windows 下免费图标工具，可以编辑图标，管理图标库，可以编辑 PNG 图标，可以直接从别的格式的图片粘贴素材，可以从 Windows 执行文件中抽取图标文件，甚至可以将 Mac 图标转换为 Windows 图标。

　　4. Stardock IconDeveloper

　　IconDeveloper 很容易帮你创建 Windows 图标，有两个版本，免费版和收费的增强版（$19.95），对普通用户来说，免费版已经足够用。增强版可以将其它格式的图片转换为图标文件，可以调整颜 色，色度和 Gamma 曲线，支持整个文件夹批处理。

　　5. aaICO Icon Editor

　　aaICO 是一款简单易用但很出色的图标编辑器。功能不是很多，界面也很简单，适合于那些单纯的图标设计者。

　　6. LiquidIcon XP

　　 LiquidIcon XP 包含一套标准图像编辑工具，包含图标抽取器，可以从 EXE 或 DLL 文件抽取图标，还包含图像反转，旋转，镜像等工具。

]]>