Posted by Mr.Think on 05/30/2010
空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
先看如下demo代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think
<style>
body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白边距叠加demo@Mr.Think</p></div>
</body>
</html>
这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
CSS+HTML
Posted by Mr.Think on 05/23/2010
上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.
核心JavaScript代码:点此查看DEMO
//@Mr.Think获取对象属性兼容方法
function $(objectId){
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);// W3C DOM
}
else
if (document.all && document.all(objectId)) {
return document.all(objectId);// MSIE 4 DOM
}
else
if (document.layers && document.layers[objectId]) {
return document.layers[objectId];// NN 4 DOM..this won't find nested layers
}
else {
return false;
}
}
//@Mr.Think切换显示文字和背景图位置
function iLeftNav(type){
var inum, i_navinfo = $("i_navinfo");
if (type == "writeblog") {
inum = "-300px";
}
else
if (type == "sharepic") {
inum = "-600px";
}
else
if (type == "writemsg") {
inum = "-900px";
}
else {
inum = "-300px";
}
i_navinfo.innerHTML = $(type).innerHTML;
i_navinfo.style.backgroundPosition = inum + " 0";
}
//@Mr.Think加载鼠标莫过事件
window.onload = function(){
var liitem = $("i_blognav").getElementsByTagName("li");
for (var i = 0; i < liitem.length; i++) {
liitem[0].onmouseover = function(){
iLeftNav("writeblog")
}
liitem[1].onmouseover = function(){
iLeftNav("sharepic")
}
liitem[2].onmouseover = function(){
iLeftNav("writemsg")
}
}
}
本文是一个简易的鼠标莫过效果, 如果需要更酷更炫一点的效果,可点此查看cssrain写的基于jQuery的气泡提示效果.
JavaScript
Posted by Mr.Think on 05/17/2010
据说,这是一个最近很流行的效果,新浪微博,腾讯微博,都用到了这种效果,本博开博时也追随潮流用上了这种效果,今天又在经典论坛中看到了这个效果.
使用方法:
在你的大图链接中加入class=”miniImg artZoom”例:
核心jQuery代码: 点此查看DEMO
//原作者:唐斌www.planeart.cn/,由Mr.Think整理分享.感谢唐斌同学:)
$(function(){
var imgID = 0;
$('a.artZoom').click(function(){
var id = $(this).attr('rel');
if(id == ''){
id = imgID += 1;
$(this).attr('id','artZoomLink-' +id);
$(this).attr('rel',id)
};
var url = $(this).attr('href');
$(this).append('<div class="loading" title="loading.."></div>');//loading
function getImageSize(url,fn){
var img = new Image();
img.src = url;
if (img.complete){
fn.call(img);
}else{
img.onload = function(){
fn.call(img);
};
};
};
getImageSize(url,function(){
$('#artZoomLink-' +id+ ' .loading').remove();
$('#artZoomLink-' +id).hide();
if (id != '' && $('#artZoomBox-' +id).length == 0){
var html = '';
html += '<div class="artZoomBox" id="artZoomBox-' +id+ '" style="display:none">';
html += ' <div class="tool"><a class="hideImg" href="#" rel="' +id+ '">收起</a><a class="imgLeft" href="#" rel="' +id+ '">向左转</a><a class="imgRight" href="#" rel="' +id+ '">向右转</a><a class="viewImg" href="#" rel="' +id+ '">新窗口打开</a></div>';
html += ' <a href="' +url+ '" class="maxImgLink" id="maxImgLink-' +id+ '" rel="' +id+ '"> <img class="maxImg" width="' +this.width+ '" height="' +this.height+ '" id="maxImg-' +id+ '" src="' +url+ '" /> </a>';
html += '</div>';
$('#artZoomLink-' +id).after(html);
};
$('#artZoomBox-' +id).show('fast');
});
return false;
});
//让IE8在图片旋转后高度能被包含
function IE8height(id){
var w = $('#maxImg-' +id).outerWidth();
var h = $('#maxImg-' +id).outerHeight();
$('#artZoomBox-' +id+ ' a.maxImgLink').css('height','');
if ($.browser.version == '8.0' && w > h) {
var maxHeight = Math.max(w, h);
$('#artZoomBox-' +id+ ' a.maxImgLink').css('height',maxHeight+ 'px');
};
};
$('.artZoomBox a').live('click', function(){
var id = $(this).attr('rel');
//收起
if($(this).attr('class') == 'hideImg' || $(this).attr('class') == 'maxImgLink') {
$('#artZoomBox-' +id).hide('fast',function(){
$('#artZoomLink-' +id).show();
});
};
//左旋转
if($(this).attr('class') == 'imgLeft') {
IE8height(id);
$('#maxImg-' +id).rotateLeft(90);
};
//右旋转
if($(this).attr('class') == 'imgRight') {
IE8height(id);
$('#maxImg-' +id).rotateRight(90);
};
//新窗口打开
if($(this).attr('class') == 'viewImg') window.open($('#maxImgLink-' +id).attr('href'));
return false;
});
});
jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.className = 'maxImg';//定义图片旋转后的className
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(angle) {
this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle==undefined?-90:-angle);
}
声明一下,本文实例及代码原作者为唐斌同学(他的博客很棒哦~),原文地址:http://www.planeart.cn/?p=696,感谢唐斌同学:).
jQuery
Posted by Mr.Think on 05/13/2010
如果你的网站是php的,通过下面的方法将能加速你网站的访问速度,无论加速多少,哪怕是0.01秒,你的网站在用户体验上就更进了一步。
在尝试用如下方法前请为你的FirrFox(没有FireFox?移步前往)装上由Yahoo开发的YSlow插件(YSlow是什么？),然后用它分析一下你网站现在的分值是多少.切入正题,开始gzip压缩(本文以压缩css文件为例).
第一步,建立压缩所需的php文件
复制如下代码,保存到要压缩的css文件同目录,命名为css.php,名称可根据你自己喜好命名,只要是php文件即可.
<?php
/**
*@a.header(...这一行是设置压缩文件类型的,如果你要压缩js文件就将text/css改成text/javascript
*@b.include(...此处包含你要压缩的文件,多个按你现在的顺序依次用include("...");调用
*/
if(extension_loaded('zlib')){//检查服务器是否开启了zlib拓展
ob_start('ob_gzhandler');
}
header ("content-type: text/css; charset: utf-8");//在这里设置要压缩的文件类型
header ("cache-control: must-revalidate");
$offset = 60 * 60 * 240;//文件的距离现在的过期时间，这里设置为一天
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
ob_start("compress");
function compress($buffer) {//去除文件中的注释
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
return $buffer;
}
include("style.css");//在此处包含你所要压缩的文件,多个请用include包含后依次排列
if(extension_loaded("zlib")){
ob_end_flush();//输出buffer中的内容
}
?>
第二步,前台调用
以本站为例. 原CSS调用为:
gzip压缩后调用方式为:
需要说明的是,如果你以前有多个css调用,那么,gzip后只须调用一个.当然,前提是你的压缩php文件中包含了所有要调用的css样式表.
第三步,压缩完成,此时用我文章开始提到的YSlow插件再分析一下你的网站,对比一下两次的分值,相信一定会有惊喜.
最后,要提醒一点的时,gzip的php文件中设置了缓存时间,如果你改过css文件,传上去后不是即时生效的,生效时间为上述gzip代码中$offset后面设置的值.解决方法其实也很简单,修改css后,同时修改一下样式调用路径中…/css.php?v=100415 100415的值(这个值可以随意取)即可.
用户体验就是从最细微处做起,忘掉自己的行为模式,站在用户的角度为用户着想,你网站的用户体验就做到了一半.
记录
Posted by Mr.Think on 05/09/2010
纯CSS实现的图片圆角边框效果,兼容IE6.
实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.
核心CSS代码:点此查看DEMO
.i_roundimg{ background:url(http://mrthink.net/demo/images/100508.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}
DEMO用到的PNG背景图片:
另外,样例中有两种解决IE6下PNG图片的方案, 可参考.
CSS+HTML