CSSASS三人行

我是谁作者：ONEBOYS 发表时间： 2010年12月31号，星期五阅读：2,342 次

下面的代码里隐藏着一个秘密。
这个秘密将会告诉你我是谁!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Who am I</title>
<style type="text/css">
body
{
font-family: '微软雅黑';
line-height: 2;
font-size: 18px;
color: #444;
}
b{font-weight:normal;}
</style>
</head>
<body>
<div id="avata" style="width:50%;word-wrap:break-word;cursor:pointer;" onclick="anim()">王某人，自号【步舞之鹤】，洋诨【ONEBOYS】，八六年生人，籍贯义乌，师出浙林，寄居杭州。混迹互联网、IT界二年余，以捣鼓前端为业。英俊潇洒不足，博学多才欠精。为人善良，外冷内热。性格优柔寡断，善思不善断，善听不善言，十足的低调焖烧型青年。喜体验互联网新事物，好学习崇拜达人牛爷。业余网球爱好者，浙大紫荆港网球场每周六午后，逢无事必到。个人blog：cssass.com。僻野茅庐，若劳大驾，不胜惶恐。</div>
<script type="text/javascript">/*<![CDATA[*/
var d='43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643FU(OU):U*$';
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0;
var e;
function i()
{
	var n=0, g=document.getElementById('avata'), l=g.innerHTML, s='';
	while (n<l.length)
	{
		var r=l.charAt(n);
		if (r==' ') {s+=r; n++}
		if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
		s+='<b>'+l.charAt(n++)+'</b>';
	}
	g.innerHTML=s;
	e=document.getElementById('avata').getElementsByTagName('b');
	for (n=0; n<e.length; n++)
	{
		xo[n]=e[n].offsetLeft;
		yo[n]=e[n].offsetTop;
		var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
		yd[n]=p%500;
		xd[n]=(p-yd[n])/500;
	}
	for (n=0; n<e.length; n++)
	{
		e[n].style.position='absolute';
		e[n].style.left=xo[n]+'px';
		e[n].style.top=yo[n]+'px';
	}
}
function ani()
{	t=parseInt(e.length/4)+2;
	for (var n=0; n<t; n++)
	{
		m=e.length-1-n;
		if ((an-n<=30)&&(an-n>=0))
		{
			var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
			var a=1-b;
			for (i=0; i<=t; i+=t)
			{
				e[n+i].style.left=((yd[n+i]+111)*a+xo[n+i]*b)+'px';
				e[n+i].style.top=((xd[n+i]+74)*a+yo[n+i]*b)+'px';
				e[m-i].style.left=((yd[m-i]+111)*a+xo[m-i]*b)+'px';
				e[m-i].style.top=((xd[m-i]+74)*a+yo[m-i]*b)+'px';
			}
		}
	}
	an+=dir;
	if ((an-t<=30)&&(an>=0))
	{
		window.setTimeout("ani()", 30);
	}
}
function anim()
{
	dir*=-1;
	if ((an<0)||(an-t>30)) ani();
}
i();
/*]]>*/
</script>
</body>
</html>

其实，以上DEMO，代码基本上都来自 Román Cortés,就是那个只用了1K字符写出3D圣诞树的家伙。

附：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<style>
textarea{width:600px;height:60px;font-size:12px;}
</style>
</head>
<body>
<p>源坐标：<textarea id='e'></textarea></p>
<p>存坐标：<textarea id='s'></textarea></p>
<p>解坐标：<textarea id='e2'></textarea></p>
</body>
<script type="text/javascript">
//最大存储坐标[499,254]
var e=[
[7,13],
[26,13],
[499,254]
];
var s='';
var e2=[];
//用字符串存储坐标
function untie(e){
	var i,p,a,b,c;
	var find=function(p){
		for(c=33;c<=126;c++){
			if (c==34 || c==39 || c==92) continue;  //排出' " \三个符号
			for(b=33;b<=126;b++){
				if (b==34 || b==39 || b==92) continue;
				for(a=33;a<=126;a++){
					if (a==34 || a==39 || a==92) continue;
					if(p==a*1600 + b*40 + c-78768)
					{return (String.fromCharCode(a)+String.fromCharCode(b)+String.fromCharCode(c));}
				}
			}
		}
	}
	for(i=0;i<e.length;i++){
		p=e[i][1]*500+e[i][0];
		s+=find(p);
	}
	document.getElementById('s').value=s;
}
//将存储的字符串转回坐标
function tie(s){
	var p,n;
	for(var i=0; i<s.length/3 ; i++){
		n=[];
		p=s.charCodeAt(i*3)*1600+s.charCodeAt(i*3+1)*40+s.charCodeAt(i*3+2)-78768;
		n[0]=p%500;
		n[1]=(p-n[0])/500;
		e2.push(n);
	}
	document.getElementById('e2').value=e2;
}
document.getElementById('e').value=e;
untie(e);
tie(s);
</script>
</html>

