爱得太迟 http://www.lusisi.com/ 如果奇迹没有出现,那么就努力去创造一个... Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Thu, 09 Sep 2010 12:34:46 +0000 30 http://www.lusisi.com/?action=show&id=115 关于"width作用位置"与"PNG如何处理"的问题 爱得 一.“width”，”height”作用位置

根据W3C CSS2.1规范的描述，可以通过给一个元素设置 “width” 和 “height” 以定义其内容尺寸，即这个尺寸是作用在该元素的content box上的。
一个元素的矩形区域可以看作是4个套着的区域：margin box，border box，padding box 和content box。最里面一层是content box。
表格元素TABLE是一个特例，表格的content区域是由其border box决定的，因此在TABLE上设置的“width”和“height”将作用在其border box上。

注意：
“width”不能应用于行内非替换元素、表格行（TR）和行组（TBODY）。
“height”不能应用于行内非替换元素、表格列（COL）和列组（COLGROUP）。

感兴趣的同学，可以看看W3C CSS2.1的第十章的 10.2 以及 10.5 中的内容。

当给一个块级非替换元素设置“width”、 “height”时，它们在IE6(Q) IE7(Q) IE8(Q)中被错误的作用到了该元素的border box，也就是说在这些浏览器中，“width”、“height”并不被认为是“内容尺寸”。这就是 IE 盒模型bug。
另外，当给一个iframe元素设置 “width”、“height”时，它们在IE6(Q) IE7(Q) IE8(Q)中被错误的作用到了padding box。



阅读全文

]]> http://www.lusisi.com/?action=show&id=115 Web标准 2010-08-16 23:55 http://www.lusisi.com/?action=show&id=114 关于"何为好页面"群里的一些看法... 爱得 修远兮  21:51:43
“何为好页面？”

无事看Java  21:52:51
谁问的这个问题

无事看Java  21:53:02
提问的人是谁

大鱼  21:53:24
易维护的页面

修远兮  21:53:20
小声说一句，我。

爱得  21:53:25
怎么为好呢,好的标准是?

小河  21:53:39
就拿你自己来说吧，你看别人的页面，结构明了，布局清晰，思路清楚,哈哈，我的理解

修远兮  21:54:05
结构明了，布局清晰。小河的答案。

无事看Java  21:54:08
易维护的页面



阅读全文

]]> http://www.lusisi.com/?action=show&id=114 Web标准 2010-08-16 23:47 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 爱得 工作中考虑的两种右下角定位--两个实例,都涉及JS

XML/HTML代码
  1. <div id="aide">例子二</div>   
JavaScript代码
  1. function _(id){ return document.getElementById(id);}      
  2. if(navigator.userAgent.toLowerCase().indexOf("msie 6.0") != -1){      
  3. window.setInterval(   
  4. function(){      
  5. var top = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);      
  6. var left = (document.documentElement.clientWidth > document.body.clientWidth) && (document.documentElement.clientWidth != 0) ? document.documentElement.clientWidth : document.body.clientWidth;      
  7. _('PosiFixed').style.position = "absolute";      
  8. _('PosiFixed').style.top = (top - 70) + "px";      
  9. }      
  10. , 500);      
  11. }      
  12.   
  13. //例子二      
  14. function adBox(){       
  15. var aide = document.getElementById("aide");       
  16. aide.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight-225+"px";      
  17. setTimeout(function(){adBox();},100);       
  18. }      
  19. adBox();    


阅读全文

]]> 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=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=93 border:none 0;的疑惑.... 爱得 最近在群里有人提出了border:none 0;的写法能够兼容浏览器.当时很困扰,为什么能够这样写呢?

于是当时记录了一下这个问题.今天有空了,翻手册,发现:

border

语法：
border : border-width || border-style || border-color

说明：
设置对象的边框样式。
当你指定了边框颜色( border-color )和边框宽度( border-width )时，你必须同时指定边框样式( border-style )，否则边框不会被呈现。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。

border-width:设置对象边框的宽度。属性1.:medium:默认值。默认宽度  2.length 数值

border-style:设置对象边框的样式。
属性常用:
none    :   默认值。无边框。不受任何指定的 border-width 值影响
dotted  :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed  :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid   :　 实线边框

border-color:这个就不说了.

至此,对于没border:none 0;这样的写法已经没任何疑问.--还是基础啊.



阅读全文

]]> http://www.lusisi.com/?action=show&id=93 Web标准 2009-12-04 09:29