专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

实践

  • 用css 写的一个浏览器检测

    / 分类: 开发,工具,实践 / No Comments

    这个用css hacks 判断浏览器大概是上个月写的,其中的hacks基本涵盖了大部分浏览器,本页面经过测试的浏览器:IE5.0、IE5.5、IE6、 IE7、IE8(beta1&beta2)、Opera 9.5, Firefox 3, Safari4、K-Meleon、Google Chrome。 其实用css判断浏览器是没有什么意义的,其主要意义就在于css hack在多浏览器下的使用,及如何用更少的css代码来实现各种主流浏览器的兼容。这个页面里的css hacks基本上囊括了ie系列(ie5.0-IE8)的csshack,同时也加入了不太常用的针对Opera和Safari的css hacks。

    演示可以见:https://xhl.me/demo/html/browser_detector.html

    在css hacks方面,我觉得最好不要用!important来提升指定样式的优先权,我不喜欢这它,因为如果使用它的话,你可能会发现写出的css代码相对较多。当然也不是完全不用它,目的只是当我们加入hacks时,是否要考虑一下如何才能使css的代码更精简?顺便也应该想到,当我们写XHTML代码时,是否考虑某处用div合适,还是ul合适,或者是dl合适?当我们写javascript的时候呢,是否也可以使用最少的代码来实现某一效果?有些人只是写出了div、css代码就很自豪的说自己已经会div、css了,当我问他浏览器兼容和HTML标签语义化时,他却说不出。其实有很多地方值得我们去研究,上次帮公司做的网页,css和js代码基本都被我压缩的不能再压缩了,先手工压缩再机器压缩,很爽很爽:), 不过他们说我变态~。其实这样网站的效率才能达到最高。

    我的做法就是在做网页时,应该以firefox来作为参照,然后再在ie和其他浏览器下测试,这样写出的css代码可能会是最少的。还有就是善用display:inline来解决ie下margin加倍,善用clear:both,有时也可以这样:<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->,给IE单独做一个css。因为之前做的是门户级的网站,写了很多页面,从中也学到了很多新知识,一时想不起来了,有时间再整理出来。还有只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。

  • 做了个自我感觉不错的 HTTP 404错误页

    / 分类: 开发,实践 / 2 Comments

    看过很多比较有创意的404页面,自己早就想做一个了,这次终于做了一个出来。XHTML、CSS、PHP、FreeBSD都有了,自己感觉创意还不错。本来是想404页放个小游戏来着,后来还是发现自己喜欢这个。

    https://xhl.me/demo/html/404.html

  • 给学院做的院徽夭折

    / 分类: 实践,生活 / No Comments

    大学念的不多,但是换了三个学院,旅管学院-商学院-经济学院。到经济学院后,看到公告说要搞院徽设计大赛,但看到一等奖奖金少的可怜,就没想做,后来经过劝说还是做了。做差不多的时候,放假回家了,回来再问,居然没信儿了。R。。就这样夭折了。不过还是要谢谢考拉MM和susan同学的帮助。留图仅做纪念,既然夭折,图片的含义及构思什么的就懒得讲了。。

  • Sablog-X Hack:字体大中小选择 for1.6

    / 分类: 开发,实践 / No Comments

    之前妹妹曾经对我说BLOG字体太小了,只是当时没心思去改,不过这件事到还放在心上~因为这个意见是的确不错的。把用户体验放首位,做站的都应该知道,而这个字体大小选择也就是其中的一小方面吧。。修改方法比较简单,没什么技术含量,就是用javascript。提供2种方法,都能够支持IE及Firefox、opera等浏览器。

    方法一:编辑模板目录下的show.php

    1.查找:ajax.js"></script>,下面加:

    JavaScript代码
    1. <script language="javascript" type="text/javascript">
    2.     function FontZoom(fsize){
    3.         var ctext = document.getElementById("sa_content");
    4.         ctext.style.fontSize = fsize +"px";
    5.     }
    6. </script>

    2.查找:$article[cname]</a>,后面加:

    XML/HTML代码
    1. 字体:[<a href='javascript:FontZoom(16)'></a> <a href='javascript:FontZoom(14)'></a> <a href='javascript:FontZoom(12)'></a>]  
    3.查找<div class="content">修改为:<div class="content" id="sa_content">

    方法二:编辑模板目录下的show.php

    1.查找:ajax.js"></script>,下面加:

    JavaScript代码
    1. <script language="javascript" type="text/javascript">   
    2. //更改字体大小  
    3. var curfontsize=14;   
    4. function fontZoomA(){   
    5.   if(curfontsize>8){   
    6.     document.getElementById('sa_content').style.fontSize=(--curfontsize)+'pt';   
    7.   }   
    8. }   
    9. function fontZoomB(){   
    10.   if(curfontsize<20){   
    11.     document.getElementById('sa_content').style.fontSize=(++curfontsize)+'pt';   
    12.   }   
    13. }   
    14. </script>      

    2.查找:$article[cname]</a>,后面加:

    XML/HTML代码
    1. 字体:<a href="javascript:fontZoomB();"></a>  <a href="javascript:fontZoomA();"></a>  

    3.同方法一的第3步。

  • 曾经制作的天上QQ2005·留个纪念给自己

    / 分类: 实践,生活 / No Comments

    是用NSIS制作的,因为当时制作的时候是2005年,所以版本是QQ2005的。突然之间发现了,曾经制作的天上QQ的安装程序还在的,索性就截个图,给自己留个纪念吧。之所以叫天上QQ,是因为自己曾经在天上人间论坛的时候制作的,主题和泡泡堂和天上人间有关,算个论坛专版吧,而且任务栏的QQ图标也是自己原创的彩色泡泡图标。那个红色的小蘑菇也是自己玩韩F泡泡时候,从韩国泡泡里面提取出来的。