存档

文章标签 ‘css’

WordPress图片保持宽高比自动缩小

2010年5月1日 6 条评论 1,286 views

前阵子一篇博文里面介绍了WordPress图片自动缩放,后来发现有个问题,它仅仅改变了图片的宽度,而没有改变图片的高度,也就是说影响了图片的宽高比,那个叫惨不忍睹。

在网上查了好些资料,经过自己实验,发现只要在原来基础上再加一句代码即可。

max-width:600px;
width: expression(this.width > 600 ? "600px" : true);
height:auto;

这样就可以实现自动按宽高比缩小了。

阅读全文…

分类: Web 标签: ,

兼容IE/Firefox/Opera/Safari等浏览器的pre换行

2010年4月24日 2 条评论 301 views

原文:Firefox下自动换行的解决方案

首先创建wordwrap.xml, 内容如下

<?xml version="1.0" encoding="UTF-8"?>  
<bindings xmlns="http://www.mozilla.org/xbl" 
    xmlns:html="http://www.w3.org/1999/xhtml">  
    <binding id="wordwrap" applyauthorstyles="false">  
        <implementation>  
            <constructor>  
                //<![CDATA[  
            var elem = this;  
            doWrap();  
            elem.addEventListener('overflow', doWrap, false);  
 
            function doWrap()  
            {  
                var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);  
                while (walker.nextNode())  
                {  
                    var node = walker.currentNode;  
                    node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));  
                }  
            }  
            //]]>  
            </constructor>  
        </implementation>  
    </binding>  
</bindings>

然后css pre里改为:

 pre {
  white-space:pre-wrap; /* css-3 */
  white-space:-moz-pre-wrap; /* Mozilla, since 1999 */
  white-space:-pre-wrap; /* Opera 4-6 */
  white-space:-o-pre-wrap; /* Opera 7 */
  word-wrap:break-word; /* Internet Explorer 5.5+ */
  -moz-binding: url('./wordwrap.xml#wordwrap'); /* 再多这行 */
  }

强大.. 完美解决了pre换行,兼容IE/Firefox/Opera/Safari等浏览器。

分类: Web 标签: , , ,

WordPress图片自动缩放

2010年4月23日 1 条评论 1,045 views

打开所用主题的style.css文件,找到.post-content img{,如果没有的话直接添加,在后面加上如下代码:

max-width:600px;
width: expression(this.width > 600 ? "600px" : true);

这里的.post-content img{不是固定的,不同的主题可能不同,比如我自己用的主题就叫post-content。
max-width: 600px: 代码中的这个部分针对Firefox/Opera浏览器,限制对象的最大宽度为600px。此代码对IE无用,为了让IE也能限制对象宽度,所以在代码中 加入第2行代码,用IE提供的expression命令,使所有图片的宽度自动缩小或放大至600px。
这里只是修改了宽度,如果需要修改高度,修改相应代码即可。

分类: Web 标签: , ,

巧用CSS为图片添加修饰点缀效果

2009年9月23日 没有评论 342 views

本文介绍了如何用简单的 CSS 技巧来装饰图片的技巧,方法很简单,只需要用一个 span 标签并对它应用背景图,即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示,从简单的装饰一个小图片到应用圆角的边框,再到半透明的蒙版……不废话来,先来看演示:

在线演示 下载

这么做的好处【The Benefits】:

省时方便:不用再用 PhotoShop 去对每张图片进行处理
完好地保留了原始图片:因为是用 CSS 对图片进行样式处理,所以不用对图片进行任何修改,保留了最原始的完整的图片。
非常的灵活:你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。 阅读全文…

分类: Web 标签: , , , ,

CSS,JS缓存插件-加快页面加载速度

2009年9月6日 没有评论 535 views

这是是在原版的技术上加强版的缓存插件,主要缓存css,js,图片。

现在的页面一般采用Div+Css的形式,页面不大,css和Js占了很大的比重,因此把这部分压缩传送就可以大大加快页面的打开速度,现在99%以上的浏览器支持压缩,所以为这个提供了可行性。
说明:
1,在服务器缓存了压缩过的文件,再次访问减少再压缩时间,降低CPU占用率。
2,通过设置客户端文件缓存时间,降低再次请求次数,可降低85%以上。
3,图片因为已经是压缩格式,只是设置客户端缓存时间,不做压缩处理。

使用方法:
1,服务器必须支持gzip,Rewrite功能。
2,在。htacess文件的“RewriteBase /”下面一行添加
RewriteRule (.*.css$|.*.js$|.*.jpg$|.*.gif$|.*.png$) gzip.php?$1 [L]
3,上传gzip.php到根目录
4,在根目录建cache文件夹,保证可读写。
OK
gzip.rar

分类: Web 标签: , ,