新年来临，这篇博文也就是我2010年的关门之作。
祝大家新的一年里新年新气象。

发布在 Javascript | 3 条评论 »

《ie9大风车》与《忍者镖》作者：ONEBOYS 发表时间： 2010年12月27号，星期一阅读：1,430 次

其实这是一个AD帖，
几星期前参加ie9开发大赛做了一个《ie9大风车》（呃，我承认名字很挫）。
然后，嗯，你懂的…
投票地址：http://ie9.onlinevoc.cn/contest/PercodPage.aspx?ID=41

这个小玩意的难度在于，里面的所有东西都不是图片，而是用canvas写的，之前写的贝塞尔曲线的可视化操作实现倒是帮了大忙，不过据说AI已有插件直接导出canvas绘图代码了，那我的手写代码的生产力就太落后了。

支持的浏览器包括ie9,firefox,chrome,safari。在opera下有个bug,暂时无法修复。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>IE9 Pinwheel</title>
<style>
/*
*	IE9大风车
*	author: ONEBOYS
*	blog: http://www.cssass.com
*	谢谢观赏
*/
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;text-align:center;}
#middle{position:relative;z-index:2;width:750px;margin:0 auto;}
#middle canvas{position:relative;}
#bg{position:absolute;z-index:1;top:0;left:0;}
</style>
</head>
<body >
	<canvas id="bg"></canvas>
	<div id='middle'></div>
