迷失的世界 » css

IE6下PNG透明的简便解决办法

Zero — Sat, 07 Jul 2012 04:46:27 +0000

IE6下PNG透明在网页设计里总是个恼人的问题，artery以前讲过个简便的解决IE6下PNG透明的办法，可我老忘，所以在这里记录一下，以便使用时方便随时查阅，也给朋友们提供个参考，

方法如下：

在页面网页文件中的前面加入：

建立一个IE6.CSS文件放到对应的位置，IE6.CSS文件内容为：

img, div, td {behavior: url('/iepngfix.htc')}

修改iepngfix.htc文件中blank.gif（大小为一个像素的透明图片）的URL并上传到对应位置，如果找不到这个blank.gif文件会在PNG图片上面多出一个叉叉

iepngfix.htc文件下载：20090825225943

WordPress 实现图片自动缩放

Zero — Tue, 26 Jun 2012 14:47:15 +0000

偶经常发表日志需要配图，感觉加点图片怎么都看着舒服些，有时候加的图片比较大，
导致图片显示不全，所以需要这个自动缩放效果！
wordpress官方皮肤自带有大图片自动缩放，但是效果不是很好，下面列举3种比较完美的缩放代码供大家参考。

方法一、采用官方默认CSS

使用方法：将以下代码直接加入style.css即可
相关说明：只能控制宽度的缩放，高度无法控制，且不支持IE6

p img {
	padding: 0;
	max-width: 100%;
	}

官方的这个方法，不能控制高度，而且不支持IE6，下面偶寻找了一个比较完美的解决方案，我现在用的就是这种CSS控制方法：

p img {
max-width:600px;
width: expression(this.width > 600 ? “600px” : true);
height:auto;
}

方法二、使用jQuery实现

使用方法：1、加载jQuery库 2、将以下代码加入header.php或单独保存为JS并加载

相关说明：可以对图片进行自动缩放，方法较为完美。

$(document).ready(function(){
    $('div').autoResize({height:750});
});  
jQuery.fn.autoResize = function(options)
{
    var opts = {
        'width' : 700,
        'height': 750
    }
    var opt = $.extend(true, {},opts,options || {});
    width = opt.width;
    height = opt.height;
    $('img',this).each(function(){
        var image = new Image();
        image.src = $(this).attr('src');   if(image.width > 0 && image.height > 0 ){
            var image_rate = 1;
            if( (width / image.width) < (height / image.height)){
                image_rate = width / image.width ;
            }else{
                image_rate = height / image.height ;
            }
            if ( image_rate <= 1){
                $(this).width(image.width * image_rate);
                $(this).height(image.height * image_rate);
            }
        }
    });
}

方法三、CSS控制

使用方法：将以下代码直接加入style.css即可

相关说明：可以缩放高度以及宽度，但是比较死板，支持IE6

p img {
    max-width:100px; /* FF IE7 */
    max-height:80px; /* FF IE7 */
    width:expression(this.width > 100 && this.width > this.height ? 100 : true);
    height:expression(this.height > 80 && this.height > this.width ? 80 : true);
    overflow:hidden;
}

这个可以控制缩放固定大小~~也挺好的！

利用CSS实现wordpress侧边栏分类目录分两列显示

Zero — Tue, 05 Jun 2012 15:52:00 +0000

细心的童鞋或许已经发现了我的博客侧边栏的那个分类目录已经由原来的一栏显示变成分两栏显示了，这个主要是根据你自己博客的需要去修改的，如果你希望实现，可以有很多功能强大的插件去实现分类目录分两栏显示，但是今天偶告诉你的是一个非常简单的实现方法，用CSS实现。利用CSS标签ul和li的宽度去实现，控制ul宽度=li宽度x2。

修改方法

1、CSS部分

.sidebar-categories li{
width:130px;
float:left;
}
.sidebar-categories ul{
width:260px;
display:block;
overflow:auto;
}

注：宽度根据你个人的需要去进行调整。总之控制好ul宽度=li宽度的两倍

2、php 文件修改部分

分类目录

这部分就在你侧边栏需要显示分类的地方贴上，wp_list_categories的属性可以自行调整。IE6下的兼容性也被我解决掉了！

轻轻感叹一下：强大的CSS！