爱得太迟 http://www.lusisi.com/ 如果奇迹没有出现,那么就努力去创造一个... Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Sun, 01 Aug 2010 16:26:03 +0000 30 http://www.lusisi.com/?action=show&id=113 页面记时跳转 爱得 关于IE下event.srcElement,火狐下没这属性,却有target属性.

可以认为

firefox 下的 event.target = IE 下的 event.srcElement.

只是一个简单的跳转...

XML/HTML代码
  1. <div class="color-block">  
  2.     <span id="aiTime">10</span>  
  3.     <a id="ThisHome" href="#" target="_blank">综合首页</a>  
  4. </div>  


阅读全文

]]> http://www.lusisi.com/?action=show&id=113 Web标准 2010-06-30 17:10 http://www.lusisi.com/?action=show&id=112 中文字体设置opera下的兼容问题... 爱得 中午为opera为什么认"微软雅黑",而不认 "Microsoft YaHei"寻求解决方式...

个人系统中已有Microsoft YaHei字体,

但样式里个人设置"Microsoft YaHei"时 opera下没效果.只有 设置 "微软雅黑"时才会出现..

特地在CSS森林里就这一问题求解.

感谢Along的回答.

解决方式:

考虑浏览器兼容,把字体转码为unicode形式可以保证在任何编码下都无问题.

例子:用“宋体” --> “\5b8b\4f53″ 就是 “宋体”.



阅读全文

]]> http://www.lusisi.com/?action=show&id=112 Web标准 2010-06-23 12:33 http://www.lusisi.com/?action=show&id=111 动态打开关闭窗口-练习 爱得 今天又有人在CSS森林群里提出了 前端的价值 一词

思考一会,发现它的价值在大公司是很注重的,比如标签语义化、合并背景图、兼容性、页面的扩展性和SEO、线程、效率等.

但是小公司注重的是那些>?

 这是一张效果图



阅读全文

]]> http://www.lusisi.com/?action=show&id=111 Web标准 2010-05-20 12:35 http://www.lusisi.com/?action=show&id=110 新闻切换效果 爱得 有空时修改的新闻切换效果.原作者是经典某位仁兄.

之后又找了去一个网站偷了一个...

脚本.这个修改了一点点.

偷的那个没动过...学习无止境.

一个效果图



阅读全文

]]> http://www.lusisi.com/?action=show&id=110 Web标准 2010-05-19 15:13 http://www.lusisi.com/?action=show&id=109 纯记念一个人.... 爱得 此帖仅忆惜一位昔日的同学,希望她在另一个世界过得好...

如此而已.

明天再编辑下地址,发下学习的第一个JQ.

如果奇迹没有出现,那就去创造一个......

如下.

 一张图片,让你看明白是什么东东..



阅读全文

]]> http://www.lusisi.com/?action=show&id=109 Web标准 2010-05-04 22:27 http://www.lusisi.com/?action=show&id=108 纠结在仿下拉中. 爱得 最近用得一个效果,如图:

一张效果图片

先看结构.

XML/HTML代码
  1. <div class="NSerBox clear">  
  2.     <div id="SerBoxClass" class="SerBox" onclick="Onclick('Class');">  
  3.         <p id="input_Class">选择分类</p>  
  4.     </div>  
  5.     <ul class="filetree" id="TreeBoxClass" style="display:none;" onmouseout="aiout('Class')" onmouseover="aiover('Class')">  
  6.         <li><a href="#" onclick="ok('Class',this)">笔记本1</a></li>  
  7.         <li><a href="#" onclick="ok('Class',this)">笔记本2</a></li>  
  8.         <li><a href="#" onclick="ok('Class',this)">笔记本3</a></li>  
  9.         <li><a href="#" onclick="ok('Class',this)">笔记本4</a></li>  
  10.         <li><a href="#" onclick="ok('Class',this)">笔记本5</a></li>  
  11.     </ul>  
  12. </div>  

主要考虑到p的宽度,以及用背景时能更好的处理CSS,而用不着去另写结构.

当然,看到那么多onclick,其实主要由于个人JS不过关导致的,见谅!

下面是JS.拼在一起能运行没出错.呵呵