</body>
<script type="text/javascript">
var G={}
G.$=function(n){
	return document.getElementById(n) || n;
}
G.scrW=function(){return document.body.offsetWidth;}
G.scrH=function(){return document.body.offsetHeight;}
function Pad(){
	var m=1, sign=1, lineWidth=3;
	this.init = function(o){
		this.create(o.name);
		this.S= o.size || 150; //pad尺寸
		this.radius = this.S/3; //logo半径
		this.posX = this.S/2; //logo原点位置
		this.posY = this.S/2;
		this.turn = o.turn || 8;	//补间时限
		this.con = G.$(o.name).getContext('2d');
		this.timeout = null;
		this.radi=this.con.createRadialGradient(-this.radius * 0.1,-this.radius * 0.2, this.radius * 0.5 , 0 , -this.radius * 0.1, this.radius *1.1);  //logo渐变
		this.radi.addColorStop(0, 'rgba(126,226,253,1)');
		this.radi.addColorStop(0.6, 'rgba(69,182,239,1)');
		this.radi.addColorStop(1, 'rgba(20,133,211,1)');
		this.radi2= this.con.createLinearGradient(this.radius * 2.2 , this.radius * 0.2 , this.radius * 0.2 , this.radius * 2.2); //光环渐变
		this.radi2.addColorStop(0, 'rgba(255,187,44,.9)');
		this.radi2.addColorStop(0.5, 'rgba(255,242,102,.9)');
		this.radi2.addColorStop(1, 'rgba(255,187,44,.9)');
		G.$(o.name).width=this.S;
		G.$(o.name).height=this.S;
		this.run();
	};
	this.create = function(n){ //创建canvas
		var temp=document.createElement('canvas');
		var that = this;
		temp.id=n;
		var bind=function(){
			clearTimeout(that.timeout);
			that.turn = 3;
			that.run();
		};
		var drag=function(){
			var o=this,e=arguments[0];
			var tX=parseInt(o.style.left) || 0,
				tY=parseInt(o.style.top) || 0,
				dx=e.clientX,
				dy=e.clientY;
			document.onmousemove=function(e){
				o.style.left=tX+e.clientX-dx+"px";
				o.style.top=tY+e.clientY-dy+"px";
			}
			document.onmouseup=function(){
				document.onmousemove=null;
				document.onmouseup=null;
			}
		};
		temp.addEventListener("mousedown",drag,false); //拖动
		temp.addEventListener("mouseover",bind,false); //划过
		temp.addEventListener("touchstart",bind,false); //iOS触屏。（抱歉，由于本人没钱买iPad，还没测试过）
		G.$('middle').appendChild(temp);
	};
	this.run = function(){  //转动
		var that = this;
		var _slide=function(){
			var b=-1 ,t=0, c=2, d=that.turn;
			function _run(){
				if(t<d){ //半圈补间动画
					t++;
					m = - sign * easeInOut(t,b,c,d);
					that.con.clearRect(0, 0, that.S, that.S);
					that.drawLogo();
					that.drawHalo();
					that.timeout=setTimeout(_run, 10);
				}
				else{  //完成半圈
					sign=-sign;
					that.turn++;
					that.timeout=setTimeout(_slide, 10);
				};
			};
			_run();
		 };
		_slide();
	};
	this.drawLogo=function(){ //绘logo
		this.con.save();
		this.con.translate(this.posX,this.posY);
		if(m === 0) {m = 0.1;}
		this.con.scale(m, 1);
		this.con.beginPath();
		this.con.strokeStyle='#135b9f';
		this.con.fillStyle=this.radi;
		this.con.lineWidth=lineWidth;
		this.con.save();
		this.con.translate(0,-this.radius/8);
		this.con.moveTo(0,0);
		this.con.arc(0,0, this.radius/2 ,0,Math.PI*2/2,true);
		this.con.lineTo(0,0);
		this.con.restore();
		this.con.save();
		this.con.translate(0,this.radius/8);
		this.con.moveTo(this.radius,0);
		this.con.lineTo(-this.radius/2,0)
		this.con.arc(0, 0, this.radius/2 ,Math.PI*2/2,Math.PI*4/24,true);
		var y1=this.radius/2 * Math.sin(Math.PI*4/24) ;
		var x1=Math.sqrt(Math.pow(this.radius,2) - Math.pow(y1+ this.radius/8,2));
		this.con.lineTo(x1,y1);
		this.con.restore();
		var ang1=Math.asin(this.radius/8/this.radius);
		var ang2=Math.acos(x1/this.radius);
		this.con.arc(0, 0, this.radius, ang2, ang1, false);
		this.con.stroke();
		this.con.fill();
		this.con.restore();
	};
	this.drawHalo = function(){  //绘光环
		this.con.save();
		this.con.fillStyle=this.radi2;
		this.con.beginPath();
		this.con.translate(this.posX,this.posY);
		var n=this.radius/105;
		this.con.moveTo(90 * n,-70 * n);
		this.con.bezierCurveTo(125 * n,-202* n,-140* n,-65* n,-128* n,87* n);
		this.con.bezierCurveTo(-125* n,105* n,-105* n,115* n,-60* n,88* n);
		this.con.bezierCurveTo(-59* n,79* n,-108* n,118* n,-114* n,78* n);
		this.con.bezierCurveTo(-115* n,-33* n,117* n,-183* n,88* n,-70* n);
		this.con.fill();
		this.con.restore();
	};
};
var drawBg=function(){ //绘背景
	var bg=G.$("bg").getContext('2d');
	G.$('bg').width=G.scrW() ;
	G.$('bg').height=G.scrH() ;
	var lineBg = bg.createLinearGradient(1000,0,0,800);
	lineBg.addColorStop(0,'#98ff5a');
	lineBg.addColorStop(0.4,'#64dbc5');
	lineBg.addColorStop(0.8,'#00b8fe');
	lineBg.addColorStop(1,'#0034bb');
	bg.save();
	bg.fillStyle=lineBg;
	bg.fillRect(0,0,G.scrW(),G.scrH());
	bg.fillStyle='#fff';
	bg.transform(-1,0,0,1,G.scrW(),0);
	for (var i=20;i>0;i--){
      bg.beginPath();
	  bg.scale(1,0.95);
		if(i % 2 === 0){bg.globalAlpha = 0.05;}
		else{bg.globalAlpha = 0.03;}
      bg.arc(i*i*1.2 ,200 + i*5, 80+i*i, 0, Math.PI*2, true);
      bg.fill();
	}
	bg.restore();
}
function easeInOut(t,b,c,d){ //补间算法
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
window.onload=function(){
	drawBg();
	var max=20;
	//var size=Math.max(G.scrW()/Math.sqrt(max),G.scrH()/Math.sqrt(max));
	for(var i=0 ; i<max; i++ ){
		new Pad().init({name:'pad'+i, turn: i+5});
	}
};
window.onresize=function(){drawBg();}
</script>
</html>

（如果点击运行不对，可以试试刷新下，或者copy到你自己的本机上打开。当然，别用ie9以下的浏览器！）

下面是另一个玩意《忍者镖》，话说是受了这个大赛（http://js1k.com/2010-first/demos）的刺激才写的。
在这个大赛里，所有的Demo都必须小于1KB。

于是，我就把我的代码往死里压。从这样：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>忍者镖</title>
<style>
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;text-align:center;}
#middle{position:relative;z-index:2;height:100%;}
#middle canvas{position:absolute;top:0;left:0;}
#bg{position:absolute;z-index:1;top:0;left:0;}
</style>
</head>
<body >
	<canvas id="bg"></canvas>
	<div id='middle'></div>
