yuehei 两点之间 http://yuehei.37net.com/old/ <h4>现阶段的主要矛盾是落后的生产力不能满足日益增长的物质文化需求</h4> Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Tue, 07 Sep 2010 01:43:07 +0000 30 http://yuehei.37net.com/old/?action=show&id=34 CSS的提示 月黑风高
XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <style type="text/css">  
  5. a:link span {  
  6.     display:none  
  7. }  
  8. a:hover span {  
  9.     display:inline;  
  10.     position:absolute;  
  11. }
  12. </style>  
  13. </head>  
  14. <body>  
  15. <a href="#">看看<span><br /><img src="http://www.jjwxc.net/img/logo.gif"></span></a>  
  16. </body>  
  17. </html>  
看看

这种提示我一直用JS,刚才看一网站发现没有JS也搞定这种效果了，搞清楚后才发现用的是CSS，太奇妙了，比JS好多了。。

]]> http://yuehei.37net.com/old/?action=show&id=34 前台 2009-02-09 22:28 http://yuehei.37net.com/old/?action=show&id=32 qq的评论 月黑风高 看QQ新闻，不小心打开评论了。。
comment.htm?site=news&id=17928206
不是URL重写，完全是异步，之所这样，估计是因为评论经常更新，又想squid之类的前端能缓存住部分页面，不用每次都purge，我劳动的地方就是因为这个原因切成异步

请求三个页面，
guinGrade.php?uin=xxx：返回的jsonp的格式，找到回调方法可以发现，这个页面基本上是一些用户信息，包括发评和自己的
goriginReplyBycid.php：分页的评论
gciteReply.php ：叠楼的那种帖

看了这些可以想到服务端写的有多简单，
guinGrade.php如果让我来写，我肯定会这样guinGrade.php?uin=1,2,3,4，一次查到多个用户的信息返回，之所以不这样写应该是针对用户的ID进行了纵向分割。。

另外一个发现比较好的地方是json的返回，我现在使用json会返回联合数组, 因为有key值JS操纵方便写，但返回的数据量比较大，而且这些key也没有什么意义，可以抛弃只返回基本数组，这样数据量会小不少。

另外一个比较龌龊的地方是，json竟然返回了二个IP，一个最后一位被替换为*，一个则是真实的，估计是给管理员看的