阅读全文

]]> http://www.lusisi.com/?action=show&id=108 Web标准 2010-04-21 14:59 http://www.lusisi.com/?action=show&id=107 右下角定位--absolute与fixed 爱得 工作中考虑二选一的两种右下角定位

放出第二种.

XML/HTML代码
  1. <div id="aide">例子二</div>   
JavaScript代码
  1. <script language="JavaScript" type="text/javascript">    
  2. function adBox(){    
  3. var aide = document.getElementById("aide");    
  4. aide.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight-225+"px";   
  5. setTimeout(function(){adBox();},50);    
  6. }    
  7. adBox();    
  8. </script>  


阅读全文

]]> http://www.lusisi.com/?action=show&id=107 Web标准 2010-03-30 16:13 http://www.lusisi.com/?action=show&id=106 tab练习... 爱得 1.html结构

XML/HTML代码
  1. <div id="tabBox">  
  2.    <div id="tabMenu">  
  3.        <ul>  
  4.           <li class="cursor">选择一</li>  
  5.           <li>选择二</li>  
  6.        </ul>  
  7.    </div>  
  8.    <div id="tabContent">  
  9.       <div>  
  10.          <ul>  
  11.    <li><a href="">有无关于前端，WEB标准等的杂志 New1</a></li>  
  12.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  13.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  14.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  15.          </ul>  
  16.       </div>  
  17.       <div class="aide">  
  18.          <ul>  
  19.    <li><a href="">有无关于前端，WEB标准等的杂志 New2</a></li>  
  20.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  21.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  22.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  23.          </ul>  
  24.       </div>  
  25.    </div>  
  26. </div>  
  27. <script type="text/javascript">aiTab('tabMenu','tabContent');</script>  


阅读全文

]]> http://www.lusisi.com/?action=show&id=106 Web标准 2010-03-29 14:46 http://www.lusisi.com/?action=show&id=105 如何快速定位页面中复杂 CSS BUG 问题 爱得 本文转载自:http://www.planabc.net/2009/01/14/how_to_quickly_locate_the_complicated_css_bug/#comment-2520

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。

对于快速定位，个人的经验处理一般如下（基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题）：

1、检查页面的标签是否闭合

不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。

快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

2、样式排除法

有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

3、模块确认法

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。



阅读全文

]]> http://www.lusisi.com/?action=show&id=105 Web标准 2010-03-25 12:14 http://www.lusisi.com/?action=show&id=104 涉及正则--谈谈工作遇到的问题 爱得 工作中要取一个值,如下

XML/HTML代码
  1. <div id="aide">245张</div>  

这个值未知,已经确认会存在 空格/下划线/字母/中文等.不管那种情况,只取其中的数字..

于是个人想到:

JavaScript代码
  1. <script type="text/javascript">   
  2. var ad = document.getElementById("aide").innerHTML;   
  3. var a = ad.replace(/张/,"");   
  4. alert(a);   
  5. </script>  

但这样并没完全达到意外情况下的要求,只取值数字.虽然知道正则能够得到匹配的值,但除了懂得 [0-9] 是数字字符外,其它的一无所知.

搜索后得到 [^0-9] 是非数字字符.于是测试.

JavaScript代码
  1. <script type="text/javascript">   
  2. var ad = document.getElementById("aide").innerHTML;   
  3. var b = ad.replace(/[^0-9]/,"");   
  4. alert(b);   
  5. </script>  

在这个过程中顺便问了下群里的同仁,得到 [^\d]/g ,搜索之, 原来 \d 匹配一个数字字符,等价于[0-9]。 而^\d 匹配一个非数字字符。等价于[^0-9]。



阅读全文

]]> http://www.lusisi.com/?action=show&id=104 Web标准 2010-02-09 14:04 http://www.lusisi.com/?action=show&id=103 前端性能优化建议--年终总结 爱得 一．结构有待优化。
目前网站结构代码存在冗余现象，结构的语义化不强，在扩展方面表现出不足。

修改方案：
后继制作应该考虑使用语义化的标签，使结构语义化，增强扩展性能力，以求在良好好结构中适应不同的设计需求。还可减少冗余代码，优化结构。