</body>
<script type="text/javascript">
var G={}
G.$=function(n){
	return document.getElementById(n) || n;
}
G.scrW=function(){return document.body.offsetWidth;}
G.scrH=function(){return document.body.offsetHeight;}
function Pad(){};
Pad.prototype.init = function(o){
		this.create(o.name);
		this.S= o.size || 400;
		this.posX = this.S/2;
		this.posY = this.S/2;
		this.con = G.$(o.name).getContext('2d');
		G.$(o.name).width=this.S;
		G.$(o.name).height=this.S;
		this.m = o.m || 0;
		this.run();
	};
Pad.prototype.run = function(){
		var sign=1;
		var that = this;
		var _slide=function(){
			var t=0;
			function _run(){
				if(t<Math.PI*6){
					t += 0.1;
					that.m += sign * 0.1;
					that.con.clearRect(0, 0, that.S, that.S);
					that.draw();
					that.timeout=setTimeout(_run, 10);
				}
				else{
					sign=-sign;
					that.timeout=setTimeout(_slide, 10);
				}
			};
			_run();
		 };
		_slide();
	};
Pad.prototype.draw=function(){
		this.con.save();
		this.con.translate(this.posX,this.posY);
		this.con.rotate(this.m);
		if(this.m === 0) {this.m = 0.001;}
		this.con.scale(this.m/10,this.m/10);
		this.con.strokeStyle='#3E392E';
		this.con.fillStyle="#F9F9FA";
		this.con.lineWidth=1;
		this.drawNinja()
		this.con.restore();
	}
Pad.prototype.create = function(n){
		var temp=document.createElement('canvas');
		var that = this;
		temp.id=n;
		G.$('middle').appendChild(temp);
};
Pad.prototype.drawNinja=function(){
	this.con.beginPath();
	this.con.moveTo(20,-20);
	this.con.lineTo(80,0);
	this.con.lineTo(20,20);
	this.con.lineTo(0,80);
	this.con.lineTo(-20,20);
	this.con.lineTo(-80,0);
	this.con.lineTo(-20,-20);
	this.con.lineTo(0,-80);
	this.con.lineTo(20,-20);
	this.con.translate(0,0);
	this.con.arc(0,0,8,0,Math.PI*2,true);
	this.con.stroke();
	this.con.fill();
};
var drawBg=function(){
	var bg=G.$("bg").getContext('2d');
	G.$('bg').width=G.scrW() ;
	G.$('bg').height=G.scrH() ;
	var lineBg = bg.createLinearGradient(1000,0,0,800);
	lineBg.addColorStop(0,'#eee');
	lineBg.addColorStop(0.4,'#818181');
	lineBg.addColorStop(0.8,'#434343');
	lineBg.addColorStop(1,'#141414');
	bg.fillStyle=lineBg;
	bg.fillRect(0,0,G.scrW(),G.scrH());
}
window.onload=function(){
	var max=10;
	for(var i=0 ; i<max; i++ ){
		new Pad().init({name:'pad'+i, m:i*0.1});
	}
	drawBg();
};
window.onresize=function(){drawBg();}
</script>
</html>

斩头去尾，挖心掏肺，搞成这样：