这种方法适合写一些经常被用户更新东西，如BBS，想想全站html，很帅。。只是不知道引擎收录不收录，以现在这种网络环境，引擎应该解释一下网页的异步读取？

]]> http://yuehei.37net.com/old/?action=show&id=32 前台 2008-12-24 21:44 http://yuehei.37net.com/old/?action=show&id=23 很有意思的一个CSS滑动层 月黑风高 看一个blog看到的：http://blog.sina.com.cn/s/blog_491de9d60100ad50.html  相当强大，相当有意思，费话少说，帖代码分析

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  
  3. <head profile="http://www.w3.org/2000/08/w3c-synd/#">  
  4. <meta http-equiv="content-language" content="zh-cn" />  
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312" />  
  6. <title>test</title>  
  7. <style>  
  8. #newBox {  
  9.        position:absolute;  
  10.        width:240px;  
  11.        height:170px;  
  12.        border:1px solid #CCC;  
  13.        }  
  14. #newContent {  
  15.        margin:0px;  
  16.        width:240px;  
  17.        height:170px;  
  18.        overflow:hidden;  
  19.        }  
  20. #newCaption {  
  21.        position:absolute;  
  22.        left:1px;  
  23.        }  
  24. ul{  
  25. margin:0px;  
  26. padding-left:3px;  
  27. padding-top:40px;  
  28. background:url("http://www.boxstory.cn/Upload/test.gif") no-repeat 1px 1px;  
  29. }  
  30. #a{background-position:1px 1x;}  
  31. #b{background-position:79px 1px;}  
  32. #c{background-position:159px 1px;}  
  33.   
  34. li {         
  35.        padding-left:5px;  
  36.        height:27px;  
  37.        font-size:12px;  
  38.        white-space:nowrap;  
  39.        overflow:hidden;  
  40.        }  
  41. #newCaption a {  
  42.        display:block;  
  43.        float:left;  
  44.        border-right:1px solid #CCCCCC;  
  45.        border-bottom:2px solid #CCCCCC;  
  46.        margin-top:3px;  
  47.        width:78px;  
  48.        height:31px;  
  49.        line-height:31px;  
  50.        text-align:center;  
  51.        font-size:12px;  
  52.        color:#000;  
  53.        text-decoration:none;  
  54.        font-weight:bold;  
  55.        }  
  56. </style>  
  57. </head>  
  58. <body>  
  59. <div id="newBox">  
  60.   
  61. <div id="newCaption">  
  62. <a href="#a" title="">国际新闻</a><a href="#b" title="">娱乐新闻</a><a href="#c" style="border-right:none" title="">体育新闻</a></dt>  
  63. </div>  
  64. <div id="newContent">  
  65.   
  66. <ul id="a">  
  67.        <li><a href="" title="">[国际]JavaScript中的Navigator浏览器对象 </a></li>  
  68.        <li><a href="" title="">[国际]啊的啊的出现在完全都是在娥请问</a></li>  
  69.        <li><a href="" title="">[国际]啊双方就阿斯兰附近达拉斯想佛i按顺序现在</a></li>  
  70.        <li><a href="" title="">[国际]啊上放大上的适当方式大是否</a></li>  
  71.        <li><a href="" title="">[国际]阿斯蒂芬所发生阿斯蒂芬撒旦法</a></li>  
  72.        <li><a href="" title="">[国际]阿斯蒂芬范德萨阿斯顿夫妇撒旦法</a></li>  
  73. </ul>  
  74.   
  75.   
  76. <ul id="b">  
  77.        <li><a href="" title="">[娱乐]得到的暗示飞阿斯顿地方阿斯顿</a></li>  
  78.        <li> <a href="" title="">[娱乐]自行车不能记得分好</a></li>  
  79.        <li><a href="" title="">[娱乐]是大法官的闪电似的的第四个地方</a></li>  
  80.        <li><a href="" title="">[娱乐]都发生过的广大师生范甘迪说的</a></li>  
  81.        <li><a href="" title="">[娱乐]娱乐新闻娱乐新闻娱乐新闻</a></li>  
  82.        <li><a href="" title="">[娱乐]阿斯顿飞洒飞洒都发生多方撒旦</a></li>  
  83. </ul>  
  84.   
  85. <ul id="c">  
  86.        <li><a href="" title="">[体育]撒受到法士大夫</a></li>  
  87.        <li><a href="" title="">[体育]啊上放大撒旦法是大发上的的说法</a></li>  
  88.        <li><a href="" title="">体育]撒旦法受到法士大夫</a></li>  
  89.        <li><a href="" title="">[体育]体啊所得税放大是大势</a></li>  
  90.        <li><a href="" title="">[体育]阿飞洒分萨芬的上放大使发达</a></li>  
  91.        <li><a href="" title="">[体育]受到法上放大的萨芬的萨芬</a></li>  
  92. </ul>  
  93.   
  94. </div>  
  95.   
  96. </div>  
  97. </body>  
  98. </html>  
这个CSS有两个最重要的东西，一个层切换，二是背景换色

层切换：把17，18行去掉，就可以看到它固定了外部容器的大小，根据页内锚点来显示，a,b,c，当定位到a时，bc因为超过容器大小而被隐藏掉了

背景换行：将28行的no-repeat换成repeat就可以很看到它设置了ul的背景，然后根据30,31,32这几行的定位来生成不同的背景

]]> http://yuehei.37net.com/old/?action=show&id=23 前台 2008-08-29 11:19 http://yuehei.37net.com/old/?action=show&id=8 [转]IE重复字符的BUG 月黑风高 http://hi.baidu.com/actcs/blog/item/6358a68b7e4f1c7a9e2fb49d.html

先看下边的代码

================================

<meta http-equiv="Content-Type" c />
<title>多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>
================================

保存上边的为test.html并打开看看效果

↓这就是多出来的那只猪

猪

===================================

可以通过以下的办法来解决：
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div> </div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->

 

但在实际应用过程中,可能根本没有注释,这个问题一直郁闷了很久,因为现象不好描述,今天算碰上了,才找到叫"重复字符BUG"

其实上边说的完全,出现这个问题的另一方面是

display:******

自己改改设置display的值,合适并消除这个现象,很怪异,没有太多的规律

]]> http://yuehei.37net.com/old/?action=show&id=8 前台 2008-05-08 16:21