二. 样式的调用。
目前使用 <link>方式调用样式与JS，由于是模块化工作，使得有些模块反复调用同一样式的情况出现，部分样式重调与覆盖率太高，增加了http请求数，加大了下载的时间，减慢浏览器解释的速度，并造成了流量的损失。

修改方案：
整合样式，把每个页面用到的样式整合到同一个文件中，并对该页面的样式进行优化，去掉注释、空格、换行等，并通过第三方压缩软件进行压缩，以得到发布时最小的样式文件。

注：当然这又涉及到了样式管理，样式版本管理与多人协作的问题。

三. 修饰图片的优化。
目前网站中大多修饰图片都没有经过有效的整合，导致加载速度过慢、请求数增多，影响到页面的响应时间。

修改方案：
1．建议设计搞用色控制在255色内。
2．修饰图片格式的选择——GIF、PNG-8、PNG-24、JPG等，按需求进行选择合适的图片类型以求降低图片字节。
3．对公用的修饰图片、使用频率较高的修饰图片运用Css Sprites技术——也就是把修饰的小图片合理的整合到一张规范大小的图片上，以求减少请求数与图片大小，加快页面响应时间。
4．对某些比较大的修饰图片如JPG可运用第三方软件的再压缩，以求在不损失效果的前提下得到最佳大小。

注：特别强调一下css sprites技术。
a．CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。应用该技术的同时会相应的增加开发时间与维护成本，如果修改频率过高不建议使用。
b．压缩工作的推荐：Image Optimizer



阅读全文

]]> http://www.lusisi.com/?action=show&id=103 Web标准 2010-01-15 13:21 http://www.lusisi.com/?action=show&id=102 Iamge固定居中于Div层中.... 爱得 昨天群里的一位同学出了一个需求:在一固定的div中,图片如果大于div则实现等缩放,如小于则按原大小显示.2、不管前面那种情况,图片都要上下左右居中于div.

于是,动手写了下面的代码...

错误处不清楚,能力有限,期待高手批...



阅读全文

]]> http://www.lusisi.com/?action=show&id=102 Web标准 2010-01-14 10:37 http://www.lusisi.com/?action=show&id=101 弹出窗口、遮罩、拖动、上下左右居中 爱得 前天参考51js一位牛人而整理的一个效果.

因这效果现下比较适用,所以先行试练.总体上没超过原作的思想,能力有限...

看代码吧

XML/HTML代码
  1. <p id="dt_1">登录</p>  
  2.   
  3. <div id="bodyBg" style="display:none;"></div>  
  4. <div id="maiBox" style="top:-900px;left:-900px;">  
  5. <div id="loginBox">用户登录</div>  
  6. <form action="#" method="">  
  7. <ul class="aiTable">  
  8.     <li><label for="username">用户名:</label><input type="text" id="username" name="username" class="aoie" /></li>  
  9.     <li><label for="password">密  码:</label><input type="password" name="password" id="password" class="aoie" /></li>  
  10.     <li class="aisubmit"><label><input type="submit" name="submit" value="登录" id="subLogin" /></label></li>  
  11. </ul>  
  12. </form>  
  13. <div class="wanji"><a href="#">忘记密码</a><a href="#">注册</a></div>  
  14. <p class="aiinput"><a id="aiclose" href="#">关闭</a></p>  
  15. </div>  
  16.   
  17. <script type="text/javascript">  
  18. <!--   
  19. for(var i=1;i<=2;i++)   
  20. {   
  21. eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");   
  22. }   
  23. var bodyBg = document.getElementById("bodyBg");   
  24. var maiBox = document.getElementById("maiBox");   
  25. var loginBox = document.getElementById("loginBox");   
  26. var boxh = document.getElementById("maiBox").scrollHeight;   
  27. var boxw = document.getElementById("maiBox").scrollWidth;   
  28. var winWidth = document.documentElement.clientWidth;   
  29. var winHeight =document.documentElement.clientHeight;   
  30. document.getElementById("aiclose").onclick = function()   
  31.     {   
  32.     hidden("maiBox");   
  33.     hidden("bodyBg");   
  34.     }   