<!doctype html>
<html>
<head>
<style>
body{overflow:hidden;background:#666;}
canvas{position:absolute;top:0;left:0;}
</style>
</head>
<body></body>
<script type="text/javascript">
function g(){var b=this;b.d=function(a){b.create();b.a=a.a;b.e()};b.e=function(){function a(){function e(){if(f<Math.PI*8){f+=0.1;c.a+=d*0.1;c.b.clearRect(0,0,400,400);c.c();c.timeout=setTimeout(e,10)}else{d=-d;c.timeout=setTimeout(a,10)}}var f=0;e()}var d=1,c=b;a()};b.c=function(){var a=b.b;a.save();a.translate(200,200);a.rotate(b.a);if(b.a===0)b.a=0.0010;a.scale(b.a/10,b.a/10);a.strokeStyle="#333";a.fillStyle="#eee";a.lineWidth=1;a.beginPath();a.moveTo(20,-20);a.lineTo(80,0);a.lineTo(20,20);a.lineTo(0, 80);a.lineTo(-20,20);a.lineTo(-80,0);a.lineTo(-20,-20);a.lineTo(0,-80);a.lineTo(20,-20);a.translate(0,0);a.arc(0,0,8,0,Math.PI*2,true);a.stroke();a.fill();a.restore()};b.create=function(){var a=document.createElement("canvas");a.width=400;a.height=400;b.b=a.getContext("2d");document.body.appendChild(a)}}window.onload=function(){for(var b=0;b<10;b++)(new g).d({a:b*0.1})};
</script>
</html>

结果，我的文件大小依然超出1KB，不得不佩服那些1KB Demos啊，个顶个的又小又炫。

标签： canvas, HTML5, ie9开发大赛
发布在 HTML5 | 2 条评论 »

再向宝山行作者：ONEBOYS 发表时间： 2010年12月17号，星期五阅读：1,356 次

杭州的老太太很有趣。

“小伙子，你走错路了，你应该往那边走，走这边是去市中心的，没什么景区的，
你往那边走过地下通道，到对面坐*7路车，就可以到灵隐啊，龙井啊，九溪十八涧啊，都在那边，
先到灵隐，然后到龙井，可以吃点藕粉，喝喝茶，看看雪景，那边景色也不错的。
小伙子，你平时喝茶不喝茶的啦，到杭州麽，也没什么特产好带，就是茶叶啊，丝绸啊，
丝绸麽，你们小年纪的不会感兴趣，会喝茶的话，可以顺便在那边买点茶叶回去，不过不要在路边的地摊上买，可以去茶农家里买，
市中心里也有茶叶卖的，不过要卖的贵个两三倍的。
龙井过去是九溪十八涧，那边过去可以看见一个瀑布，你走过瀑布，就是乾隆皇帝走过的路，叫做乾隆路。
到底以后麽，花5快钱叫上一辆三轮车，到六和塔，到塔上去25快钱，可以看看钱塘江。
六和塔玩过麽再可以坐*路车到雷峰塔，在底下玩玩，不要上去，可以省40快钱，
因为这个塔不是原来的塔，这是后来造的，原来的塔倒掉了，不过，到杭州的话不到雷锋塔是会遗憾的。
小伙子，你是哪里人啊，我说的话你听的懂吧。”

“听的懂，听的懂，我是从苏州过来的。”——这是我说的第一句话，没有表明我在杭州混过一年。

了解到我对那边景区应该不会很熟，老太太又复述了一遍路线，包括怎么从雷峰塔坐车到市中心。
“你往那边是到哪里啊？那边没什么景区。”

“哦，我想从那边上宝石山上去，看西湖。”

08年大学毕业后，第一次上宝石山，从那俯瞰西湖，我感觉这个世界就应该存在着一种天人合一的境界，而自己始终在这种境界之外。
俗事杂念，无时不刻不在内心折腾，想要获取名利，受人爱慕，万人敬仰固是一种积极的追求，
而抛弃杂念，修身养性，无为而为亦是一种人生的境界。
对于我，我的感觉就是，始终受缚在一个社会的牢笼内，而没有做过刻苦努力，没有经过千锤百炼，我的力量是如此微小，无论是摆脱，还是追求，是扯，是抓，是蹭，是跑，都无法挣脱束缚，进入境界。

呵呵，其实我连追求哪个境界都不知道，这是我的悲哀。
今日再上宝石山，看看我的心境还是不是始终停留在当年的那一刻。

人生苦短，去日苦多。最大的悲哀，某过于悲哀过去。

发布在 My life, 相册 | 2 条评论 »

opera下canvas的一个bug 作者：ONEBOYS 发表时间： 2010年12月11号，星期六阅读：1,116 次

测试的opera版本为10.63

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>A canvas bug about scale-arc in Opera</title>
<style>
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
</style>
</head>
<body>
<canvas id="pad" width='1800' height='1000'  style='border:1px solid #ccc'>ie用户(9以下)请忽略</canvas>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
function draw(){
	var con=$id("pad").getContext('2d');
	con.translate(100,100);
	con.moveTo(0,0);
	con.arc(0, 0, 50 ,0, Math.PI*2/4, false);  //以角度0°经45°到90°(math.PI*2/4)方向绘制曲线
	con.translate(200,0);
	con.moveTo(0,0);
	con.scale(-1, 1);       //水平翻转,同transform(-1,0,0,1,0,0);
	con.arc(0, 0, 50 ,0, Math.PI*2/4, false);  //经过翻转之后再次绘制曲线
	con.stroke();
}
draw();
</script>
</body>
</html>

对照其他浏览器,firefox,safari,chrome,ie9
发现:翻转之后，arc曲线方法在Opera下显得不可理解。
（绘制圆0-Math.PI*2是个例外，不会出现问题）

标签： arc, canvas, scale
发布在 HTML5, 浏览器与兼容 | 没有评论 »

浮动后block元素的水平居中,与横版布局的长度自适应作者：ONEBOYS 发表时间： 2010年12月7号，星期二阅读：1,670 次

很久没有写布局方面的东西了。
今天介绍两个小技巧，与float，margin负值有关。

众所周知：
inline元素的水平居中可以用text-align:center;
block元素的水平居中可以用margin:0 auto; (设置宽度后，方显效果)。
block元素设置float:left;后，如果幸运，我们知道其确定的宽度值，则可以用left:50%;margin-left:-width/2;来实现。
那么，当我们不确定知道block具体要达到的宽度时，该如何办呢？
这种情况，常见于菜单栏居中，而因为某些原因，各个菜单项的宽度很难去确定，造成菜单栏宽度的不确定。
当然，我们也可以使用inline元素来嵌套菜单项（即使菜单项是block元素，也未尝不可），父级使用text-align:center;来居中。
而下面的方法也不错，值得吸收的小技巧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>block元素浮动后的自适应水平居中</title>
<style>
*{
	margin:0;
	padding:0;
	list-style:none;
}
.menu{
	float:left;
    position:relative;
	left:50%;
}
.menu li{
	float:left;
	position:relative;
	right:50%;
}
</style>
</head>
<body>
	<ul class="menu">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

上面有一个缺陷，ul的background位置可能会让你纠结不已。

下面介绍第二个简单的技巧。
它应用于横版布局的宽度自适应，因为我们同样不知道横版最终达到的宽度是多少。
尽管这种布局很少见，但里面的技巧其实用处很广。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>横版布局的长度自适应</title>
<style>
*{
	margin:0;
	padding:0;
	list-style:none;
}
.menu{
	float:left;
    margin-right:-30000px;
}
.menu li{
	float:left;
	width:200px;border:1px solid #ccc;
}
</style>
</head>
<body>
<ul class="menu">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
</ul>
</body>
</html>

里面的技巧其实就是个margin负值。
应用margin负值来完成预定的布局，往往有“柳暗花明”的效果。

标签：横版, 浮动居中
发布在 CSS2 | 一条评论 »

5 / 27« 首页...«3 456 7 »...尾页 »

我是谁 作者：ONEBOYS 发表时间： 2010年12月31号，星期五 阅读：2,342 次

《ie9大风车》与《忍者镖》 作者：ONEBOYS 发表时间： 2010年12月27号，星期一 阅读：1,430 次

再向宝山行 作者：ONEBOYS 发表时间： 2010年12月17号，星期五 阅读：1,356 次

opera下canvas的一个bug 作者：ONEBOYS 发表时间： 2010年12月11号，星期六 阅读：1,116 次

浮动后block元素的水平居中,与横版布局的长度自适应 作者：ONEBOYS 发表时间： 2010年12月7号，星期二 阅读：1,670 次

我是谁作者：ONEBOYS 发表时间： 2010年12月31号，星期五阅读：2,342 次

《ie9大风车》与《忍者镖》作者：ONEBOYS 发表时间： 2010年12月27号，星期一阅读：1,430 次

再向宝山行作者：ONEBOYS 发表时间： 2010年12月17号，星期五阅读：1,356 次

opera下canvas的一个bug 作者：ONEBOYS 发表时间： 2010年12月11号，星期六阅读：1,116 次

浮动后block元素的水平居中,与横版布局的长度自适应作者：ONEBOYS 发表时间： 2010年12月7号，星期二阅读：1,670 次