断峰狼的博客 » 网页制作 http://www.dfwolf.org 男人分四种，一种聪明，一种英俊，一种不聪明也不英俊，我是第四种。 Sun, 18 Sep 2011 15:45:31 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 [网页制作]在线网页分析工具 http://www.dfwolf.org/2007/11/webpage-analyse-online-tool/ http://www.dfwolf.org/2007/11/webpage-analyse-online-tool/#comments Sat, 10 Nov 2007 13:15:32 +0000 断峰狼 http://www.dfwolf.org/2007/11/%e7%bd%91%e9%a1%b5%e5%88%b6%e4%bd%9c%e5%9c%a8%e7%ba%bf%e7%bd%91%e9%a1%b5%e5%88%86%e6%9e%90%e5%b7%a5%e5%85%b7/ 　　介绍一个在线网页分析工具—“ Web Page Analyzer”，它可以帮助你查看页面中的HTML、JS、CSS代码和图片各自的大小，再计算出不同的带宽下的加载速度，最后给出一个建议，提示你哪部分该优化了。如果你看到它的提示都是“Congratulations”证明你的网站性能还不错。
　　这个工具对网页设计师很有帮助，例如你优化/压缩CSS后想看看前后的对比值。其实Firefox也带有查看页面元素的工具，在页面中点击右键选择“查看 页面信息”，就可以看到这页的大小和meta等信息，在“媒体”标签下还可以看到所包含的图片信息，只是没有加载速度而已。
　　从车东这里看到IE里面可以看到页面压缩前的大小，在IE中点右键 – 属性，里面显示的页面大小就是未压缩前的，“IE和FF缺省都是支持HTTP压缩的，只不过IE显示的是压缩前的大小，FF显示的是压缩后的文件大小。”
　　这个工具是在 一篇优化CSS文章中发现的，他说在WordPress中把CSS后缀名改为.php，然后利用gzip压缩的方式来优化CSS，这个方法我只在国外一些插件附带的css上看见过。

转自：http://www.osxcn.com/css/web-page-analyzer.html

还有一个10 个免费优秀的网站统计和分析工具

]]> http://www.dfwolf.org/2007/11/webpage-analyse-online-tool/feed/ 0 [网页制作]word-break:break-all和word-wrap:break-word的区别 http://www.dfwolf.org/2007/10/word-break-break-all-and-word-wrap-break-word/ http://www.dfwolf.org/2007/10/word-break-break-all-and-word-wrap-break-word/#comments Tue, 23 Oct 2007 14:31:24 +0000 断峰狼 http://www.dfwolf.org/2007/10/%e7%bd%91%e9%a1%b5%e5%88%b6%e4%bd%9cword-breakbreak-all%e5%92%8cword-wrapbreak-word%e7%9a%84%e5%8c%ba%e5%88%ab/ 自动换行word-break:break-all和word-wrap:break-word的区别

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于：
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

word-break;break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
WORD-WRAP:break-word 支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。

还有，我在做KingCMS模板的时候，碰到easyarticle

    （此为5.0版本所含文件）页面。这个页面是个文章列表， 其中有个 (king:description size=”200″/)的标签，也就是说其描述是200个字符，因为默认的模板比内容div容器比较大，所以能正常显示，但当size设置为400的时候，超过内容div容器的时候，右栏的内容就会被顶到下面去，所以这时候在class中设置下word-wrap: break-word;就可以解决这个问题了。

    关于word-break:break-all和word-wrap:break-word的区别，我也找了几个：

    一般来说word-wrap和word-break用哪个？
    word-wrap同break-word的区别
    语法:word-wrap : normal | break-word

    ]]> http://www.dfwolf.org/2007/10/word-break-break-all-and-word-wrap-break-word/feed/ 2 [网页制作]如何在搜索框加提示文字鼠标点击后则自动消失 http://www.dfwolf.org/2007/10/input/ http://www.dfwolf.org/2007/10/input/#comments Mon, 22 Oct 2007 16:31:09 +0000 断峰狼 http://www.dfwolf.org/2007/10/%e7%bd%91%e9%a1%b5%e5%88%b6%e4%bd%9c%e5%a6%82%e4%bd%95%e5%9c%a8%e6%90%9c%e7%b4%a2%e6%a1%86%e5%8a%a0%e6%8f%90%e7%a4%ba%e6%96%87%e5%ad%97%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e5%90%8e%e5%88%99%e8%87%aa/
    1. <input value="提示的文字" onfocus="if (value =='提示的文字'){value =''}" onblur="if (value ==''){value='提示的文字'}" />

    这样当输入框默认显示“提示的文字”当鼠标点击的时候自动变成空白，如果不输入任何文字再点击其他地方则再次显示“提示的文字”，如果输入了文字再点击其他地方则无反映。

    另一种方法：

    1. <input value="" onfocus="if (value ==''){value ='数字'}" onblur="if (value =='数字'){value='}" />

    ]]>     http://www.dfwolf.org/2007/10/input/feed/ 0