阅读全文

]]> http://www.lusisi.com/?action=show&id=101 Web标准 2010-01-13 09:00 http://www.lusisi.com/?action=show&id=100 层在浏览器中上下左右居中,并适应不同分辨率 爱得 由于工作需要,要求一个层在浏览器中上下左右居中,并适应不同分辨率.

刚开始时想到小菜一碟,只在相对绝对一出,搞定.

接着进入实践阶段,才发现并不是如此.

XML/HTML代码
  1. <style type="text/css">  
  2. <!--    
  3. * {margin:0;padding:0}   
  4. div {   
  5.     width:500px;   
  6.     height:500px;   
  7.     border:1px solid #ccc;   
  8.     overflow:hidden;   
  9.     position:relative;   
  10.     display:table-cell;   
  11.     text-align:center;   
  12.     vertical-align:middle   
  13.     }   
  14. div p {   
  15.     position:static;   
  16.     +position:absolute;   
  17.     top:50%   
  18.     }   
  19. img {   
  20.     position:static;   
  21.     +position:relative;   
  22.     top:-50%;left:-50%;   
  23.     width:276px;   
  24.     height:110px   
  25.     }   
  26. -->  
  27. </style>  
  28. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  


阅读全文

]]> http://www.lusisi.com/?action=show&id=100 Web标准 2010-01-08 09:54 http://www.lusisi.com/?action=show&id=99 发一个自己用的皮肤,名称随便忘记了... 爱得 [极点6皮肤]

从极点4到现在的极点6.5,基本上都是用_default 这个皮肤.

最近觉得不好看,于是动手制作两款,第一款因是抄 QQ拼音 的有版权问题存在,所以不发,只发后面的....(应几个网友的要求,都发了...)

现在用着这两款,感觉良好,未发现有头痛发热现象....

不多说... 

极点五笔皮肤



阅读全文

]]> http://www.lusisi.com/?action=show&id=99 乱说狂言 2010-01-07 16:39 http://www.lusisi.com/?action=show&id=98 来看看国人的典型商业头脑，值得借鉴(转) 爱得 由于本活动已经结束, 所以本帖不存在广告嫌疑, 请大家纯技术性探讨，纯技术性攻击。我思考了，写的也很认真，对于还没买房子的人希望能有所帮助
真：www.shanghainightmare.com
寨：www.shanghainightmare.cn www.shanghainightmare.com.cn

证明图片

起因：半年多以前, 同事创办一个鬼屋,取了一个名字, 叫做上海梦魇启用www.wanshengjie.com, 想到英文名字,于是同时注册了一个同名域名(www.shanghainightmare.com)当作备用.

发展：经过半年的准备筹划项目进入运营.网站也上线， 经过大规模的投放广告， 小知名度之后,  有票贩子, 有代排队的. 对于一个新的东西,总是能够挖掘一些商业价值,很多人都在思考.

结果：作为技术流, 也有技术流的做法. 某人做了一个山寨版, 同时注册了我们备用域名的.cn 的域名(www.shanghainightmare.cn), 原帖在 http://www.dnbbs.com/viewthread. ... able&tid=113164, 经过乐猫的几轮折腾之后, 我们网站已经在baidu里面消失, 这个网站终成正果. 排名到baidu第一了.也算是他创业成功了吧.



阅读全文

]]> http://www.lusisi.com/?action=show&id=98 转载 2009-12-29 08:53 http://www.lusisi.com/?action=show&id=97 页面重构合理化讨论 会后记事... 爱得 谈谈自己的看法,当作一种学习.

1、结构合理化中
a)对于DTD的应用,相信大部分公司或者个人采用了比较宽松的DTD -过渡型.而其它的DTD有可能会根据项目要求或个人爱好而使用.至于html5的DTD,因为国情，IE6在市场上占有的比例,相信大多数公司都不会采用.

b)对于验证,许多同学都认为他的作用重点在于验证代码书写,嵌套规则的正确性,以及检错.至于通不通过验证,因为项目或者其它原因都是没有硬性要求.有同仁提到,在静态页面下可以通过w3c的验证,但是在交付后台完成程序嵌套后的页面.其本上验证会有很多提示.

c)在说这之前,就有一个想法,html标准够 语义化了么? 当然,在不断发展的过程中会完善这些.现下,我们能做的就是用自己认为有语义的标准来完成手中的项目.这些都是有分岐的.关于语义化,个人认为还有一段很长的路要走.在现下不段参加的终端,以及数据的提取,在良好语义化的结构中会更好地用于交互与阅读.

d)听说过,没了解.待搜索.

e)Class id命名规则一致性,多人协作的团队中,应该有一定的规范.小组中大部分人主体都会以英文来命名.各模块之间有的用拼音+字母的形式,有的会用英文.但同样有人提出,英文与拼音都有可能会让团队中的人不认识.除此之外,比较赞同一说法,命名方法采用aideClass的方法--即首个单词或者拼音小写,第二个英文或者拼音首个字母大写的方式.这方式虽然在字节上会增加一点,但对于要求经常维护的站点,或者协作都有利于它人的阅读.

f)前端,这块其实在切图与写代码的过程中就已经进行着,只是要重没那么大,至于SEO的具体内容.没有多大了解.



阅读全文

]]> http://www.lusisi.com/?action=show&id=97 Web标准 2009-12-27 00:27 http://www.lusisi.com/?action=show&id=96 设计稿合成web页面… 爱得 声明：本设计稿来自 经典才子 lwid的作品
本人用来练习合成之速度之乱作……严禁它用、商用。如觉得作品不错，请联系 才子 lwid 进行进一步的合作。

于2009年9月8日留

效果小图:

经典才子 lwid的作品

一、切图之前的一点思考.
1、最小宽为?,背景-x 实现视觉全屏.
2、header部分用body>1px背景平铺还是单切?
3、整体结构考虑采用131.
4、3中a与b之间的关系--a在b中还是b在a中?
5、像素图片整合在一起还是分开,关键是用background还是img的考虑.
6、好友最新主题 栏目的结构用table还是li?
7、社区热门只有10个？定了十个？
8、通知栏会display:none;>还是一直存在。

二、实现--切图.
1、头部考虑到要1px平铺 所以 切 1px 高260左右.使得结构好的.
2、整理下 像素图 还是用背景吧.
3、其它的动刀后就出来了.

三、结构与样式
1、习惯多出的切掉.
2、好友最新主题 用 table
3、最新动态 用 dl
4、整体结构 排列为 131

10点了多了，准备睡，就不写了其它的了。



阅读全文

]]> http://www.lusisi.com/?action=show&id=96 Web标准 2009-12-25 14:19 http://www.lusisi.com/?action=show&id=95 重温table隔行换色 爱得 无事,尝试写下隔行换色,写着写着就感觉自己在复制别人的东西,可悲啊.

不过,也好要档练习吧.

效果图



阅读全文

]]> http://www.lusisi.com/?action=show&id=95 Web标准 2009-12-24 14:55 http://www.lusisi.com/?action=show&id=94 北京第一届 Web Rebuild 交流会 与 经典北京聚会 爱得 最近在忙改版,快接近尾声了...

说下关于自己参加的聚会吧.

2009年12月12日,天寒地冻,北京第一届 Web Rebuild 交流会在北京中国谷歌公司二层会议室成功举办.

我如约而至,到现在才发现与会者将近200人，受场地的影响....

嘉宾演讲内容如下:

《网站重构who am i》——Tommy[范俊豪，腾讯ISD资深页面重构工程师]
《浏览器兼容性问题简介》——黄昊[谷歌中国测试工程师]
《一专多长》——Twinsen[梁璟彪，腾讯ISD页面工程师leader]
《分层语义化模板实践》 ——张克军[中国雅虎前资深前端工程师，中国雅虎最早的前端开拓者，D2论坛组委会成员]
《javascript的分层概念》 ——阿当[新浪前端开发工程师]
《揭秘HTML5及CSS3.0》 ——鲁超伍[淘宝网北京前端开发工程师]

个人听到7点钟,由于私事先行撤退...详情请搜索与会视频..



阅读全文

]]> http://www.lusisi.com/?action=show&id=94 乱说狂言 2009-12-22 11:34